{"library":"react-scan","title":"React Scan","description":"React Scan is a performance monitoring tool for React applications designed to automatically detect re-render issues and potential performance bottlenecks. Unlike React's built-in `Profiler` or other tools like `Why Did You Render?`, `react-scan` aims to provide simple visual cues and requires minimal to no code changes for integration. It offers a portable API accessible via npm, CDN script tags, or a command-line interface, making it versatile for various development workflows across different React frameworks. The package is currently at version 0.5.3 and maintains an active development cycle with a moderate release cadence, though previous versions noted a period of slower releases. Key features include highlighting re-rendering components, providing notifications for performance issues, and offering a persistent, draggable toolbar for inspection.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-scan"],"cli":{"name":"react-scan","version":null}},"imports":["import { scan } from 'react-scan';","import { scan } from 'react-scan/all-environments';","import { Options } from 'react-scan';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { scan, Options } from 'react-scan';\nimport React, { useState, useEffect } from 'react';\nimport ReactDOM from 'react-dom/client';\n\n// Define options for React Scan, typically enabling it only in development.\nconst scanOptions: Options = {\n  enabled: process.env.NODE_ENV === 'development', // Crucial for conditional activation\n  debug: false, // Set to true for verbose logging\n  // You can add more options like filters or thresholds here.\n};\n\n// Initialize React Scan. It's best practice to call it once early in your app lifecycle.\n// Ensure this runs only client-side if your environment is universal (SSR/SSG).\nif (typeof window !== 'undefined') {\n  scan(scanOptions);\n}\n\nfunction App() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    console.log('App component mounted or re-rendered');\n  });\n\n  return (\n    <div>\n      <h1>React Scan Basic Example</h1>\n      <p>Current count: {count}</p>\n      <button onClick={() => setCount(prev => prev + 1)}>\n        Increment Count\n      </button>\n      <ChildComponent value={count} />\n    </div>\n  );\n}\n\nfunction ChildComponent({ value }: { value: number }) {\n  // This component will re-render whenever its 'value' prop changes.\n  // React Scan will highlight it and report its renders if enabled.\n  return (\n    <p>Child component showing value: {value}</p>\n  );\n}\n\n// Render your application using ReactDOM.\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  const root = ReactDOM.createRoot(rootElement);\n  root.render(\n    <React.StrictMode>\n      <App />\n    </React.StrictMode>\n  );\n} else {\n  console.error(\"Root element not found! Ensure an element with id='root' exists in your HTML.\");\n}\n","lang":"typescript","description":"This quickstart demonstrates how to integrate React Scan into a React application, enabling it conditionally for development environments. It shows the basic `scan()` function call with an `Options` object, and a simple React component structure that would trigger re-renders visible via the React Scan toolbar.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}