Hooks in React are special functions introduced in React 16.8 that allow you to use state and other React features in functional components, without writing class components.

In interviews, the key idea is:
Hooks make functional components as powerful as class components.

Why Hooks were introduced?

Before Hooks:

• State and lifecycle methods were only available in class components

• Logic reuse was difficult (HOC, render props caused complexity)

• Components became hard to maintain

Hooks solve these problems by:

• Enabling state in functional components

• Improving code reusability

• Making components simpler and cleaner

Commonly Used React Hooks

1. useState

Used to add state in functional components.

const [count, setCount] = useState(0);

 Interview point:

• useState returns an array: [state, setState function]

• Updating state causes re-render

2. useEffect

Used for side effects like API calls, subscriptions, DOM updates.

useEffect(() => {
  fetchData();
}, []);

Interview points:

• Runs after render

• Dependency array controls when it runs:

  • [] → runs once (like componentDidMount)

  • [value] → runs when value changes

  • no array → runs after every render

3. useContext

Used to access global state without prop drilling.

const theme = useContext(ThemeContext);

Avoids passing props through multiple levels.

4. useRef

Used to access DOM elements or persist values without re-render.

const inputRef = useRef(null);

Interview point:

• Changing .current does NOT trigger re-render

5. useMemo

Used for performance optimization by memoizing expensive calculations.

const result = useMemo(() => computeValue(a, b), [a, b]);

Prevents unnecessary recalculations.

6. useCallback

Used to memoize functions.

const handleClick = useCallback(() => {
  console.log("clicked");
}, []);

Helps avoid unnecessary re-renders of child components.

Rules of Hooks (Very Important for Interviews)

1. Hooks must be called only at the top level

   • Not inside loops, conditions, or nested functions

2. Hooks must be called only inside React function components or custom hooks

Why?

• Ensures hooks are called in the same order every render

Custom Hooks

You can create reusable logic using custom hooks.

function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return { count, increment };
}

Interview point:

• Custom hooks start with use

• Used for reusing stateful logic

Key Interview Summary

If asked “What are Hooks?”, answer like this:

Hooks are functions introduced in React 16.8 that allow functional components to use state, lifecycle features, and other React capabilities without writing class components. They also help in reusing logic and improving code readability.

Common Follow-up Questions

Interviewers often ask:

• Difference between Hooks and class components

• useEffect vs componentDidMount

• useMemo vs useCallback

• Rules of Hooks

• Custom hooks use cases