This is the companion reference to "React Interview Questions, Actually Explained" — that one goes deep on 36 questions with diagrams and a mock test; this one is the full map. 100 questions, organized the way they'd realistically come up across a set of interviews, each answered concisely and accurately rather than at essay length. Where a question overlaps with the deep-dive, I've kept the answer here short and pointed at the fuller version rather than repeating it.

React basics

Q1. What is React?

A JavaScript library (not a full framework) for building user interfaces out of reusable, composable components. It was built at Facebook/Meta and popularized describing UI declaratively — you describe what the UI should look like for a given state, and React updates the real DOM to match via its virtual DOM and diffing process.

Q2. How is React different from Angular or Vue?

When comparing React, Angular, and Vue, a few consistent differentiators stand out.

Q3. What is a React component?

A self-contained, reusable piece of UI — in modern React, almost always a JavaScript function that accepts props and returns JSX describing what should render. Components compose: a page is just a tree of smaller components, each responsible for one part of the UI.

Q4. How do you create a component in React?

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Used like a regular tag:
<Greeting name="Ada" />;

Q5. What is JSX and why do we use it in React?

JSX is syntax sugar that compiles to React.createElement()/jsx() calls — see the "JSX vs. React.createElement" question in the deep-dive companion for the fully compiled example. It's used because writing markup and logic in one place, with real JavaScript expressions inline via {}, is far more ergonomic than a template string or a separate templating language.

Q6. Can you explain the virtual DOM in React?

A lightweight, in-memory representation of the UI as plain JS objects. React diffs a new virtual tree against the previous one and applies only the resulting minimal set of real DOM changes — see the deep-dive's Virtual DOM question for the full walkthrough with a diagram.

Q7. What are the differences between a class component and a functional component?

Class components extend React.Component, hold state in this.state, and use lifecycle methods (componentDidMount, etc.); function components use hooks (useState, useEffect) for the same jobs, with less boilerplate and no this-binding to manage. Function + hooks is the default for new code today — the deep-dive's function-vs-class table covers the full comparison.

Q8. How do you handle events in React?

React wraps native events in a SyntheticEvent and handlers are passed as camelCase props (onClick, onChange) rather than string HTML attributes.

function Button() {
  return <button onClick={() => alert("Clicked!")}>Click me</button>;
}

Q9. What are state and props in React?

Props are read-only data a parent passes down to configure a component; state is data a component owns and manages itself, and changing it triggers a re-render. See the deep-dive's props-vs-state question for the full distinction and the classic "copying a prop into state" pitfall.

Q10. How do you pass data between components in React?

Parent → child is just a prop. Child → parent is a callback function passed down as a prop, which the child calls with the data. Sibling → sibling (no direct relationship) usually means lifting the shared state up to their common parent, or reaching for Context/a state library once that gets unwieldy.

React state management

Q11. What is a stateful component?

Any component that manages its own state — traditionally a class component, but a function component using useState/useReducer is equally "stateful." The opposite is a stateless/presentational component that only renders whatever props it receives.

Q12. Can you explain how useState works?

useState(initialValue) returns a [value, setter] pair; calling the setter schedules a re-render with the new value. See the deep-dive's useState question for why calling the setter twice in a row with the same expression doesn't add up the way you'd expect.

const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>{count}</button>;

Q13. How do you update the state of a parent component from a child component?

function Parent() {
  const [value, setValue] = useState("");
  return <Child onChange={setValue} />;
}

function Child({ onChange }) {
  return <input onChange={(e) => onChange(e.target.value)} />;
}

Q14. What is lifting state up in React?

When two sibling components need to share or stay in sync with the same piece of state, the fix is moving that state to their closest common parent and passing it back down as props (plus a callback to change it) — rather than keeping two separate copies in sync by hand.

Q15. When do you use Redux or Context API for state management?

Context suits state that's genuinely global but changes rarely — theme, locale, the logged-in user. Redux (or Zustand, etc.) earns its cost once state changes frequently and only specific components should re-render on specific changes — see the deep-dive's Context-vs-Redux-vs-Zustand table for the full comparison.

