Untitled

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>
  
  )
}