What are Hooks in React?
Discover what React hooks are, how useState and useEffect work, the rules of hooks, and why they let function components manage state and side effects.
Expected Interview Answer
Hooks are special functions, like useState and useEffect, that let function components use state, side effects, and other React features without writing a class.
Before hooks, only class components could hold state or run lifecycle logic, forcing developers to convert simple function components into classes just to add interactivity. Hooks changed that by letting any function component call built-in hooks such as useState for local state, useEffect for side effects, useContext for shared data, and useRef for mutable references. Hooks must be called at the top level of a component, in the same order every render, which is why conditional or looped hook calls are disallowed. Custom hooks let you extract and reuse stateful logic across components, following the same rules as built-in hooks.
- State and lifecycle logic in function components
- No need for class components
- Reusable logic via custom hooks
- Cleaner separation of concerns than lifecycle methods
- Simpler mental model for related logic
AI Mentor Explanation
Hooks are like specialized gear a fielder clips onto their belt before play — a stopwatch hook to track overs, a chalk hook to mark the crease — each adding one capability without changing who the player fundamentally is. You call on whichever gear you need at the top of your run-up, in the same order each time.
Step-by-Step Explanation
Step 1
Import the hook
Import built-in hooks like useState or useEffect from 'react' at the top of the file.
Step 2
Call at the top level
Invoke the hook inside the function component body, never inside conditionals or loops.
Step 3
Use useState for data
Call useState to declare a piece of local state and get back its value and setter.
Step 4
Use useEffect for side effects
Call useEffect to run code after render, such as fetching data or subscribing to events.
Step 5
Extract custom hooks
Move repeated stateful logic into a function prefixed with 'use' to share it across components.
What Interviewer Expects
- Names useState and useEffect as core hooks
- Explains hooks let function components hold state
- Knows the rule against conditional or looped hook calls
- Understands custom hooks share reusable logic
- Contrasts hooks with class lifecycle methods
Common Mistakes
- Calling hooks inside if statements or loops
- Believing hooks only exist for state, ignoring effects/context/refs
- Forgetting custom hook names must start with 'use'
- Thinking hooks work in regular JavaScript functions, not just components
- Confusing hooks with lifecycle methods without noting the different execution model
Best Answer (HR Friendly)
“Hooks are special built-in functions that let a simple component keep track of information and respond to changes, without needing more complex code structures. They make components easier to write and reuse, which speeds up development.”
Code Example
import { useState, useEffect } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const id = setInterval(() => setSeconds((s) => s + 1), 1000);
return () => clearInterval(id); // cleanup on unmount
}, []);
return <p>Elapsed: {seconds}s</p>;
}Follow-up Questions
- What are the rules of hooks and why do they exist?
- How do you write a custom hook?
- What is the difference between useEffect and useLayoutEffect?
- Can you use hooks in class components?
- Why must hooks be called in the same order every render?
MCQ Practice
1. Where must hooks be called in a component?
Hooks must be called at the top level, in the same order every render, so React can track their state correctly.
2. What must a custom hook's name start with?
Custom hooks must be prefixed with 'use' so React's linter and runtime can identify them as hooks.
3. What problem did hooks primarily solve?
Hooks let function components use state and other React features, removing the need for class components.
Flash Cards
What is a React hook? — A special function like useState or useEffect that adds state or lifecycle features to function components.
Where can hooks be called? — Only at the top level of a function component or custom hook, never conditionally or in loops.
What must custom hook names start with? — The prefix 'use', e.g. useFetch or useLocalStorage.
What did hooks replace the need for? — Class components, for adding state and lifecycle behavior to components.