React Functional Components and Hooks Questions

Focuses on the functional component model and React hooks API. Topics include using state with useState, managing side effects and lifecycle with useEffect including dependency arrays and cleanup, avoiding common pitfalls such as stale closures and infinite loops, memoization and performance patterns with useMemo and useCallback, state management with useReducer, context consumption with useContext, building and testing custom hooks, rules of hooks, and common patterns for data fetching, event handling, and component local state. Emphasis spans from junior correct usage to advanced patterns and debugging of hooks.

HardTechnical

37 practiced

Explain how to prevent infinite re-render loops caused by useEffect when an effect updates state and that state is listed in the effect's dependency array. Provide a concrete code example that causes a loop and then show multiple strategies to fix it: conditional updates, functional setState, stabilizing dependencies, or moving logic out of the effect.

EasyTechnical

36 practiced

Write a small React functional component FocusInput that renders an <input> and a button labeled 'Focus'. When the button is clicked, the input should receive focus using a ref via useRef. Explain why useRef is preferred over document.querySelector for DOM access inside React components.

MediumTechnical

37 practiced

In TypeScript, show how to type a custom hook that returns a tuple [value, setValue] similar to useState (generic), and how to type useReducer with complex action unions. Provide sample code for generic hook signatures and common pitfalls when typing context providers that expose dispatch functions.

MediumSystem Design

34 practiced

Explain how to create a global application state using Context + useReducer in React. Provide code to create a provider, how to dispatch actions from child components, and describe strategies (such as splitting contexts, selectors, and memoization) to avoid unnecessary re-renders when only part of the state changes.

HardTechnical

35 practiced

You are reviewing a page where a small state change re-renders a large component tree causing jank on low-end devices. Outline an action plan to diagnose and optimize render performance in a React app that uses hooks. Include instrumentation steps (React Profiler), code changes (split contexts, memoize callbacks and values, virtualization), and discuss trade-offs and potential regressions to watch for.

Unlock Full Question Bank

Get access to hundreds of React Functional Components and Hooks interview questions and detailed answers.

Join thousands of developers preparing for their dream job.