This file is the fast-answer layer for the React notes. Use it after you finish the stage files or when you need a quick revision loop before an interview.
- Read the question.
- Say the short answer out loud.
- Add one example from your own project experience.
- If the interviewer goes deeper, use the follow-up direction.
Model answer: React is a JavaScript library for building user interfaces using a component-based, declarative model. You describe what the UI should look like for a given state, and React handles updating the DOM efficiently.
Follow-up direction: Declarative UI, component tree, reconciliation.
Model answer: JSX is a syntax extension that lets us write HTML-like UI syntax inside JavaScript. It compiles to React element creation calls, so it is not HTML and not a template language.
Follow-up direction:
Expressions in {}, className, single root element.
Model answer: Props are read-only inputs passed from parent to child. State is internal data owned by a component and updated over time, usually from user interaction or async work.
Follow-up direction: Unidirectional data flow, lifting state up.
Model answer: Keys give list items stable identity so React can reconcile them correctly. Unstable keys can cause incorrect remounts, stale state, and unnecessary DOM work.
Follow-up direction: Why index keys are risky for dynamic lists.
Model answer: Function components are the modern default because Hooks give them state and side-effect capabilities without class syntax. Class components still matter in legacy codebases and for error boundaries.
Follow-up direction: Hooks, lifecycle methods, maintenance of older apps.
Model answer: Hooks let function components use state, effects, refs, and reusable stateful logic without class components. They also make logic reuse easier through custom hooks.
Follow-up direction: Custom hooks vs HOCs and render props.
Model answer: Hooks rely on consistent call order so React can associate each hook call with the right internal state slot. That is why hooks must run at the top level and only inside React components or custom hooks.
Follow-up direction: What breaks when hooks are called conditionally.
Model answer:
useEffect is used to synchronize a component with systems outside React, such as network requests, event listeners, timers, or browser APIs.
Follow-up direction: Dependency arrays, cleanup, stale closures.
Model answer:
useEffect runs after the browser paints. useLayoutEffect runs after DOM mutations but before paint, so it is used when layout measurement or visual consistency matters.
Follow-up direction:
Why useLayoutEffect should be used sparingly.
Model answer:
useState is better for simple local state. useReducer is better when updates are related, more complex, or easier to reason about as named actions.
Follow-up direction: Action-driven state transitions, testability.
Model answer: I create a custom hook when stateful logic repeats across components or a component becomes hard to read because business logic and UI are mixed together.
Follow-up direction: Hooks reuse logic, not shared state instances.
Model answer: A component re-renders when its state changes, its parent re-renders, its props change, or a context it consumes changes.
Follow-up direction: Why parent renders can cascade through children.
Model answer: Reconciliation is React's process for comparing the previous element tree with the next one and deciding what should change in the UI.
Follow-up direction: Keys, element types, render vs commit phase.
Model answer: The render phase calculates what the next UI should look like. The commit phase applies those changes to the DOM and finalizes the update.
Follow-up direction: Why render can be interrupted but commit cannot.
Model answer:
useMemo memoizes a computed value. useCallback memoizes a function reference. I use them only when profiling or component behavior shows they solve a real problem.
Follow-up direction: Overuse of memoization and mental overhead.
Model answer:
React.memo memoizes a component so React can skip re-rendering it when its props are shallowly equal.
Follow-up direction: Prop identity, stable callbacks, when memo is not worth it.
Model answer: Fiber makes React rendering interruptible and priority-aware, which helps React keep urgent UI interactions responsive even when rendering work is heavy.
Follow-up direction: Lanes, transitions, Suspense.
Model answer: No. Context is a way to distribute values through a subtree. Redux is a full state container architecture with predictable updates, tooling, middleware, and broader scaling patterns.
Follow-up direction: Context plus useReducer vs RTK.
Model answer: Context is enough for lower-frequency shared values such as theme, auth session, locale, or feature flags, especially when the state is naturally scoped to one subtree.
Follow-up direction: Why broad, frequently changing context values can hurt performance.
Model answer: Redux Toolkit keeps Redux's predictability and tooling but removes most of the boilerplate by using slices, Immer, async helpers, and better defaults.
Follow-up direction: Why old Redux still matters in legacy apps and interviews.
Model answer: I would consider Zustand when I want an external store with less boilerplate and simpler ergonomics, but I still need more structure than Context. If the app needs strong team-wide patterns, middleware-heavy workflows, or a very standardized architecture, RTK is usually the safer choice.
Model answer:
For simple cases I can fetch inside useEffect, but for production apps I prefer a dedicated data layer such as React Query, SWR, or framework-native fetching because caching, retries, loading states, and invalidation matter quickly.
Follow-up direction: Server state vs client UI state.
Model answer: Suspense is a React mechanism for coordinating loading boundaries. It lets React show fallback UI while waiting for code or certain data integrations to become ready.
Follow-up direction: Lazy loading, streaming, framework support.
Model answer: Controlled components keep input state in React, which is better for validation and dynamic UI. Uncontrolled components let the DOM hold the current value, which can be simpler for basic forms.
Follow-up direction: Tradeoff between control and boilerplate.
Model answer: A synthetic event is React's cross-browser wrapper around native browser events. It gives a consistent event API across browsers.
Follow-up direction: Event delegation and current React behavior.
Model answer: An error boundary catches render-time errors in a subtree and shows fallback UI instead of letting the whole app crash.
Follow-up direction: What it does not catch: event handlers and arbitrary async errors.
Model answer: The biggest mistakes are over-centralizing state, overusing Context for frequently changing values, memoizing blindly, and skipping profiling before optimization.
Follow-up direction: State colocation, profiler, context splitting.
Model answer: I start with clear feature boundaries, keep transient UI state local, use Context selectively for shared low-frequency values, add an external store only when justified, and standardize data fetching, testing, and observability patterns early.
Follow-up direction: Feature-based folders, design system, ownership boundaries.
Move shared state to the nearest common ancestor.
Because React treats a changed key as a different component identity.
It stores a mutable value across renders without causing re-renders.
Because the effect may read stale values from an older render.
Because you describe the desired UI for a state instead of imperatively mutating the DOM step by step.
Take 10 questions from this file and answer each in:
- One sentence.
- Thirty seconds.
- Two minutes with one real example.
That is usually enough to expose where the understanding is shallow.