What does it mean to lift state up, and what architectural problem does this solve?
What is prop drilling and what are the built-in React ways to solve it?
What is prop drilling, and at what point does it become a problem?
How does useRef differ from useState, and when should you use a ref instead of state?
Explain the difference between a controlled and an uncontrolled component, and in what scenario would you prefer an uncontrolled component?
When would you choose useReducer over useState, and what are the architectural trade-offs?
Why must state be treated as immutable in React, and what happens if you mutate state directly instead of using a setter function?
How does React handle state updates that are dependent on the previous state, and why is the functional update pattern preferred?
What happens if you update state inside a render function or the body of a function component?
How do you decide whether a piece of data should be managed as state or passed as props, and what are the conceptual trade-offs?
What is the difference between a callback ref and a ref object created with useRef, and when would you use a callback ref?
How does React handle one-way data flow, and why is this considered an advantage over two-way data binding?
Why should we use <Fragment> (or <>) instead of a <div> wrapper, and how does this impact the DOM tree and CSS selectors like flexbox?
What is the difference between State and Props in React?
What is JSX, and what does it actually compile to?
Why must we always start Component names with a capital letter in JSX?
What is the difference between a class component and a function component, and why has the community largely shifted to function components?
What are the different ways to conditionally render content in JSX, and what are the pitfalls of using short-circuit evaluation with values like 0?
How does the children prop work, and how does it enable component composition?
What are Synthetic Events in React, and why does React use its own event system instead of native browser events?
Why does React favor composition over inheritance, and what does a compositional architecture look like?
What are "Pure Components" and how do they relate to functional programming?
How does React handle events under the hood: where does it attach event listeners, and what changed about event delegation in React 17?
How do the three forms of the useEffect dependency array (no array, empty array, populated array) differ in terms of when the effect runs?
What is the primary benefit of a custom hook over a standard helper function, and how do they interact with React's stateful logic?
Why can't you use async functions directly inside a useEffect?
What are the main lifecycle methods of a class component, and what are their equivalents using Hooks in a function component?
What is the purpose of the cleanup function returned from useEffect, and when exactly does React run it?
What are the Rules of Hooks, and why does React enforce that hooks are called at the top level in the same order every render?
Why can't hooks be called inside loops or conditions, and how does React track hook state internally using an array/linked list?
Explain the stale closure problem in useEffect. How does the dependency array solve this, and what happens if you omit a dependency?
Context Keys & Concurrent Rendering
What is the purpose of "Keys" in lists, and what happens if you use a random value or an index as a key?
What does useContext do, and how does a component subscribe to and re-render on context changes?
When is the Context API the right choice versus simply drilling props, and what are the performance pitfalls of overusing Context?
What is the Context API, and does it replace a dedicated state management library?
What is the difference between useTransition and useDeferredValue, and when would you use one over the other to improve perceived performance?
Explain Suspense for data fetching: how does it change the way we handle loading states compared to the traditional loading-spinner pattern?
What is 'Concurrent Rendering', and how does it allow React to remain responsive during heavy UI updates?
Explain the concept of Transitions in React 18 and how useTransition helps maintain UI responsiveness during heavy re-renders.
What are Error Boundaries, why can they only be implemented as Class Components, and what types of errors do they not catch?
When would you use ReactDOM.createPortal, and can you explain a scenario where the DOM hierarchy needs to differ from the React component hierarchy?
What are "Higher-Order Components" (HOCs) and why have they become less common since the introduction of Hooks?
Explain the "Render Props" pattern.
Compare the HOC pattern with the Render Props pattern, and why have both largely been replaced by Hooks?
Effects Refs & Utility Hooks
What is the overall purpose of Strict Mode in React, and what does wrapping your app in it accomplish?
What is the difference between useEffect and useLayoutEffect, and when would using the former cause a flicker in the UI?
Why does React's 'Strict Mode' double-invoke effects and reducers in development, and what kind of bugs is it trying to surface?
What is useId used for, and why can't you just use a random number or index to generate IDs?
What is the purpose of useImperativeHandle when used with forwardRef?
Rendering Internals & Reconciliation
Explain the difference between the Virtual DOM and the real DOM, and why is the Virtual DOM considered a performance optimization?
What exactly causes a React component to re-render, and does a parent re-rendering always cause all children to re-render?
Explain the reconciliation process: how does React's diffing algorithm decide which parts of the DOM to update?
What is the "Virtual DOM" and how does the "Diffing Algorithm" work?
What is React Fiber, and how does it differ from the old stack reconciler in terms of how it handles updates?
What is automatic batching in React 18, and how does it change the way state updates are processed compared to older versions?
Explain the difference between the Render phase and the Commit phase in the Fiber architecture, and which one is interruptible.
Explain the difference between the Virtual DOM and the Shadow DOM. Why does React use one but not necessarily the other?
Why does React need to traverse the entire UI tree during a re-render, and what are the performance implications of this?
What does the 'use client' directive actually do? Does it mean the component only renders on the client?
Why is it now recommended to fetch data directly inside Server Components rather than using useEffect on the client?
What is 'Hydration' in React, and why do 'Hydration Mismatch' errors occur? How does React 18/19's selective hydration improve this?
What is the fundamental difference between a Server Component and a Client Component, and why can't you use useState in a Server Component?
Explain the difference between React Server Components and traditional Server-Side Rendering (SSR). Do they solve the same problem?
What is "Streaming SSR" and how does it improve Time to First Byte (TTFB)?
How does useSyncExternalStore help in keeping React state in sync with external data sources?
Explain the concept of 'Actions' in React 19. How do they simplify form handling compared to the traditional useState and onSubmit pattern?
Why is forwardRef being deprecated in React 19, and how do we handle refs in functional components now?
What is the difference between useActionState and useFormStatus, and when would you use one over the other?
What problem does the use hook solve, and how does it differ from standard hooks regarding where it can be called?
Explain how the useOptimistic hook works. Why is it better than manually managing 'loading' and 'success' states for UI responsiveness?