React lifecycle & hooks

Q16. Explain the lifecycle methods of a React class component.

Q17. How do hooks work in React?

Hooks are plain functions that let a function component "hook into" state and lifecycle features that used to require a class. Internally, React associates each hook's state with its position in that component's call order — see the deep-dive's Rules of Hooks question for why that means hooks can't be called conditionally.

Q18. Can you describe the useEffect hook and its purpose?

Runs a side effect after render — data fetching, subscriptions, manually touching the DOM. Its optional cleanup function (the return value) runs before the next execution and on unmount. The deep-dive's useEffect question covers the two most common dependency-array mistakes in detail.

Q19. How do you fetch data with hooks in React?

function Users() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    let cancelled = false;
    fetch("/api/users")
      .then((r) => r.json())
      .then((data) => { if (!cancelled) setUsers(data); });
    return () => { cancelled = true; }; // skip setState after unmount
  }, []);
  return <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}

Q20. What rules do you have to follow when using hooks?

• Only call hooks at the top level of a component or another hook — never inside conditions, loops, or nested functions.
• Only call hooks from React function components or custom hooks, not plain JS functions.
• Name custom hooks starting with "use" so tooling can enforce the rules above.

Component communication

Q21. How do props work in React?

A component receives props as the single argument to its function; they're read-only from the receiving component's side, and a parent re-passing new values on its next render is what causes the child to re-render with the update.

Q22. What is prop drilling and how can you avoid it?

Passing a value through several components that don't use it, just so a deep descendant can. Context is the usual fix; for a shallower case, component composition (passing an already-rendered element down instead of drilling raw data through) can avoid it without Context at all.

Q23. Explain the Context API and its use cases.

Context lets any descendant read a value directly without it being passed through every level in between. Good fits: theme, the logged-in user, locale, feature flags — values that are genuinely app-wide and don't change on every keystroke. See the deep-dive for the re-render pitfall of putting too much in one context.

Q24. How do you use render props?

A render prop is a function passed as a prop that a component calls with some internal state, letting the caller decide exactly what to render with it. Mostly superseded by custom hooks today, which share the same logic without nesting one render function inside another.

Q25. What is the children prop?

The implicit prop containing whatever was nested between a component's opening and closing tags — it's how wrapper/layout components work.

function Card({ children }) {
  return <div className="card">{children}</div>;
}

<Card>
  <p>Anything can go here.</p>
</Card>;

Performance optimization

Q26. Why is performance optimization important in React?

Jank and slow interactions directly hurt how a product feels — and for public-facing sites, measurably hurt conversion and search ranking. React apps in particular can quietly accumulate unnecessary re-renders as they grow if nothing's watching for it, since the framework's default is "re-render children whenever the parent does."

Q27. What is React.memo and when would you use it?

A wrapper that shallow-compares a component's new props against its last render and skips re-rendering if they're unchanged. It does nothing if the parent passes a fresh object/array/function literal every render — see the deep-dive's React.memo question for that exact failure mode and the fix.

Q28. How does PureComponent differ from Component in React?

PureComponent automatically implements shouldComponentUpdate with a shallow comparison of props and state, skipping a re-render when neither changed — plain Component always re-renders on any parent re-render or setState call. It's the class-era equivalent of wrapping a function component in React.memo.

Q29. Can you explain the concept of reconciliation in React?

The process of comparing a newly rendered virtual tree against the previous one to figure out the minimal set of real DOM changes needed — see the deep-dive's Fiber and "what triggers a re-render" questions for how this is actually implemented as an interruptible unit of work.

Q30. How can you prevent unnecessary re-renders in React?

• Keep state as close as possible to where it's used, instead of high in the tree.
• Split one big context/state object into smaller, narrower ones.
• Pair React.memo on a child with useCallback/useMemo in the parent for the props actually passed down.
• Compute derived values during render instead of syncing them into their own state with an effect.

Styling in React

Q31. How do you apply styles in a React application?

