react-scan

import { scan, Options } from 'react-scan'; import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; // Define options for React Scan, typically enabling it only in development. const scanOptions: Options = { enabled: process.env.NODE_ENV === 'development', // Crucial for conditional activation debug: false, // Set to true for verbose logging // You can add more options like filters or thresholds here. }; // Initialize React Scan. It's best practice to call it once early in your app lifecycle. // Ensure this runs only client-side if your environment is universal (SSR/SSG). if (typeof window !== 'undefined') { scan(scanOptions); } function App() { const [count, setCount] = useState(0); useEffect(() => { console.log('App component mounted or re-rendered'); }); return ( <div> <h1>React Scan Basic Example</h1> <p>Current count: {count}</p> <button onClick={() => setCount(prev => prev + 1)}> Increment Count </button> <ChildComponent value={count} /> </div> ); } function ChildComponent({ value }: { value: number }) { // This component will re-render whenever its 'value' prop changes. // React Scan will highlight it and report its renders if enabled. return ( <p>Child component showing value: {value}</p> ); } // Render your application using ReactDOM. const rootElement = document.getElementById('root'); if (rootElement) { const root = ReactDOM.createRoot(rootElement); root.render( <React.StrictMode> <App /> </React.StrictMode> ); } else { console.error("Root element not found! Ensure an element with id='root' exists in your HTML."); }