Untitled

import React, { useState, useCallback } from 'react';

// Button component
const Button = React.memo(({ handleClick, children }) => {
  console.log(`Button ${children} rendered`);
  return <button onClick={handleClick}>{children}</button>;
});

const UseCallbackExample = () => {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState(10);

  // Memoize the callback
  const incrementCount = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  const incrementValue = useCallback(() => {
    setValue(value + 1);
  }, [value]);

  return (
    <div>
      <h2>useCallback Example</h2>
      <Button handleClick={incrementCount}>Increment Count: {count}</Button>
      <Button handleClick={incrementValue}>Increment Value: {value}</Button>
    </div>
  );
};

export default UseCallbackExample;