useCounter

Phillmont MuktarAI Engineer

Implement a useCounter hook that manages a counter state, with some additional convenience utility methods.

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

useCounter (Official solution)

Phillmont MuktarAI Engineer

Solution

The useCounter hook uses useState to manage the number state. The setter functions can be implemented in terms of setValue from the useState hook.

import { useState } from 'react';

export default function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  return {
    count,
    increment: () => setCount((x) => x + 1),
    decrement: () => setCount((x) => x - 1),
    reset: () => setCount(initialValue),
    setCount,
  };
}

To ensure consistency, the increment and decrement functions use an updater function to calculate the new value based on the previous value.

If you're using TypeScript, the tricky part is figuring out the right type for setCount since it can also accept an updater function. Simply hover the setter function from useState in your favourite IDE and you'll see the type signature in the form of Dispatch<SetStateAction<...>> where the type of the state is .... Dispatch and SetStateAction can be imported from react.

If you prefer to be verbose, it essentially boils down to this.

type SetCount = (
  valueOrUpdater: number | ((previousValue: number) => number),
) => void;

You must be signed in to view your submissions

Sign in

Create an account