React Custom Hooks

Custom hooks package reusable stateful React logic behind a function interface while preserving React’s Rules of Hooks. They share behavior and state-management logic between components, not the same state instance.

A custom hook is a JavaScript function whose name starts with `use` and that can call other hooks such as `useState`, `useEffect`, or another custom hook. The component calls it like a normal function, while React tracks the hooks invoked during rendering.

Custom hooks are useful when multiple components need the same stateful behavior but should remain independent. For example, a `useWindowSize` hook can subscribe to browser resize events and return the current dimensions to each component that uses it.

A custom hook does not create shared state merely because multiple components call the same hook. Each component invocation gets its own hook state. Sharing state across components instead requires a mechanism such as lifted state, context, an external store, or another shared-state solution.

Custom hooks must follow the Rules of Hooks. Hook calls should occur at the top level of a React function component or custom hook, rather than inside loops, conditions, nested functions, or ordinary utility functions. A custom hook can hide implementation details while exposing a small, purpose-specific API such as returned values and callbacks.

Key points

• Custom hooks are functions whose names conventionally begin with `use` and that use React hooks.
• Each component using a custom hook receives its own hook state; the logic is reused, not the state instance.
• Custom hooks may compose built-in hooks and other custom hooks.
• Hook calls must obey the Rules of Hooks, including stable call order across renders.
• A good custom hook exposes a focused API and hides synchronization or state-management details.

Interview questions

If two components call the same custom hook, do they share its state?

No. Each component invocation gets its own hook state associated with that component’s render lifecycle. The custom hook shares the implementation of the behavior, not the state storage itself. To share state, I would use something such as lifted state, Context, or an external store.

What is a custom hook, and why would you create one?

A custom hook is a reusable function that uses React hooks to encapsulate stateful behavior. I would create one when multiple components need the same behavior, such as subscribing to an event or managing form state. It keeps that logic out of individual components and gives callers a focused API. The hook still follows React’s Rules of Hooks.

What Rules of Hooks apply to custom hooks?

Hooks must be called at the top level of a function component or custom hook, not inside conditions, loops, or nested functions. The important reason is that React relies on a consistent hook call order between renders. A custom hook can call other hooks, but it must preserve these rules itself. The `use` naming convention also allows tooling to recognize hook functions and apply relevant linting rules.

How would you design a custom hook that subscribes to an external event source?

I would make the hook own the subscription lifecycle and expose only the data or operations consumers need. The effect or appropriate subscription primitive should establish the subscription and ensure cleanup when dependencies change or the component unmounts. I would carefully define dependencies so the subscription does not become stale or get recreated unnecessarily. For more complex external stores, I would consider React’s dedicated external-store subscription API rather than manually reproducing its semantics.