React Interview Prep

What is JSX and how does it get transformed into JavaScript?

What is the virtual DOM and why does React use it?

How do you embed JavaScript expressions inside JSX?

What are React keys and why are they important in lists?

What is `React.StrictMode` and what does it do?

What are refs in React and when should you use them?

What are React Fragments and why would you use them?

How does React's synthetic event system work?

How does React's reconciliation algorithm decide what to update in the DOM?

What are React Portals and when should you use them?

What are error boundaries and how do you implement one in React?

How does `React.lazy` work with `Suspense` for code splitting?

What is the difference between controlled and uncontrolled components?

What is `forwardRef` and when do you need it?

How does React's event delegation differ from native DOM event delegation?

How does React batch state updates and what changed in React 18?

How does event bubbling work with React Portals?

Why does StrictMode in React 18 simulate unmounting and remounting components?

What is React Fiber and how does it improve rendering?

What are the limitations of error boundaries and how do you work around them?

How does `Suspense` work for data fetching and what changed with React 18's streaming SSR?

What happens when you use an unstable key (like `Math.random()`) on a list element?

How does JSX handle boolean, null, and undefined values, and what pitfalls exist with falsy expressions?

How does React's concurrent rendering model differ from synchronous rendering, and what are its implications?

How do you use `useImperativeHandle` with `forwardRef` to expose a custom API from a child component?

What is the `useState` hook and how do you use it?

How does the `useEffect` dependency array control when the effect runs?

What is `useRef` and how is it different from `useState`?

What are the rules of hooks and why do they exist?

How do you create and consume a context with `useContext`?

What is `useMemo` and when should you use it?

What is `useCallback` and when does it improve performance?

How do functional updates work with `useState` and why are they necessary?

How does `useEffect` cleanup work and when does the cleanup function run?

When should you use `useReducer` instead of `useState`?

What is lazy initialization in `useState` and why would you use it?

What is a stale closure in `useEffect` and how do you fix it?

How do you use `useRef` to access and manipulate DOM elements?

How do you extract reusable logic into a custom hook?

What is `useMemo` referential equality and why does it matter for child components?

Why should you avoid using `useCallback` everywhere, and when does it not help?

How do you share stateful logic between components using custom hooks vs. context?

What is `useId` and why was it introduced in React 18?

What is the difference between `useLayoutEffect` and `useEffect`?

How does `useSyncExternalStore` work and when do you need it?

How do you handle complex state transitions with `useReducer` and TypeScript discriminated unions?

What are the performance pitfalls of `useContext` and how do you mitigate them?

How do you build a custom hook that shares state across multiple components using `useSyncExternalStore`?

How do you write a custom hook that properly handles race conditions and AbortController?

Why can't you call hooks conditionally, and what happens internally if you do?

What is composition in React and why is it preferred over inheritance?

How do Higher-Order Components (HOCs) work in React?

What is the render props pattern and when is it useful?

What are compound components and how do they share implicit state?

What is the provider pattern and how does it solve prop drilling?

What is the difference between controlled and uncontrolled components?

How does React.lazy enable code splitting and what are its requirements?

What are React Server Components and how do they differ from Client Components?

How do you decide when to lift state up versus using a state management library?

How can you implement a state machine pattern using `useReducer`?

What is the slots pattern in React and how does it differ from children?

When should you use the `'use client'` directive and what does it actually do?

How do you implement route-based code splitting in a React application?

How do you design a compound component API that is both flexible and type-safe?

How does data flow from Server Components to Client Components in the RSC model?

How does the context selector pattern improve performance in React?

How have custom hooks replaced the render props and HOC patterns?

What are the trade-offs of HOCs versus custom hooks in modern React?

How do Suspense boundaries work for lazy-loaded components?

How should you handle nested context providers to avoid provider hell?

When should you use controlled versus uncontrolled components in complex forms?

What is the RSC serialization boundary and what types can cross it?

How do you decide which components should be Server Components versus Client Components?

How do you handle error boundaries alongside Suspense in a code-split architecture?

How do you handle async data fetching in Server Components without `useEffect`?

What does `React.memo` do and how does its default comparison work?

What are the most common causes of unnecessary re-renders in React?

When is `useMemo` actually worth using, and when does it add unnecessary overhead?

How does `useTransition` work and when should you use it?

What is the `use()` hook in React 19 and how does it differ from `useEffect` for data fetching?

How does the React Profiler API help identify performance bottlenecks?

What is React's concurrent rendering model and how does it differ from synchronous rendering?

How do React 19 form Actions work and what problem do they solve?

How does `useDeferredValue` work and how does it compare to debouncing?

How does `useOptimistic` work in React 19 for optimistic UI updates?

What strategies prevent a context value change from re-rendering every consumer?

How does `useFormStatus` work and where must it be used?

When should you avoid using `React.memo` and what are the tradeoffs?

How does `useActionState` work in React 19 and how does it enable progressive enhancement?

How do you test components that use hooks like `useState` and `useEffect` with React Testing Library?

What is time slicing in React's concurrent renderer and how does it prevent UI jank?

How do you build accessible React components with proper ARIA attributes?

How does `useCallback` interact with `React.memo` and when is the combination necessary?

How does Suspense for data fetching work and what are the requirements for integrating with it?

How does `isPending` from `useTransition` differ from loading state managed with `useState`?

How can `use()` read context values in React 19, and why is this useful?

How do you write integration tests for React components that interact with APIs using React Testing Library?

What are server actions in React 19 and how do they differ from API routes?

What is the difference between `key` as a reset mechanism and using `useEffect` cleanup for resetting component state?

What are the common pitfalls when using `useEffect` that lead to performance problems?