[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-74193":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":35,"discoverSource":36},74193,"top-reactjs-interview-questions","greatfrontend\u002Ftop-reactjs-interview-questions","greatfrontend","Most important React.js interview questions for busy Frontend Engineers (updated for 2026)","https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Freact-interview-questions\u002Fquiz?gnrs=github",null,"MDX",5618,171,13,2,0,17,48,142,51,37.71,false,"main",true,[26,27,28,29,30,31],"front-end-development","interviews","javascript","react","react-interview-questions","reactjs","2026-06-12 02:03:23","# Top React.js Interview Questions (Updated for 2025)\n\n**Updated for 2025!** Curated top React.js interview questions with high quality answers for acing your Front End Engineer interviews, brought to you by [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com\u002F?utm_source=github&utm_medium=referral&utm_campaign=top-reactjs-qns&gnrs=yangshun).\n\n---\n\n\u003Cdiv>\n  \u003Cp align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Freact-interview-questions?utm_source=github&utm_medium=referral&utm_campaign=top-reactjs-qns&gnrs=yangshun\">\n      \u003Cimg src=\".\u002Fassets\u002Fgreatfrontend.gif\" alt=\"GreatFrontEnd React Interview Questions\" width=\"100%\">\n    \u003C\u002Fa>\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n\n> Black Friday 2025 sale going on now, enjoy the largest discount of the year! [Get 30% off GreatFrontEnd Premium →](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Freact-interview-questions?utm_source=github&utm_medium=referral&utm_campaign=top-reactjs-qns&gnrs=yangshun) 💡\n\n---\n\n## Table of Contents\n\n\u003C!-- TABLE_OF_CONTENTS:START -->\n\n| No. | Questions |\n| --- | --------- |\n| 1 | [What is React? Describe the benefits of React](#what-is-react-describe-the-benefits-of-react) |\n| 2 | [What is the difference between React Node, React Element, and a React Component?](#what-is-the-difference-between-react-node-react-element-and-a-react-component) |\n| 3 | [What is JSX and how does it work?](#what-is-jsx-and-how-does-it-work) |\n| 4 | [What is the difference between state and props in React?](#what-is-the-difference-between-state-and-props-in-react) |\n| 5 | [What is the purpose of the `key` prop in React?](#what-is-the-purpose-of-the-key-prop-in-react) |\n| 6 | [What is the consequence of using array indices as the value for `key`s in React?](#what-is-the-consequence-of-using-array-indices-as-the-value-for-keys-in-react) |\n| 7 | [What is the difference between controlled and uncontrolled React Components?](#what-is-the-difference-between-controlled-and-uncontrolled-react-components) |\n| 8 | [What are some pitfalls about using context in React?](#what-are-some-pitfalls-about-using-context-in-react) |\n| 9 | [What are the benefits of using hooks in React?](#what-are-the-benefits-of-using-hooks-in-react) |\n| 10 | [What are the rules of React hooks?](#what-are-the-rules-of-react-hooks) |\n| 11 | [What is the difference between `useEffect` and `useLayoutEffect` in React?](#what-is-the-difference-between-useeffect-and-uselayouteffect-in-react) |\n| 12 | [What is the purpose of callback function argument format of `setState()` in React and when should it be used?](#what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used) |\n| 13 | [What does the dependency array of `useEffect` affect?](#what-does-the-dependency-array-of-useeffect-affect) |\n| 14 | [What is the `useRef` hook in React and when should it be used?](#what-is-the-useref-hook-in-react-and-when-should-it-be-used) |\n| 15 | [What is the `useCallback` hook in React and when should it be used?](#what-is-the-usecallback-hook-in-react-and-when-should-it-be-used) |\n| 16 | [What is the `useMemo` hook in React and when should it be used?](#what-is-the-usememo-hook-in-react-and-when-should-it-be-used) |\n| 17 | [What is the `useReducer` hook in React and when should it be used?](#what-is-the-usereducer-hook-in-react-and-when-should-it-be-used) |\n| 18 | [What is the `useId` hook in React and when should it be used?](#what-is-the-useid-hook-in-react-and-when-should-it-be-used) |\n| 19 | [What does re-rendering mean in React?](#what-does-re-rendering-mean-in-react) |\n| 20 | [What are React Fragments used for?](#what-are-react-fragments-used-for) |\n| 21 | [What is `forwardRef()` in React used for?](#what-is-forwardref-in-react-used-for) |\n| 22 | [How do you reset a component's state in React?](#how-do-you-reset-a-components-state-in-react) |\n| 23 | [Why does React recommend against mutating state?](#why-does-react-recommend-against-mutating-state) |\n| 24 | [What are error boundaries in React for?](#what-are-error-boundaries-in-react-for) |\n| 25 | [How do you test React applications?](#how-do-you-test-react-applications) |\n| 26 | [Explain what React hydration is](#explain-what-react-hydration-is) |\n| 27 | [What are React Portals used for?](#what-are-react-portals-used-for) |\n| 28 | [How do you debug React applications?](#how-do-you-debug-react-applications) |\n| 29 | [What is React strict mode and what are its benefits?](#what-is-react-strict-mode-and-what-are-its-benefits) |\n| 30 | [How do you localize React applications?](#how-do-you-localize-react-applications) |\n| 31 | [What is code splitting in a React application?](#what-is-code-splitting-in-a-react-application) |\n| 32 | [How would one optimize the performance of React contexts to reduce rerenders?](#how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders) |\n| 33 | [What are higher order components in React?](#what-are-higher-order-components-in-react) |\n| 34 | [What is the Flux pattern and what are its benefits?](#what-is-the-flux-pattern-and-what-are-its-benefits) |\n| 35 | [Explain one-way data flow of React and its benefits](#explain-one-way-data-flow-of-react-and-its-benefits) |\n| 36 | [How do you handle asynchronous data loading in React applications?](#how-do-you-handle-asynchronous-data-loading-in-react-applications) |\n| 37 | [Explain server-side rendering of React applications and its benefits](#explain-server-side-rendering-of-react-applications-and-its-benefits) |\n| 38 | [Explain static generation of React applications and its benefits](#explain-static-generation-of-react-applications-and-its-benefits) |\n| 39 | [Explain the presentational vs container component pattern in React](#explain-the-presentational-vs-container-component-pattern-in-react) |\n| 40 | [What are some common pitfalls when doing data fetching in React?](#what-are-some-common-pitfalls-when-doing-data-fetching-in-react) |\n| 41 | [What are render props in React and what are they for?](#what-are-render-props-in-react-and-what-are-they-for) |\n| 42 | [What are some React anti-patterns?](#what-are-some-react-anti-patterns) |\n| 43 | [How do you decide between using React state, context, and external state managers?](#how-do-you-decide-between-using-react-state-context-and-external-state-managers) |\n| 44 | [Explain the composition pattern in React](#explain-the-composition-pattern-in-react) |\n| 45 | [What is virtual DOM in React?](#what-is-virtual-dom-in-react) |\n| 46 | [How does virtual DOM in React work? What are its benefits and downsides?](#how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides) |\n| 47 | [What is React Fiber and how is it an improvement over the previous approach?](#what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach) |\n| 48 | [What is reconciliation in React?](#what-is-reconciliation-in-react) |\n| 49 | [What is React Suspense and what does it enable?](#what-is-react-suspense-and-what-does-it-enable) |\n| 50 | [Explain what happens when the `useState` setter function is called in React](#explain-what-happens-when-the-usestate-setter-function-is-called-in-react) |\n\n\u003C!-- TABLE_OF_CONTENTS:END -->\n\n## Questions with answers\n\n\u003C!-- QUESTIONS:START -->\n\n1. ### What is React? Describe the benefits of React\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-react-describe-the-benefits-of-react\u002Fen-US.mdx -->\n\n    React is a JavaScript library created by Facebook for building user interfaces, primarily for single-page applications. It allows developers to create reusable components that manage their own state. Key benefits of React include a component-based architecture for modular code, the virtual DOM for efficient updates, a declarative UI for more readable code, one-way data binding for predictable data flow, and a strong community and ecosystem with abundant resources and tools.\n    \n    **Key characteristics of React**:\n    \n    - **Declarative**: You describe the desired state of your UI based on data, and React handles updating the actual DOM efficiently.\n    - **Component-based**: Build reusable and modular UI elements (components) that manage their own state and logic.\n    - **Virtual DOM**: React uses a lightweight in-memory representation of the actual DOM, allowing it to perform updates selectively and efficiently.\n    - **JSX**: While not mandatory, JSX provides a syntax extension that allows you to write HTML-like structures within your JavaScript code, making UI development more intuitive.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-react-describe-the-benefits-of-react\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-react-describe-the-benefits-of-react?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n2. ### What is the difference between React Node, React Element, and a React Component?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-difference-between-react-node-react-element-and-a-react-component\u002Fen-US.mdx -->\n\n    A **React Node** is anything React can render: a React Element, a string, a number, an array of nodes, a fragment, a portal, `null`, `undefined`, `false`, or `true`. A **React Element** is the immutable plain object React produces from JSX or `React.createElement` describing what to render. A **React Component** is a function (or, historically, a class) that accepts props and returns React Nodes. Elements describe the UI; components are the factories that produce those elements.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-difference-between-react-node-react-element-and-a-react-component\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-the-difference-between-react-node-react-element-and-a-react-component?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n3. ### What is JSX and how does it work?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-jsx-and-how-does-it-work\u002Fen-US.mdx -->\n\n    JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. JSX makes it easier to create React components by allowing you to write what looks like HTML directly in your JavaScript code. Under the hood, JSX is transformed into JavaScript function calls, typically using a tool like Babel. For example, `\u003Cdiv>Hello, world!\u003C\u002Fdiv>` in JSX is transformed into `React.createElement('div', null, 'Hello, world!')`.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-jsx-and-how-does-it-work\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-jsx-and-how-does-it-work?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n4. ### What is the difference between state and props in React?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-difference-between-state-and-props-in-react\u002Fen-US.mdx -->\n\n    **State** is data a component owns and can update over time; **props** are data a component receives from its parent and is not allowed to mutate. State changes trigger a re-render of the owning component (and its descendants); prop changes happen because the parent re-rendered with new values. Together they implement React's one-way data flow: state lives at the lowest common ancestor that needs it, flows down as props, and changes flow back up via callbacks passed as props.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-difference-between-state-and-props-in-react\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-the-difference-between-state-and-props-in-react?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n5. ### What is the purpose of the `key` prop in React?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-purpose-of-the-key-prop-in-react\u002Fen-US.mdx -->\n\n    The `key` prop tells React how to identify each child in a list across renders so it can match the right component instance to the right data, preserve its state, and reorder DOM nodes correctly. A `key` only needs to be unique among siblings, not globally. Changing a component's `key` is also the idiomatic way to **reset its state** — React unmounts the old instance and mounts a fresh one.\n    \n    ```jsx\n    \u003Cul>\n      {items.map((item) => (\n        \u003CListItem key={item.id} value={item.value} \u002F>\n      ))}\n    \u003C\u002Ful>\n    ```\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-purpose-of-the-key-prop-in-react\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-the-purpose-of-the-key-prop-in-react?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n6. ### What is the consequence of using array indices as the value for `key`s in React?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react\u002Fen-US.mdx -->\n\n    Using array indices as `key`s causes React to reconcile the list incorrectly when items are reordered, inserted, or removed. Because the key identifies a position rather than an item, React reuses the wrong component instances — leaving stale local state, focus, and DOM attached to the wrong rows. The fix is to use a stable, unique identifier from the data (e.g. `item.id`). Index keys are only safe when the list is static and never reordered, filtered, or prepended to.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n7. ### What is the difference between controlled and uncontrolled React Components?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-difference-between-controlled-and-uncontrolled-react-components\u002Fen-US.mdx -->\n\n    A **controlled** component drives a form input from React state — you pass `value`\u002F`checked` plus an `onChange` handler, and React state is the single source of truth. An **uncontrolled** component lets the DOM keep the value; you read it via a `ref` (or on submit) and seed the initial value with `defaultValue`\u002F`defaultChecked`. Controlled inputs are the right default when you need validation, conditional UI, or to derive other state from the value. Uncontrolled inputs are simpler for write-once forms and for `\u003Cinput type=\"file\">`, which is always uncontrolled. React 19 also added first-class form support via the form `action` prop, `useFormStatus`, and `useActionState`, which often removes the need for per-field controlled state.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-difference-between-controlled-and-uncontrolled-react-components\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-the-difference-between-controlled-and-uncontrolled-react-components?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n8. ### What are some pitfalls about using context in React?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-some-pitfalls-about-using-context-in-react\u002Fen-US.mdx -->\n\n    Context in React is convenient but easy to misuse. The biggest pitfalls are passing a fresh object\u002Farray as the provider `value` on every render (which forces every consumer to re-render), assuming `React.memo` will stop context-driven re-renders (it won't), and reaching for context as a general-purpose state manager. For frequently-changing or independent slices of state, split context into multiple providers, memoize the value, or use a dedicated state library like Redux, Zustand, or Jotai.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-some-pitfalls-about-using-context-in-react\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-are-some-pitfalls-about-using-context-in-react?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n9. ### What are the benefits of using hooks in React?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-the-benefits-of-using-hooks-in-react\u002Fen-US.mdx -->\n\n    Hooks let you use state and other React features in plain functions, without classes. They were introduced to solve real pain points in the class-component era — \"wrapper hell\" from HOCs and render props, the awkwardness of `this` binding, and the difficulty of sharing stateful logic between components. Custom hooks make that logic genuinely reusable through composition. React 19 expands the set further with hooks like `use`, `useActionState`, `useOptimistic`, and `useFormStatus` for promises, forms, and optimistic UI.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-the-benefits-of-using-hooks-in-react\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-are-the-benefits-of-using-hooks-in-react?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n10. ### What are the rules of React hooks?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-the-rules-of-react-hooks\u002Fen-US.mdx -->\n\n    React hooks have a few essential rules to ensure they work correctly. Always call hooks at the top level of your component or custom hook — never inside loops, conditions, nested functions, or after an early `return`. Only call hooks from React function components or other custom hooks (whose names must start with `use`). Lean on `eslint-plugin-react-hooks` to enforce these rules. The React Compiler (RC\u002Fstable by 2026) relaxes the need for some manual memoization, but the rules of hooks themselves still apply.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-the-rules-of-react-hooks\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-are-the-rules-of-react-hooks?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n11. ### What is the difference between `useEffect` and `useLayoutEffect` in React?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-difference-between-useeffect-and-uselayouteffect-in-react\u002Fen-US.mdx -->\n\n    Both hooks run side effects after render, but they differ in **when** they fire relative to paint:\n    \n    - `useEffect` runs **asynchronously after the browser has painted**. It does not block the user from seeing the new frame. Use it for data fetching, subscriptions, logging, and most side effects.\n    - `useLayoutEffect` runs **synchronously during the commit phase, after DOM mutations but before the browser paints**. It blocks paint, so use it only when you need to measure the DOM and write to it in the same frame to avoid a visual flicker.\n    \n    Both accept a dependency array with the same semantics, both fire twice on mount in Strict Mode development builds, and `useLayoutEffect` has no effect during server rendering (React warns if you use it in SSR).\n    \n    Code example:\n    \n    ```jsx\n    import { useEffect, useLayoutEffect, useRef } from 'react';\n    \n    function Example() {\n      const ref = useRef(null);\n    \n      useEffect(() => {\n        console.log('useEffect: runs after paint');\n      }, []);\n    \n      useLayoutEffect(() => {\n        console.log('useLayoutEffect: runs before paint');\n        console.log('Element width:', ref.current.offsetWidth);\n      }, []);\n    \n      return \u003Cdiv ref={ref}>Hello\u003C\u002Fdiv>;\n    }\n    ```\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-difference-between-useeffect-and-uselayouteffect-in-react\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-the-difference-between-useeffect-and-uselayouteffect-in-react?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n12. ### What is the purpose of callback function argument format of `setState()` in React and when should it be used?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used\u002Fen-US.mdx -->\n\n    The callback (or **updater function**) form of `setState` — both `this.setState(prev => ...)` in classes and `setX(prev => ...)` with `useState` — guarantees that each update is computed from the latest queued state rather than the value captured in your closure. Use it whenever the next state depends on the previous state, especially when you call the setter more than once in the same event handler or when the update may run after an `await`\u002Ftimeout\u002Fpromise.\n    \n    ```jsx\n    \u002F\u002F Modern hooks form (preferred)\n    const [count, setCount] = useState(0);\n    \n    const handleClick = () => {\n      setCount((c) => c + 1);\n      setCount((c) => c + 1); \u002F\u002F Both run; final count is +2.\n    };\n    ```\n    \n    ```jsx\n    \u002F\u002F Legacy class form\n    this.setState((prevState, props) => ({\n      counter: prevState.counter + props.increment,\n    }));\n    ```\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n13. ### What does the dependency array of `useEffect` affect?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-does-the-dependency-array-of-useeffect-affect\u002Fen-US.mdx -->\n\n    The dependency array of `useEffect` determines when the effect should re-run. If the array is empty, the effect runs only once after the initial render. If it contains variables, the effect runs whenever any of those variables change. If omitted, the effect runs after every render.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-does-the-dependency-array-of-useeffect-affect\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-does-the-dependency-array-of-useeffect-affect?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n14. ### What is the `useRef` hook in React and when should it be used?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-useref-hook-in-react-and-when-should-it-be-used\u002Fen-US.mdx -->\n\n    The `useRef` hook in React is used to create a mutable object that persists across renders. It can be used to access and manipulate DOM elements directly, store mutable values that do not cause re-renders when updated, and keep a reference to a value without triggering a re-render. For example, you can use `useRef` to focus an input element:\n    \n    ```javascript\n    import React, { useRef, useEffect } from 'react';\n    \n    function TextInputWithFocusButton() {\n      const inputEl = useRef(null);\n    \n      useEffect(() => {\n        inputEl.current?.focus();\n      }, []);\n    \n      return \u003Cinput ref={inputEl} type=\"text\" \u002F>;\n    }\n    ```\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-useref-hook-in-react-and-when-should-it-be-used\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-the-useref-hook-in-react-and-when-should-it-be-used?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n15. ### What is the `useCallback` hook in React and when should it be used?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-usecallback-hook-in-react-and-when-should-it-be-used\u002Fen-US.mdx -->\n\n    `useCallback` returns a memoized function whose identity only changes when one of its dependencies changes. The point is **referential stability** — so a `React.memo`-wrapped child does not re-render, or a `useEffect` whose deps include the function does not re-fire. Re-creating a plain function literal each render is essentially free; the actual cost being avoided is the **downstream work** triggered by a new reference.\n    \n    ```javascript\n    const memoizedCallback = useCallback(() => {\n      doSomething(a, b);\n    }, [a, b]);\n    ```\n    \n    > Note for 2026: with the **React Compiler** (stable in React 19), most components no longer need manual `useCallback` \u002F `useMemo` \u002F `React.memo` — the compiler memoizes automatically. New code targeting a compiler-enabled project should generally not reach for `useCallback` unless profiling shows a specific need.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-usecallback-hook-in-react-and-when-should-it-be-used\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-the-usecallback-hook-in-react-and-when-should-it-be-used?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n16. ### What is the `useMemo` hook in React and when should it be used?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-usememo-hook-in-react-and-when-should-it-be-used\u002Fen-US.mdx -->\n\n    The `useMemo` hook in React is used to memoize expensive calculations so that they are only recomputed when one of the dependencies has changed. This can improve performance by avoiding unnecessary recalculations. You should use `useMemo` when you have a computationally expensive function that doesn't need to run on every render.\n    \n    ```javascript\n    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);\n    ```\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-usememo-hook-in-react-and-when-should-it-be-used\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-the-usememo-hook-in-react-and-when-should-it-be-used?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n17. ### What is the `useReducer` hook in React and when should it be used?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-usereducer-hook-in-react-and-when-should-it-be-used\u002Fen-US.mdx -->\n\n    The `useReducer` hook in React is used for managing complex state logic in functional components. It is an alternative to `useState` and is particularly useful when the state has multiple sub-values or when the next state depends on the previous one. It takes a reducer function and an initial state as arguments and returns the current state and a dispatch function.\n    \n    ```javascript\n    const [state, dispatch] = useReducer(reducer, initialState);\n    ```\n    \n    Use `useReducer` when you have complex state logic that involves multiple sub-values or when the next state depends on the previous state.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-usereducer-hook-in-react-and-when-should-it-be-used\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-the-usereducer-hook-in-react-and-when-should-it-be-used?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n18. ### What is the `useId` hook in React and when should it be used?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-useid-hook-in-react-and-when-should-it-be-used\u002Fen-US.mdx -->\n\n    `useId` (added in React 18) generates a stable, unique string ID per component instance, **per React root**. Its main reason for existing is to produce IDs that match between the server-rendered HTML and the client hydration — a plain incrementing counter would produce mismatches. Within a single root the IDs are unique, but two separate roots on the same page can collide unless you set `identifierPrefix` on `createRoot` \u002F `hydrateRoot`. Use it for things like linking `\u003Clabel htmlFor>` to `\u003Cinput id>`, never as a list `key`.\n    \n    ```javascript\n    import { useId } from 'react';\n    \n    function NameField() {\n      const id = useId();\n      return (\n        \u003Cdiv>\n          \u003Clabel htmlFor={id}>Name:\u003C\u002Flabel>\n          \u003Cinput id={id} type=\"text\" \u002F>\n        \u003C\u002Fdiv>\n      );\n    }\n    ```\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-useid-hook-in-react-and-when-should-it-be-used\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-the-useid-hook-in-react-and-when-should-it-be-used?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n19. ### What does re-rendering mean in React?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-does-re-rendering-mean-in-react\u002Fen-US.mdx -->\n\n    Re-rendering in React refers to the process where a component updates its output to the DOM in response to changes in state or props. When a component's state or props change, React triggers a re-render to ensure the UI reflects the latest data. This process involves calling the component's render method again to produce a new virtual DOM, which is then compared to the previous virtual DOM to determine the minimal set of changes needed to update the actual DOM.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-does-re-rendering-mean-in-react\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-does-re-rendering-mean-in-react?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n20. ### What are React Fragments used for?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-react-fragments-used-for\u002Fen-US.mdx -->\n\n    React Fragments are used to group multiple elements without adding extra nodes to the DOM. This is useful when you want to return multiple elements from a component's render method without wrapping them in an additional HTML element. You can use the shorthand syntax `\u003C>...\u003C\u002F>` or the `React.Fragment` syntax.\n    \n    ```jsx\n    return (\n      \u003C>\n        \u003CChildComponent1 \u002F>\n        \u003CChildComponent2 \u002F>\n      \u003C\u002F>\n    );\n    ```\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-react-fragments-used-for\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-are-react-fragments-used-for?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n21. ### What is `forwardRef()` in React used for?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-forwardref-in-react-used-for\u002Fen-US.mdx -->\n\n    As of React 19 (December 2024), `forwardRef()` is **deprecated**. Function components can now accept `ref` as a regular prop, so wrapping in `forwardRef()` is no longer required. `forwardRef()` historically existed because, before React 19, function components could not receive a `ref` prop and `forwardRef()` was the official workaround for forwarding a parent's ref down to a child DOM node or component.\n    \n    ```jsx\n    \u002F\u002F Modern (React 19+): ref is a regular prop\n    function MyInput({ ref, ...props }) {\n      return \u003Cinput ref={ref} {...props} \u002F>;\n    }\n    \n    \u002F\u002F Legacy (React 18 and earlier): wrap with forwardRef\n    import { forwardRef } from 'react';\n    const MyInputLegacy = forwardRef((props, ref) => (\n      \u003Cinput ref={ref} {...props} \u002F>\n    ));\n    ```\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-forwardref-in-react-used-for\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-forwardref-in-react-used-for?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n22. ### How do you reset a component's state in React?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fhow-do-you-reset-a-components-state-in-react\u002Fen-US.mdx -->\n\n    The most idiomatic way to reset a component's state in React is to give the component a `key` prop and change it — React unmounts the old instance and mounts a fresh one with brand-new state. For finer-grained resets, call your `useState` setter with the initial value, or dispatch a `RESET` action when using `useReducer`.\n    \n    ```javascript\n    \u002F\u002F Force a full reset by changing the key\n    \u003CForm key={formId} \u002F>;\n    \n    \u002F\u002F Or reset specific state in place\n    setState(initialState);\n    ```\n\n    \u003C!-- Update here: \u002Fquestions\u002Fhow-do-you-reset-a-components-state-in-react\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fhow-do-you-reset-a-components-state-in-react?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n23. ### Why does React recommend against mutating state?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhy-does-react-recommend-against-mutating-state\u002Fen-US.mdx -->\n\n    React recommends against mutating state because several of its mechanisms depend on the previous and next state being **different objects** (reference inequality). When you mutate state in place, the reference does not change, which breaks `Object.is` bailouts in `useState`\u002F`useReducer`, breaks `React.memo` and `useMemo`\u002F`useEffect` dependency comparisons, and can cause tearing under concurrent rendering. It also defeats time-travel debugging in React DevTools. Always produce a **new** object\u002Farray (with the spread operator, array methods like `map`\u002F`filter`\u002F`toSorted`, or a library such as Immer) and pass it to the state setter.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhy-does-react-recommend-against-mutating-state\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhy-does-react-recommend-against-mutating-state?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n24. ### What are error boundaries in React for?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-error-boundaries-in-react-for\u002Fen-US.mdx -->\n\n    Error boundaries in React are components that catch JavaScript errors thrown during rendering, in lifecycle methods, and in constructors of their child component tree, then display a fallback UI instead of crashing the whole application. They are implemented as class components using `static getDerivedStateFromError` (to render a fallback) and optionally `componentDidCatch` (for logging). Since React 16, an uncaught error unmounts the entire React tree, which makes error boundaries effectively required for production apps. Error boundaries do not catch errors inside event handlers, asynchronous code, or server-side rendering. As of React 19, there is still no hooks-based API for error boundaries — most teams use the `react-error-boundary` library, or rely on the new root-level `onUncaughtError`, `onCaughtError`, and `onRecoverableError` options on `createRoot`\u002F`hydrateRoot`.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-error-boundaries-in-react-for\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-are-error-boundaries-in-react-for?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n25. ### How do you test React applications?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fhow-do-you-test-react-applications\u002Fen-US.mdx -->\n\n    To test React applications, use Jest or Vitest as the test runner together with React Testing Library, which encourages testing components the way users interact with them. Drive interactions with `@testing-library\u002Fuser-event` (preferred over `fireEvent`), mock network calls with MSW, and write end-to-end tests with Playwright (or Cypress). For React 19 features like async components and Server Components, lean on async queries (`findBy*`, `waitFor`).\n\n    \u003C!-- Update here: \u002Fquestions\u002Fhow-do-you-test-react-applications\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fhow-do-you-test-react-applications?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n26. ### Explain what React hydration is\n\n    \u003C!-- Update here: \u002Fquestions\u002Fexplain-what-react-hydration-is\u002Fen-US.mdx -->\n\n    React hydration is the process of attaching event listeners and making a server-rendered HTML page interactive on the client side. When a React application is server-side rendered, the HTML is sent to the client, and React takes over to make it dynamic by attaching event handlers and initializing state. This process is called hydration.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fexplain-what-react-hydration-is\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fexplain-what-react-hydration-is?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n27. ### What are React Portals used for?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-react-portals-used-for\u002Fen-US.mdx -->\n\n    React Portals are used to render children into a DOM node that exists outside the hierarchy of the parent component. This is useful for scenarios like modals, tooltips, and dropdowns where you need to break out of the parent component's overflow or z-index constraints. You create a portal with `createPortal(child, container)` from `react-dom`. Even though the rendered DOM lives elsewhere, the portal still belongs to the React tree, so events bubble up to the React parent and context still flows through normally.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-react-portals-used-for\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-are-react-portals-used-for?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n28. ### How do you debug React applications?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fhow-do-you-debug-react-applications\u002Fen-US.mdx -->\n\n    To debug React applications, use the React Developer Tools browser extension to inspect the component tree, props\u002Fstate, and rendering with the Profiler. Enable Strict Mode during development to surface unsafe patterns, and rely on React 19.1 owner stacks for clearer component-aware stack traces. Use error boundaries (or the `react-error-boundary` package) to catch render-time errors, and reach for `console.log`, breakpoints, and the React DevTools \"log\" button for deeper inspection.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fhow-do-you-debug-react-applications\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fhow-do-you-debug-react-applications?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n29. ### What is React strict mode and what are its benefits?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-react-strict-mode-and-what-are-its-benefits\u002Fen-US.mdx -->\n\n    React strict mode is a development tool that helps identify potential problems in an application. It activates additional checks and warnings for its descendants. It doesn't render any visible UI and doesn't affect the production build. The benefits include identifying unsafe lifecycle methods, warning about legacy string ref API usage, detecting unexpected side effects, and ensuring that components are resilient to future changes.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-react-strict-mode-and-what-are-its-benefits\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-react-strict-mode-and-what-are-its-benefits?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n30. ### How do you localize React applications?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fhow-do-you-localize-react-applications\u002Fen-US.mdx -->\n\n    To localize a React application, you typically use a library like `react-i18next` or `react-intl`. First, you set up your translation files for different languages. Then, you configure the localization library in your React app. Finally, you use the provided hooks or components to display localized text in your components.\n    \n    ```javascript\n    \u002F\u002F Example using react-i18next\n    import { useTranslation } from 'react-i18next';\n    \n    const MyComponent = () => {\n      const { t } = useTranslation();\n      return \u003Cp>{t('welcome_message')}\u003C\u002Fp>;\n    };\n    ```\n\n    \u003C!-- Update here: \u002Fquestions\u002Fhow-do-you-localize-react-applications\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fhow-do-you-localize-react-applications?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n31. ### What is code splitting in a React application?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-code-splitting-in-a-react-application\u002Fen-US.mdx -->\n\n    Code splitting in a React application is a technique used to improve performance by splitting the code into smaller chunks that can be loaded on demand. This helps in reducing the initial load time of the application. You can achieve code splitting using dynamic `import()` statements or React's `React.lazy` and `Suspense`.\n    \n    ```jsx\n    import { lazy, Suspense } from 'react';\n    \n    const LazyComponent = lazy(() => import('.\u002FLazyComponent'));\n    \n    function App() {\n      return (\n        \u003CSuspense fallback={\u003Cdiv>Loading...\u003C\u002Fdiv>}>\n          \u003CLazyComponent \u002F>\n        \u003C\u002FSuspense>\n      );\n    }\n    ```\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-code-splitting-in-a-react-application\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-code-splitting-in-a-react-application?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n32. ### How would one optimize the performance of React contexts to reduce rerenders?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fhow-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders\u002Fen-US.mdx -->\n\n    The first thing to know in 2026 is that the **React Compiler** auto-memoizes components and values, so a lot of the manual `useMemo`\u002F`useCallback` work that used to be required for context performance is now done for you — adopt it before reaching for other tricks. Beyond that, the canonical patterns are: split a single context into a state context and a dispatch (or setter) context so consumers that only dispatch don't rerender on state changes; memoize the value object you pass to the provider; wrap consumer components in `React.memo`; and reach for selector libraries like `use-context-selector` when you need to subscribe to a slice of a large value.\n    \n    ```javascript\n    const value = useMemo(() => ({ state }), [state]); \u002F\u002F dispatch is already stable\n    ```\n\n    \u003C!-- Update here: \u002Fquestions\u002Fhow-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fhow-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n33. ### What are higher order components in React?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-higher-order-components-in-react\u002Fen-US.mdx -->\n\n    Higher order components (HOCs) in React are functions that take a component and return a new component with additional props or behavior. They are used to reuse component logic. For example, if you have a component `MyComponent`, you can create an HOC like this:\n    \n    ```javascript\n    const withExtraProps = (WrappedComponent) => {\n      return (props) => \u003CWrappedComponent {...props} extraProp=\"value\" \u002F>;\n    };\n    \n    const EnhancedComponent = withExtraProps(MyComponent);\n    ```\n    \n    HOCs are largely a legacy pattern. The current React docs (React 19) discourage HOCs in favor of custom hooks for sharing logic between function components. You'll still see HOCs in older code and in libraries (e.g. `connect` from React Redux), but for new code, prefer hooks.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-higher-order-components-in-react\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-are-higher-order-components-in-react?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n34. ### What is the Flux pattern and what are its benefits?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-flux-pattern-and-what-are-its-benefits\u002Fen-US.mdx -->\n\n    The Flux pattern is an architectural design Facebook introduced for managing state in React applications. It enforces a unidirectional data flow, making it easier to manage and debug application state. Today Flux is largely historical — it has been superseded by libraries it inspired, such as Redux, Zustand, and the built-in `useReducer` + Context combination — but its single-source-of-truth and unidirectional-flow ideas are still the foundation of those tools.\n    \n    - **Core components**:\n      - **Dispatcher**: Single hub that manages actions and dispatches them to all registered stores.\n      - **Stores**: Hold the state and business logic; act as change emitters that notify subscribed views.\n      - **Actions**: Plain payloads of information sent from the application to the dispatcher.\n      - **View**: React components that subscribe to stores and re-render when stores emit changes.\n    - **Benefits**:\n      - Predictable state management due to unidirectional data flow.\n      - Single source of truth for application state.\n      - Improved debugging and testing.\n      - Clear separation of concerns.\n    \n    Example flow:\n    \n    1. User interacts with the **View**.\n    2. **Actions** are triggered and dispatched by the **Dispatcher**.\n    3. **Stores** process the actions, update their state, and emit a change event.\n    4. **View** re-renders based on the updated state.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-flux-pattern-and-what-are-its-benefits\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-the-flux-pattern-and-what-are-its-benefits?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n35. ### Explain one-way data flow of React and its benefits\n\n    \u003C!-- Update here: \u002Fquestions\u002Fexplain-one-way-data-flow-of-react-and-its-benefits\u002Fen-US.mdx -->\n\n    In React, one-way data flow means that data moves in a single direction: from parent components down to child components via `props`. Children cannot mutate the props they receive; to change parent state, a child invokes a callback the parent passed in. This contrasts with two-way binding (e.g. Angular or Vue's `v-model`), where view and model stay in sync automatically. The main benefits are predictable state changes, easier debugging, and patterns like controlled components, immutable updates, and time-travel debugging that fall out naturally from the constraint.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fexplain-one-way-data-flow-of-react-and-its-benefits\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fexplain-one-way-data-flow-of-react-and-its-benefits?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n36. ### How do you handle asynchronous data loading in React applications?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fhow-do-you-handle-asynchronous-data-loading-in-react-applications\u002Fen-US.mdx -->\n\n    In a modern React app, **don't** roll your own `useEffect` + `fetch` for data loading — the React docs explicitly recommend against it. Reach first for a dedicated data-fetching library: **TanStack Query**, **SWR**, or **RTK Query** for client-side fetching, or **Server Components** and route-level loaders (Next.js App Router, Remix\u002FReact Router) when you control the framework. In React 19, the new `use()` hook lets a component read a promise directly and suspend, which pairs naturally with `\u003CSuspense>` for loading states and error boundaries for failures. A hand-written `useEffect`+`fetch` is a low-level fallback that needs an `AbortController`, a `response.ok` check, and careful state handling to avoid race conditions and stale updates.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fhow-do-you-handle-asynchronous-data-loading-in-react-applications\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fhow-do-you-handle-asynchronous-data-loading-in-react-applications?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n37. ### Explain server-side rendering of React applications and its benefits\n\n    \u003C!-- Update here: \u002Fquestions\u002Fexplain-server-side-rendering-of-react-applications-and-its-benefits\u002Fen-US.mdx -->\n\n    Server-side rendering (SSR) in React involves rendering React components on the server and sending the resulting HTML to the client. The browser displays that HTML immediately, then `hydrateRoot` attaches event handlers so the page becomes interactive. Modern React supports streaming SSR via `renderToPipeableStream` (Node) and `renderToReadableStream` (Web), and React Server Components let parts of the tree render only on the server. Benefits include faster perceived loads and better SEO; tradeoffs include a slower TTFB, the cost of hydration, and the risk of hydration mismatches.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fexplain-server-side-rendering-of-react-applications-and-its-benefits\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fexplain-server-side-rendering-of-react-applications-and-its-benefits?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n38. ### Explain static generation of React applications and its benefits\n\n    \u003C!-- Update here: \u002Fquestions\u002Fexplain-static-generation-of-react-applications-and-its-benefits\u002Fen-US.mdx -->\n\n    Static generation (SSG) pre-renders pages to HTML at build time, instead of rendering them per request. The output is plain files that can be served from a CDN, which makes loads fast and SEO straightforward. Frameworks like Next.js, Remix, Astro, and Gatsby support it; in Next.js's App Router, fetches are statically generated by default and `generateStaticParams` enumerates dynamic routes at build. Incremental Static Regeneration (ISR) lets you re-build individual pages in the background after a TTL, so static does not have to mean stale. SSG is best for content that does not vary per user and does not need to be perfectly fresh.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fexplain-static-generation-of-react-applications-and-its-benefits\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fexplain-static-generation-of-react-applications-and-its-benefits?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n39. ### Explain the presentational vs container component pattern in React\n\n    \u003C!-- Update here: \u002Fquestions\u002Fexplain-the-presentational-vs-container-component-pattern-in-react\u002Fen-US.mdx -->\n\n    The presentational vs container component pattern (also known as \"dumb vs smart components\") splits components into two roles: presentational components decide how things look and receive everything via props, while container components decide how things work — they fetch data, hold state, and pass props down. Dan Abramov, who popularized the pattern in 2015, [updated his original article in 2019](https:\u002F\u002Fmedium.com\u002F@dan_abramov\u002Fsmart-and-dumb-components-7ca2f9a7c7d0) to say he no longer recommends splitting components this way: hooks (especially custom hooks) cover the same separation of concerns without forcing you to introduce a wrapper component. The vocabulary is still useful for talking about responsibilities, but in modern React the \"container\" layer is usually a custom hook.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fexplain-the-presentational-vs-container-component-pattern-in-react\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fexplain-the-presentational-vs-container-component-pattern-in-react?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n40. ### What are some common pitfalls when doing data fetching in React?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-some-common-pitfalls-when-doing-data-fetching-in-react\u002Fen-US.mdx -->\n\n    Common pitfalls when doing data fetching in React include not handling loading and error states, leaking requests by not aborting them on unmount, ignoring race conditions when props or query params change, fetching during render (which loops), and triggering request waterfalls. In modern React (18+), use `AbortController` for cleanup, account for StrictMode's intentional double-invoke in development, and prefer purpose-built libraries like TanStack Query, SWR, or RTK Query for caching and deduplication. React 19's `use()` hook plus Suspense, and Server Components, are now the recommended way to read promises in components.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-some-common-pitfalls-when-doing-data-fetching-in-react\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-are-some-common-pitfalls-when-doing-data-fetching-in-react?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n41. ### What are render props in React and what are they for?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-render-props-in-react-and-what-are-they-for\u002Fen-US.mdx -->\n\n    Render props in React are a technique for sharing code between components using a prop whose value is a function. The component calls that function with some internal state or data, and the function returns the React element to render. The prop does not have to be named `render` — passing a function as `children` is the more common modern form.\n    \n    ```jsx\n    import { useEffect, useState } from 'react';\n    \n    function DataFetcher({ url, children }) {\n      const [data, setData] = useState(null);\n    \n      useEffect(() => {\n        fetch(url)\n          .then((response) => response.json())\n          .then(setData);\n      }, [url]);\n    \n      return children(data);\n    }\n    \n    \u002F\u002F Usage\n    \u003CDataFetcher url=\"\u002Fapi\u002Fdata\">\n      {(data) => \u003Cdiv>{data ? data.name : 'Loading...'}\u003C\u002Fdiv>}\n    \u003C\u002FDataFetcher>;\n    ```\n    \n    Render props were popular before hooks. As of modern React, custom hooks have largely replaced them for sharing stateful logic, though render props are still useful for components that own a piece of UI structure (e.g. virtualized lists, headless component libraries).\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-render-props-in-react-and-what-are-they-for\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-are-render-props-in-react-and-what-are-they-for?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n42. ### What are some React anti-patterns?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-some-react-anti-patterns\u002Fen-US.mdx -->\n\n    React anti-patterns are practices that lead to inefficient, buggy, or hard-to-maintain code. Common ones in modern (hooks-era) React include:\n    \n    - Mutating state directly instead of producing a new value\n    - Using `useState` to mirror props or other state instead of computing the value during render\n    - Using `useEffect` to derive data that could just be computed\n    - Using array index as `key` for dynamic lists\n    - Stale closures inside effects (missing or wrong dependencies)\n    - Forgetting to clean up effects (subscriptions, timers, listeners)\n    - Mutating refs during render\n    - Not using keys in lists at all\n    - Reaching for `useMemo`\u002F`useCallback` everywhere instead of where they actually help\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-are-some-react-anti-patterns\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-are-some-react-anti-patterns?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n43. ### How do you decide between using React state, context, and external state managers?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fhow-do-you-decide-between-using-react-state-context-and-external-state-managers\u002Fen-US.mdx -->\n\n    Match the tool to the kind of state. Use `useState`\u002F`useReducer` for local component state, and lift state up before reaching for anything heavier. Use React Context to pass values that change rarely (theme, locale, current user) — Context is **not** a state manager and re-renders all consumers on every change. Reach for a client-state library like Zustand, Jotai, or Redux Toolkit when many unrelated components need to share frequently-changing state. Critically, treat **server state separately**: TanStack Query, SWR, or RTK Query handle caching, refetching, and invalidation far better than any general-purpose store.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fhow-do-you-decide-between-using-react-state-context-and-external-state-managers\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fhow-do-you-decide-between-using-react-state-context-and-external-state-managers?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n44. ### Explain the composition pattern in React\n\n    \u003C!-- Update here: \u002Fquestions\u002Fexplain-the-composition-pattern-in-react\u002Fen-US.mdx -->\n\n    The composition pattern in React is the practice of building UIs by combining smaller, reusable components instead of extending them through inheritance. The most common forms are: passing children (`props.children`), passing components as named props (slots), specialization (a more specific component that wraps a generic one and fixes some props), render props \u002F \"children as a function\", and compound components (a parent component that exposes a set of related sub-components, e.g. `\u003CTabs>` with `\u003CTabs.List>` and `\u003CTabs.Panel>`). Composition is React's main reuse mechanism, alongside custom hooks for behavior.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fexplain-the-composition-pattern-in-react\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fexplain-the-composition-pattern-in-react?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n45. ### What is virtual DOM in React?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-virtual-dom-in-react\u002Fen-US.mdx -->\n\n    The \"virtual DOM\" in React is a tree of plain JavaScript objects (React elements) that describes what the UI should look like — it is not a copy of the actual DOM. When state or props change, React builds a new tree, compares it with the previous one (a process called reconciliation, performed by the Fiber reconciler since React 16), and applies only the necessary changes to the real DOM. The React team now prefers the terms \"React elements\" and \"Fiber tree.\" The main benefit is the declarative programming model, not raw speed over hand-written DOM updates.\n\n    \u003C!-- Update here: \u002Fquestions\u002Fwhat-is-virtual-dom-in-react\u002Fen-US.mdx -->\n\n    \u003Cbr>\n\n    > Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-virtual-dom-in-react?framework=react&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n    [Back to top ↑](#table-of-contents)\n    \u003Cbr>\n    \u003Cbr>\n\n46. ### How does virtual DOM in React work? What are its benefits and downsides?\n\n    \u003C!-- Update here: \u002Fquestions\u002Fhow-does-virtual-dom-in-react-work-what-are-its-benefits","该项目是一个面向前端工程师的React.js面试题集合，旨在帮助忙碌的开发者准备技术面试（更新至2026年）。它包含了精心挑选的React.js面试题目及高质量答案，覆盖了从React基础概念到高级特性的广泛内容，如JSX、状态与属性的区别、Hooks的使用规则等。采用MDX格式编写，确保内容清晰易读。适合正在准备React相关职位面试的前端开发者使用，也适用于希望加深对React框架理解的技术人员。","2026-06-11 03:49:27","high_star"]