Custom Hooks: Package Component Logic for Reuse
A custom hook packages stateful logic (like useState and useEffect) into a reusable function. Use one when multiple components need the same logic, like tracking online status for a status bar and a save button. Footgun: Names must start with use.
Why it exists
In many apps, different components need the same stateful logic. For example, a status indicator and a save button might both need to know if the user is online. Copying and pasting the same useState and useEffect blocks into both components is repetitive, error-prone, and hard to maintain. Custom hooks were created to solve this problem of logic duplication.
The mental model
A custom hook is a regular JavaScript function that follows two rules: its name starts with use, and it can call other hooks inside it. Think of it as creating your own specialized hook, like useOnlineStatus or useFetch, that feels just like a built-in React hook. You are not just sharing code; you are sharing stateful logic.
How it works
You start by identifying repeated logic in a component, typically a combination of useState, useEffect, or other hooks. You then create a new function named useYourLogicName. You cut the logic from your component and paste it into this new function. The function can then return any state or functions the component needs. Now, any component can get that logic by calling your hook in a single line, like const data = useYourLogicName();.
When to use it
Use a custom hook whenever you find yourself writing the same hook-based logic in multiple components. This is perfect for cross-cutting concerns like data fetching, tracking browser APIs (like network status or window size), managing form state, or connecting to external services like a chat server. If different components need to react to the same state but have different UI, a custom hook is the answer.
When not to use it
Do not use custom hooks for logic that does not involve other hooks. If you have a pure calculation or a utility function, a standard JavaScript helper function is more appropriate. Also, avoid creating hooks prematurely. If only one component uses a piece of logic, it's often simpler to keep it there until a second use case arises and a pattern of duplication becomes clear.
One canonical example
Imagine a StatusBar component and a SaveButton component both need to know the user's network status. Instead of each having its own useState(true) and useEffect to add event listeners for 'online' and 'offline' events, you can extract this logic into a useOnlineStatus hook. This hook would contain the state and the effect, returning only the isOnline boolean. Both components could then simply call const isOnline = useOnlineStatus(); to get the live network status without duplicating any implementation details.
Interview question
When is it most appropriate to extract logic into a custom React hook?
- a.When multiple components require the same stateful behavior or side effects.Correct
- b.To define a new UI element that combines both presentation and data fetching.
- c.To encapsulate pure, non-stateful utility functions for better organization.
- d.When a single component's rendering logic becomes overly complex.
Why? this is the answer
Custom hooks are specifically designed to package and reuse stateful logic (like useState and useEffect) across multiple components, preventing duplication. Option D describes general component refactoring, not the specific purpose of custom hooks. Option C is explicitly stated as a scenario where custom hooks should not be used, as a standard JavaScript function is more appropriate for pure calculations.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles