React Patterns and Code Organization Questions

Covers common React development patterns best practices and project organization principles to build maintainable and performant user interfaces. Topics include component design and composition, conditional rendering and list rendering with keys, hooks and custom hooks patterns, state management strategies and avoiding prop drilling, context usage, memoization and performance optimizations, file and folder organization conventions, naming and code style, testing components and integration points, accessibility considerations, and trade offs for applying patterns in different application sizes.

EasyTechnical

51 practiced

List and briefly explain common conditional rendering patterns in React: ternary operator, logical && short-circuiting, IIFE (immediately-invoked function expressions) inside JSX, and Higher-Order Components or render props. Provide short code snippets showing idiomatic usage and pitfalls (for example, falsy values rendered with &&).

MediumTechnical

47 practiced

Design a strategy to avoid deep prop drilling in a mid-sized React app where nested components need shared state like auth, theme, and feature flags. Compare using React Context + useReducer, Redux/RTK, and lightweight libraries like Zustand or Recoil. Discuss re-render characteristics, debugability, developer ergonomics, and when to split state domains.

MediumTechnical

42 practiced

Given a parent component that frequently passes inline functions and object literals as props to many memoized children, diagnose why children still re-render and propose concrete optimizations (useCallback, useMemo, moving handlers, or using refs/context). Provide code examples and explain trade-offs and when memoization backfires.

EasyTechnical

56 practiced

Why are keys required when rendering lists in React? Describe what makes a key stable and appropriate. Provide a small example where using the array index as a key causes a bug (for example an input losing focus or swapped state) and explain the correct alternative.

HardTechnical

41 practiced

Describe how to build a performant infinite-scroll list in React that supports virtualization and items with dynamic/unknown heights. Explain which libraries you might use (react-window, react-virtualized, react-virtuoso), how to measure item heights (ResizeObserver, estimated sizes), and strategies for preserving scroll position when prepending or removing items.

Unlock Full Question Bank

Get access to hundreds of React Patterns and Code Organization interview questions and detailed answers.

Join thousands of developers preparing for their dream job.