React Hooks & Component State — Interview Questions & Answers

Ques 1: What are React Hooks?

Ans: React Hooks are functions that let you use state and lifecycle features in functional components (introduced in React 16.8).

Common hooks:

• useState()
• useEffect()
• useRef()
• useContext()
• useMemo()
• useCallback()

Ques 2: Why were hooks introduced in React?

Ans: To avoid using class components for state and lifecycle methods. Hooks make React components simpler, reusable, and easier to maintain.

Ques 3: What are the rules of using Hooks?

1. Only call hooks at the top level (not inside loops or conditions).
2. Only call hooks from React function components or custom hooks.

Ques 4: What is useState in React?

Ans: useState lets you add state to a functional component.

const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>+</button>

Ques 5: What does the useState function return?

Ans: An array with two values:

1. Current state
2. Function to update the state

Ques 6: How can you initialize state with a function?

Ans: Pass a function to useState() for lazy initialization:

const [data, setData] = useState(() => expensiveComputation());

Ques 7: What is useEffect used for?

Ans: useEffect() handles side effects such as API calls, subscriptions, and DOM manipulation.

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

Ques 8: What are side effects in React?

Ans: Any operation that interacts outside React (e.g., fetching data, updating DOM, or logging) is a side effect.

Ques 9: What happens if you don’t provide a dependency array in useEffect?

Ans: The effect runs after every render, possibly causing performance issues or infinite loops.

Ques 10: What happens when you pass an empty array [] in useEffect?

Ans: The effect runs only once, similar to componentDidMount in class components.

Ques 11: What is the cleanup function in useEffect?

Ans: It cleans up side effects (like event listeners or timers) when a component unmounts.

useEffect(() => {
  const timer = setInterval(...);
  return () => clearInterval(timer);
}, []);

Ques 12: What is the useRef hook used for?

Ans: To access or store DOM elements and persist values across renders without causing re-renders.

const inputRef = useRef();
<input ref={inputRef} />

Ques 13: What is the difference between useRef and useState?

Ques 14: What is useContext in React?

Ans: It allows components to consume values from a context without prop drilling.

const Theme = useContext(ThemeContext);

Ques 15: What is prop drilling and how does useContext solve it?

Ans: Prop drilling is passing data through multiple components unnecessarily.

useContext avoids this by directly providing data to any nested component.

Ques 16: What is useReducer and when should you use it?

Ans: useReducer manages complex state logic using a reducer function.

const [state, dispatch] = useReducer(reducer, initialState);

Ques 17: Difference between useState and useReducer?

Ques 18: What is useCallback used for?

Ans: It memoizes functions to prevent unnecessary re-creations and re-renders.

const memoizedFn = useCallback(() => doSomething(a, b), [a, b]);

Ques 19: What is useMemo and how is it different from useCallback?

Ans: useMemo memoizes values, while useCallback memoizes functions.

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

Ques 20: What are custom hooks?

Ans: Custom hooks are reusable functions built using existing hooks.

They start with “use” and encapsulate logic like fetching or validation.

Example:

function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);
  return data;
}

Ques 21: What are the benefits of custom hooks?

• Reusability
• Cleaner code
• Easy testing
• Logic abstraction

Ques 22: What is useLayoutEffect?

Ans: Like useEffect, but runs synchronously after all DOM mutations — useful for layout calculations.

Ques 23: What is useImperativeHandle used for?

Ans: It allows you to expose custom methods from a child component when using forwardRef.

Ques 24: What is useDebugValue used for?

Ans: Used for debugging custom hooks, showing helpful labels in React DevTools.

Ques 25: Can hooks replace Redux or Context API?

Ans: For small apps, yes — hooks like useState and useReducer can replace Redux.

For large-scale state management, Context + Reducer or Redux is preferred.

Ques 26: Why can’t hooks be used in class components?

Ans: Hooks depend on React’s function component execution order, which doesn’t apply to class components.

Ques 27: What is the purpose of dependency arrays in hooks?

Ans: They tell React when to re-run an effect or recompute a memoized function/value.

Ques 28: What is a stale closure in React hooks?

Ans: When a hook captures outdated variable values due to incorrect dependency arrays.

Ques 29: What are specialized hooks in React?

Ans: Hooks like useLayoutEffect, useImperativeHandle, and useDebugValue used for advanced scenarios.

Ques 30: Why should custom hooks start with “use”?

Ans: It’s a React convention that allows React to automatically validate hook rules.