Skip to main content

​
Overview

The useScan() hook is the React hook version of the scan() function. It allows you to initialize React Scan within a React component.

​
Signature

useScan(options?: Options): void

​
Parameters

​
options
Options
default:"{}"
Optional configuration object to customize React Scan behavior. See Options for all available settings.

​
Returns

void - This hook does not return a value.

​
Usage

​
Basic Usage

import { useScan } from 'react-scan';

function App() {
  useScan();
  
  return <div>My App</div>;
}

​
With Options

import { useScan } from 'react-scan';

function App() {
  useScan({
    enabled: true,
    showToolbar: true,
    log: false,
  });
  
  return <div>My App</div>;
}

​
Conditional Scanning

import { useScan } from 'react-scan';

function App() {
  useScan({
    enabled: process.env.NODE_ENV === 'development',
  });
  
  return <div>My App</div>;
}

​
With Custom Callbacks

import { useScan } from 'react-scan';

function App() {
  useScan({
    enabled: true,
    onCommitStart: () => {
      console.log('Commit started');
    },
    onCommitFinish: () => {
      console.log('Commit finished');
    },
  });
  
  return <div>My App</div>;
}

​
Comparison with scan()

Featurescan()useScan()
Usage contextAnywhere in JavaScriptInside React components only
TimingRuns immediately when calledRuns during component mount
Typical usageModule-level initializationComponent-level initialization
Both scan() and useScan() call the same underlying initialization logic. Choose based on your preferred initialization pattern.

​
Best Practices

  • Call useScan() in your root component (e.g., App.tsx) for consistent behavior
  • Don’t call useScan() in multiple components - it only needs to be called once
  • Use the enabled option to control when scanning is active

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us