What is a custom hook? Write a simple useToggle example.

WHAT THIS TESTS: This question evaluates whether you understand custom hooks as React's composition primitive for stateful logic, not just a code organization trick. At senior level, the interviewer cares that you know why the use prefix matters for linting, how custom hooks participate in React's reactive system, and when extracting logic into a hook actually improves maintainability versus adding indirection.

A GOOD ANSWER COVERS: Four things in order. First, a crisp definition: a custom hook is a JavaScript function whose name starts with use that can call other hooks. Second, the implementation of useToggle, which should accept an optional initial boolean, call useState to hold the value, and return a tuple where the second item is a stable toggle function created with useCallback so consumers do not re-register effects unnecessarily. Third, the naming and linting contract: the use prefix lets ESLint enforce the Rules of Hooks, checking for unconditional calls and exhaustive dependencies. Fourth, the architectural rationale: extract a custom hook when two or more unrelated components need the same stateful behavior, such as synchronization logic, event subscription, or derived state updates, rather than copying useState and useEffect blocks.

COMMON WRONG ANSWERS: Several patterns signal confusion. Returning JSX from a custom hook instead of data and callbacks means you invented a component, not a hook. Writing a plain helper function that does not call useState, useEffect, or other hooks misses the point entirely; it cannot share reactive state. Forgetting the use prefix breaks the Rules of Hooks linter and can lead to subtle bugs if hooks are called conditionally inside what React treats as a normal function. Passing unstable callback references without useCallback is also a red flag because it causes unnecessary effect re-runs in parent components.

LIKELY FOLLOW-UPS: The interviewer may ask how you would test useToggle in isolation, which leads to React Testing Library and rendering a test component that consumes the hook. They might ask how to share state rather than logic, which is a cue to mention Context or external stores. They could also ask about performance, such as whether useMemo is needed around the returned tuple, or how to handle derived toggle states like useToggleArray.

ONE CONCRETE EXAMPLE: A practical useToggle implementation looks like this. Import useState and useCallback from React. Define the function as useToggle with a parameter initialValue defaulting to false. Inside, create state with const [value, setValue] = useState(initialValue). Create a toggle callback with const toggle = useCallback(() => setValue(v => !v), []). Return [value, toggle] as a tuple. A consuming component calls const [isOpen, toggleOpen] = useToggle() and uses isOpen for conditional rendering and toggleOpen for click handlers. This keeps the boolean state and its inversion logic in one place and makes it trivial to reuse in modals, accordions, or feature flags.

Source: react.dev