Three common approaches: plain CSS/Sass files imported per component, CSS Modules (locally-scoped class names so styles don't leak between components), or a CSS-in-JS library. Inline style objects work too, but they can't express pseudo-classes or media queries.

Q32. What is CSS-in-JS and how do you implement it in React?

Writing CSS inside JavaScript (usually a tagged template literal or a style object) so styles live next to the component that uses them and can reference props/state directly. Styled-components and Emotion are the two most common implementations — see the next question for how styled-components specifically works.

Q33. Can you describe how Styled-Components work?

styled.div`...` generates a real React component with a unique, generated class name, and injects the corresponding CSS into the page at runtime. Props can interpolate directly into the CSS string, so styling responds to state without juggling extra conditional classNames.

const Button = styled.button`
  background: ${(props) => (props.primary ? "#6366f1" : "#333")};
  padding: 0.5rem 1rem;
`;

<Button primary>Click me</Button>;

Q34. What are the advantages of using Sass or LESS in a React project?

• Nesting, variables, and mixins that keep related styles visually grouped.
• Partial files (@import) for splitting a stylesheet without a runtime cost.
• No runtime overhead — it's all compiled away at build time.
• Most of these features now also exist in plain CSS (custom properties, native nesting), which has narrowed the gap.

Q35. How do you use inline styles in React?

The style prop takes a plain JS object with camelCase keys — useful for a value that's genuinely dynamic per instance, limited because it can't express pseudo-classes or media queries.

<div style={{ color: accent, fontWeight: isActive ? 700 : 400 }}>
  Text
</div>;

React routing

Q36. What is React Router?

The de-facto standard client-side routing library for React — it maps URL paths to components so a single-page app can have multiple "pages" without a full page reload.

Q37. How do you create dynamic routes in React?

<Route path="/users/:id" element={<UserProfile />} />;

// inside UserProfile:
const { id } = useParams();

Q38. How would you pass data to routes in React Router v5+?

Through the URL itself (path or query params), or via the state option on navigate() / <Link state={...}> for data that shouldn't live in the URL at all.

Q39. How do you programmatically navigate using React Router?

const navigate = useNavigate();
navigate("/dashboard");

Q40. What are route guards and how can you implement them in React?

React Router has no built-in "guard" concept — you implement one as a wrapper component that checks a condition and either renders the route's children or redirects.

function PrivateRoute({ children }) {
  const { isAuthenticated } = useAuth();
  return isAuthenticated ? children : <Navigate to="/login" />;
}

React patterns

Q41. What are higher-order components (HOCs)?

A function that takes a component and returns a new one with extra props/behavior wired in — react-redux's connect() is the classic example. See the deep-dive's HOC question for why custom hooks have made these less common.

Q42. Explain the container/presenter (smart/dumb) component pattern.

Split a feature into a "smart" container that owns data-fetching/state, and a "dumb" presentational component that only receives props and renders UI — makes the presentational half trivially reusable and easy to test in isolation. A custom hook can now hold the "smart" logic without needing a wrapper component at all, but the underlying idea — separate data concerns from rendering concerns — still holds.

Q43. How would you implement a compound component pattern in React?

A set of components meant to be used together, sharing implicit state via Context, so the API reads declaratively instead of one component with a dozen configuration props.

const TabsContext = createContext(null);

function Tabs({ children, defaultValue }) {
  const [active, setActive] = useState(defaultValue);
  return (
    <TabsContext.Provider value={{ active, setActive }}>
      {children}
    </TabsContext.Provider>
  );
}
Tabs.Tab = function Tab({ value, children }) {
  const { active, setActive } = useContext(TabsContext);
  return (
    <button onClick={() => setActive(value)} aria-pressed={active === value}>
      {children}
    </button>
  );
};

// <Tabs defaultValue="a"><Tabs.Tab value="a">A</Tabs.Tab></Tabs>

Q44. Explain the use of custom hooks in React.

A custom hook is a function whose name starts with "use" that calls other hooks internally — the mechanism React uses to extract and share stateful logic between components without a wrapper component. usePrevious, useDebounce, and useLocalStorage are common examples.

Q45. What is a render prop pattern?

Same pattern as the render-props question earlier — a function-as-prop that hands the caller internal state and lets it decide what to render.

Form handling

Q46. How do you handle forms in React?

Two approaches: controlled (React state holds every field's value) or uncontrolled (the DOM holds values, read via refs on submit). Most real-world forms end up controlled once any validation or conditional-field logic is needed.

Q47. What is controlled and uncontrolled components?

Q48. How do you validate forms in React?

At minimum on submit (required fields, formats), often also on blur/change for immediate feedback. Libraries like Formik or React Hook Form paired with a schema validator (Zod/Yup) handle the wiring so you're not hand-rolling error state per field.

Q49. What is Formik and how is it used in React forms?

A form library that manages values, validation, touched/error state, and submission for you — you describe the fields and a validation schema, and it handles the state-juggling that gets repetitive once a form has more than a few fields.

Q50. How do you handle file uploads in React?

<input type="file" onChange={(e) => setFile(e.target.files[0])} />;

// then, on submit:
const body = new FormData();
body.append("file", file);
fetch("/upload", { method: "POST", body });

React with TypeScript

Q51. What are the benefits of using TypeScript with React?

• Catches prop-shape mistakes at compile time instead of at runtime.
• Editor autocompletion for props and state.
• Safer refactors across a large component tree.
• A component's props effectively become self-documenting.

Q52. How do you define types for props and state in TypeScript with React?

interface GreetingProps {
  name: string;
  onClose?: () => void;
}
function Greeting({ name, onClose }: GreetingProps) { /* ... */ }

const [count, setCount] = useState<number>(0);

Q53. Explain how to use interfaces with React components and TypeScript.

An interface (or type alias) describes a component's props shape; TypeScript checks every call site against it. React.FC<Props> exists but has fallen out of favor since it implicitly adds children and complicates generics — typing the props argument directly is the more common style now.

Q54. How do TypeScript generics enhance react components?

Generics let a component's prop types adapt to whatever data it's given instead of being pinned to one shape.

function List<T>({ items, renderItem }: {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}) {
  return <ul>{items.map((item, i) => <li key={i}>{renderItem(item)}</li>)}</ul>;
}

Testing in React

Q55. Why is testing important in React?

It's what lets you refactor or add features without manually re-checking every screen by hand — and it catches the exact class of regression (a prop rename, a broken conditional) that's easy to miss in code review.

Q56. What are some common testing libraries for React?

• Jest (or Vitest) — test runner and assertions.
• React Testing Library — rendering plus user-centric queries and events.
• Cypress / Playwright — real-browser end-to-end testing.

Q57. How do you test a React component with Jest?

test("greets the user by name", () => {
  render(<Greeting name="Ada" />);
  expect(screen.getByText("Hello, Ada!")).toBeInTheDocument();
});

Q58. Can you explain the difference between shallow rendering and mount rendering in Enzyme?

Shallow rendering renders only one level deep — child components show up as placeholders, not their actual output — isolating a test from its children's implementation. Mount does a full DOM render including all descendants, closer to real browser behavior, at the cost of being slower and more brittle to changes deep in the tree.

Q59. What is react-testing-library and how is it different from Enzyme?

Enzyme encourages inspecting a component's internals (shallow render, checking instance state); React Testing Library deliberately doesn't expose those and instead makes you query the rendered output the way a user would. RTL is also the actively maintained, current-React-compatible option — Enzyme's adapters lag behind newer React versions.

Advanced React topics

Q60. What are React fragments and why are they useful?

<>...</> groups children without adding a real DOM node — needed because a component can only return one root, and an extra wrapping <div> can break layout assumptions or add noise to the accessibility tree. Use the explicit <React.Fragment key={id}> form when mapping to a list of fragments, since the shorthand can't take a key.

Q61. What is React portal and when would you use it?

createPortal renders a subtree into a different DOM node than its parent, while keeping it in the same place in React's own tree (events and context still work normally). The classic case is a modal or tooltip that needs to escape a parent's overflow:hidden or a low z-index.

Q62. How does error boundary work in React?

A class component implementing getDerivedStateFromError/componentDidCatch that renders a fallback UI instead of crashing when a descendant throws during render. There's still no hook equivalent — it's the one remaining reason to write a class in an otherwise all-hooks codebase.

Q63. What is server-side rendering and how is it done with React?

Running the component tree on the server to produce real HTML for the very first response, instead of shipping an empty shell that only fills in after JS loads — improves perceived load time and gives crawlers real content immediately. React ships renderToString/renderToPipeableStream for this; frameworks like Next.js (what this site runs on) wire it up automatically per route.

Q64. Can you explain the concept of suspense and lazy loading in React?

React.lazy turns a component import into its own on-demand chunk, and Suspense lets you show a fallback while that chunk loads — see the deep-dive's lazy+Suspense question for the code. React 18 also extended Suspense to data-fetching (frameworks use it for streaming/async server components), not just code-splitting.

React and SEO

Q65. How does React affect SEO?

A purely client-rendered React app ships a nearly empty HTML shell; a crawler that doesn't execute JavaScript (or times out before it finishes) sees nothing meaningful. Modern Google crawling does render JS, but slower and less reliably, and it's still a real risk for other crawlers and social-media link previews.

Q66. What strategies would you use to make a React application SEO-friendly?

• Server-render or statically generate the initial HTML.
• Set per-page <title>/meta description and Open Graph tags.
• Use semantic HTML and real <a href> links, not onClick-only navigation, so crawlers can follow them.
• Avoid hiding meaningful content entirely behind a client-only fetch when it could be part of the initial render.

Q67. How can server-side rendering improve SEO with React applications?

It guarantees the crawler receives fully-formed HTML on the very first response, with no dependency on whether or how well that particular crawler executes JavaScript.

React Native

Q68. What is React Native and how is it different from React?

React Native uses the same component model and most of the same JS API as React, but renders to real native platform views instead of DOM elements — no HTML/CSS underneath. Layout uses Flexbox via a style prop, and elements are native primitives like <View>/<Text> instead of <div>/<span>.

Q69. How do you bridge native modules in React Native?

For functionality JS can't reach alone (camera, Bluetooth, a native SDK), you write a small native module (Swift/Kotlin/Java) exposing methods, and React Native's bridge (or the newer JSI-based direct binding) lets JavaScript call into it and get results back asynchronously.

Q70. Can you describe the layout system in React Native?

Flexbox, applied by default to every view (unlike the web, where you opt into flex) — the same core concepts (flexDirection, justifyContent, alignItems) as CSS flexbox, without the rest of the CSS box model. Styling is entirely via the style prop with a JS object, not stylesheet files in the CSS-file sense.

State management libraries & GraphQL

Q71. What is Apollo Client and how does it integrate with React?

A GraphQL client that pairs a normalized, query-aware cache with React hooks (useQuery, useMutation). Components declare exactly the data shape they need via a GraphQL query, and Apollo handles caching, re-fetching, and keeping every component that queried the same data in sync when it changes.

Q72. How do you manage local state in Apollo Client?

Apollo's cache can hold client-only fields alongside server data (via type policies/local resolvers, or the simpler makeVar() reactive variables) — useful when a piece of UI state genuinely belongs next to the GraphQL data it's paired with. Plain component state or Context is usually still simpler for state unrelated to your API.

Q73. What is Redux and how does it contrast with the Context API?

Redux is an explicit, unidirectional state container: an action describes what happened, a pure reducer computes the next state, and the store notifies subscribers — with a full, replayable history of every change. Context has no such structure or devtools history, and re-renders every consumer on any change to its value rather than the specific slice a component actually reads.

Q74. Can you detail the Redux workflow?

Q75. How do you handle side effects in Redux applications?

Reducers must stay pure — no API calls, no randomness — so async work lives in middleware: redux-thunk (dispatch a function instead of an object, which can dispatch more actions once a promise resolves) or redux-saga (generator-based, better for complex sequences/cancellation). Redux Toolkit's createAsyncThunk wraps the thunk pattern into far less boilerplate today.

React development environment & tooling

Q76. How do you set up a React project from scratch?

Almost nobody hand-wires Babel and Webpack for a new project anymore — you scaffold with Vite (or a framework like Next.js if you also want routing/SSR built in), which already wires the compiler, dev server, and bundler together, then add dependencies as needed.

Q77. What is Babel and why do we use it with React?

A JavaScript compiler that transforms modern syntax — and JSX, which isn't valid JS on its own — into a form browsers can actually run. Without it, JSX and newer language features would have to be avoided entirely.

Q78. What is Webpack and what role does it play in React development?

A module bundler — it follows every import starting from an entry file and packages the whole dependency graph into the small number of files a browser actually loads, plus features like code-splitting and tree-shaking to keep those files smaller.

Q79. How does hot module replacement work in React?

The dev server keeps a connection open to the running page; when a file changes, it sends just that module over the connection and the bundler's runtime swaps it into the already-running app in place — preserving component state (form input, scroll position) instead of a full page reload.

Q80. What are the features of create-react-app and how do you eject from it?

CRA scaffolded a zero-config React project (Babel, Webpack, ESLint, a test runner, all pre-wired) so you never touched build tooling directly. npm run eject copies all of that hidden configuration into your project as real files you can then edit — a one-way trip, since you're now responsible for maintaining it. CRA is effectively deprecated today in favor of Vite or a framework like Next.js.

Integrations and API handling

Q81. How do you handle API calls in React?

Typically inside useEffect, or better, via a data-fetching library like TanStack Query or SWR, which add caching, retries, and re-fetch-on-focus for free — calling fetch/axios directly works but means hand-rolling loading/error/cancellation state yourself every time.

Q82. What is Axios and how is it used over fetch in React applications?

Axios adds automatic JSON parsing, request/response interceptors (handy for attaching an auth token to every request in one place), built-in request cancellation, and more consistent error handling — plain fetch doesn't reject on a 404/500, you have to check response.ok yourself.

Q83. How would you handle WebSocket connections in a React application?

useEffect(() => {
  const ws = new WebSocket("wss://example.com/socket");
  ws.onmessage = (e) => setMessages((m) => [...m, JSON.parse(e.data)]);
  return () => ws.close(); // cleanup on unmount
}, []);

Q84. What are some strategies used to connect a React front end to a backend server?

• A REST API via fetch/Axios, often paired with a caching library like TanStack Query.
• A GraphQL API via Apollo/urql.
• Environment-based API base URLs so dev/staging/production point at the right backend without code changes.
• A thin API-client module so components don't each hand-roll their own fetch/error-handling logic.

Deployment and optimization

Q85. How would you deploy a React application?

Build a static production bundle and serve it from a static host/CDN (Vercel, Netlify, S3+CloudFront) for a pure client-rendered SPA. If the app uses SSR (Next.js, etc.), it needs a Node runtime — or an edge/serverless platform that supports one — instead of a plain static host.

Q86. How do you optimize the performance of a React application for production?

• Code-split with lazy/Suspense so the initial bundle only ships what the first screen needs.
• Compress and appropriately size images.
• Memoize expensive computations/components where profiling actually shows a re-render problem, not pre-emptively everywhere.
• Check a bundle analyzer for anything unexpectedly large in the production build.

Q87. What are service workers and how can they benefit a React application?

A background script the browser runs independently of any open tab, sitting between your app and the network. It can cache assets/API responses for offline use and near-instant repeat loads, and enables installable PWAs and push notifications.

Q88. How do you configure HTTPS in a React app?

In local dev, most tooling (Vite, etc.) can generate a self-signed cert via a flag/env var if you need to test HTTPS-only features locally. In production, HTTPS is normally terminated by the hosting platform/CDN automatically — rarely something you configure inside the React app itself.

Accessibility in React

Q89. Why is accessibility important in web development?

A meaningful share of users rely on assistive technology — screen readers, keyboard-only navigation, voice control — or simply have low vision or motor impairments. An inaccessible app excludes them outright, and in many jurisdictions it's also a legal requirement (WCAG/ADA), not only a nice-to-have.

Q90. How can you make a React application accessible?

• Use semantic HTML elements (button, nav, label) instead of a div with onClick for everything.
• Make sure every interactive element is keyboard-reachable with a visible focus state.
• Give every image real alt text and every form input a real label.
• Test with an actual screen reader occasionally, not only an automated linter.

Q91. What is ARIA and how it is used in React?

ARIA attributes fill the gap when semantic HTML alone can't describe a custom UI pattern's role or state — a custom dropdown gets role="listbox"/aria-expanded, a custom tab gets aria-selected. In JSX these are hyphenated attributes exactly like in HTML (aria-label, aria-hidden) — React passes them straight through.

Internationalization and localization

Q92. What is internationalization (i18n) in React?

Structuring an app so it can be translated and adapted to different languages/locales without code changes per language — extracting every user-facing string into translation keys instead of hardcoding text directly in JSX, plus handling locale-aware formatting for dates, numbers, and currency.

Q93. How do you implement localization (l10n) in a React app?

In practice, a library like react-i18next or FormatJS: wrap the app in a provider, store translated strings in per-locale files, and swap hardcoded text for a translation call (t("greeting")) that looks up the current locale's string. The library also handles pluralization and locale-aware date/number formatting, which get surprisingly complicated to hand-roll correctly.

React code structure & best practices

Q94. How do you structure large React applications?

Two common approaches: grouping by file type (all components/, all hooks/) or by feature (a self-contained folder per feature with its own components/hooks/tests inside). Feature-based structure tends to scale better past a certain size, since related code stays physically close together.

Q95. What are some best practices when writing React code?

• Keep components small and focused on one responsibility.
• Derive values during render instead of syncing them into extra state.
• Colocate state close to where it's used; lift it only when actually shared.
• Give every list item a stable key.
• Treat props/state as immutable — always create new references rather than mutating.

Q96. How do you ensure code quality and maintainability in a React project?

• ESLint + Prettier (or Biome) enforced in CI, not only locally.
• A real test suite that actually runs on every pull request.
• Consistent naming/folder conventions documented somewhere newcomers can find them.
• Code review as a habit, not a formality.

React and Git workflows

Q97. How do you manage feature branches in React development with Git?

One branch per feature/fix, cut from an up-to-date main, kept short-lived and merged via PR as soon as it's reviewed rather than left to drift — the longer a branch lives in parallel with main, the more painful its eventual merge conflicts get.

Q98. What are your strategies for resolving merge conflicts in React projects?

Most React-specific conflicts show up in two predictable places — the same import block edited by two branches, or two people adding sibling JSX elements right next to each other. Read both versions, understand what each was actually trying to add rather than picking one blindly, and re-run the app/tests immediately after resolving — a conflict resolution that looks syntactically fine can still be logically wrong.

React interviews: problem solving and scenarios

Q99. How would you handle a feature request or bug report in an ongoing React project?

Reproduce the issue first — a bug you can't reproduce, you can't verify you've fixed. For a bug: find the smallest case that triggers it, trace it to its root cause rather than the symptom, fix it, then add a test that would have caught it. For a feature: confirm the actual requirement before writing code (requests are often a proxy for a need, not a spec), then scope the smallest version that delivers real value before expanding it.

Q100. Describe your process for optimizing a component that has complex state logic and several child components.

Profile before guessing — React DevTools' Profiler shows which components actually re-render and how often, rather than optimizing on a hunch. Roughly in order of how often they're the real fix: split one large piece of state into several smaller ones so an update to one doesn't force everything downstream to re-render; move state as close as possible to where it's used; memoize the specific expensive child (React.memo) paired with stable props (useCallback/useMemo upstream) once profiling shows it re-rendering for no reason; and only then reach for useReducer if the state transitions themselves have grown complex enough that scattered setState calls are the actual problem.

None of these 100 need to be memorized word-for-word. Understand the reasoning behind ten of them well enough to explain out loud, and the rest start to feel like the same handful of ideas wearing different clothes.

Test yourself

One question per topic area, same self-check format as the deep-dive — locks in your answer on the first click so you find the gaps while it's still fresh.