intermediate

Build Your First Custom Hook

Create a custom hook that manages counter state with increment, decrement, and reset functionality to understand the basics of custom React hooks.

import { useState } from 'react';

interface UseCounterReturn {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

function __________(initialValue: number = 0): UseCounterReturn {
  const [count, setCount] = __________...;

  const increment = () => {
    __________...;
  };

  const decrement = () => {
    setCount((c) => c - 1);
  };

  const reset = () => {
    __________...;
  };

  return {
    count,
    increment,
    decrement,
    reset,
  };
}

export default useCounter;

0/4 filled tab moves · Ctrl+↵ submits · Ctrl+Shift+↵ runsstarter code