Untitled
unknown
plain_text
a year ago
1.0 kB
4
Indexable
export default function Test({name}){ const [count, setCount] = useState(0); const [clicks, setClicks] = useState(0); // Without useCallback: This function is recreated on every render const incrementCount = () => { setCount(count + 1); }; // With useCallback: This function is memoized and only recreated when `clicks` changes const incrementClicks = useCallback(() => { setClicks(clicks + 1); }, [clicks]); return ( <div > <h1>useCallback Example</h1> <div className='m-10 gap-10'> <h2>Without useCallback</h2> <p>Count: {count}</p> <button className='p-4 bg-red-300' onClick={incrementCount}>Increment Count</button> </div> <div className='m-10 gap-10'> <h2>With useCallback</h2> <p>Clicks: {clicks}</p> <button className='p-4 bg-red-300' onClick={incrementClicks}>Increment Clicks</button> </div> </div> ) }
Editor is loading...
Leave a Comment