🪝 React Hooks Interview Questions

Master useState, useEffect, useRef, custom hooks, and React 18 concurrent features

useState, useEffect, useRef, useContext, custom hooks, and React 18 features

Explain the difference between useState and useReducer hooks

Medium

Both hooks manage state, but useReducer is preferable for complex state logic involving multiple sub-values or when the next state depends on the previous one.

jsx

What is the useEffect hook and explain its cleanup function?

Medium

useEffect handles side effects in functional components. The cleanup function prevents memory leaks by cleaning up subscriptions, timers, or event listeners.

jsx

How do useMemo and useCallback work? When should you use them?

Medium

useMemo memoizes computed values, while useCallback memoizes functions. Both help optimize performance by preventing unnecessary recalculations and re-renders.

jsx

Explain the useRef hook and its use cases

Medium

useRef returns a mutable ref object that persists across renders. It's commonly used for DOM access and storing mutable values without triggering re-renders.

jsx

What are Custom Hooks and how do you create them?

Medium

Custom Hooks are JavaScript functions that start with "use" and can call other hooks. They allow you to extract and reuse stateful logic across components.

jsx

What are React 18's concurrent features (useTransition, useDeferredValue)?

Hard

React 18 introduced concurrent features that allow React to prepare multiple versions of the UI simultaneously. useTransition and useDeferredValue help prioritize updates.

jsx

What is React Context API and when should you use it?

Medium

Context provides a way to pass data through the component tree without manually passing props at every level (prop drilling).

jsx

React Hooks Interview Tips