This is a follow-up to useCounter. In this version, the counter behavior stays the same, but the returned methods should be memoized; the same function instance is returned across re-renders when its dependencies have not changed.

export default function Component() {
  const { count, increment, decrement, reset, setCount } = useCounter();

  return (
    <div>
      <p>Counter: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

Arguments

• initialValue: number: Initial value of the counter state. If not provided, it should default to 0.

Returns

The useCounter hook returns an object with the following properties:

• count: number: The current counter value
• increment: () => void: A function to increment the counter value
• decrement: () => void: A function to decrement the counter value
• reset: () => void: A function to reset the counter value to initialValue, or 0 if not provided
• setCount: (value: number) => void: A function to set the counter value to value; it has the same signature as setState

increment, decrement, and setCount must be the same function instance across re-renders. reset should also stay stable as long as initialValue has not changed.