React Blind 75<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/stackedit.io\/style.css\" \/>\n<\/head>\n\n<body class=\"stackedit\">\nThis guide is a carefully curated collection of 75 React interview questions<\/strong> designed to help learners build a deep understanding of React and confidently crack technical interviews at product-based companies, startups, and top-tier organizations.<\/p>\nThe questions are structured progressively, starting from the fundamentals and moving toward advanced concepts, including state management, hooks, performance optimization, server-side rendering, error handling, and more. Each question is accompanied by:<\/p>\n<ol>\n<li>The full question text.<\/li>\n<li>The topic it belongs to.<\/li>\n<li>Difficulty level (Easy \/ Intermediate \/ Advanced).<\/li>\n<li>A detailed explanation with code examples where applicable.<\/li>\n<li>Common interview scenarios where the question might arise.<\/li>\n<li>Additional best practices, pitfalls, and optimization tips where relevant.<\/li>\n<\/ol>\nWhether you\u2019re preparing for your first React interview or aiming for a senior frontend role, this guide covers everything you need to confidently discuss React concepts, debug problems, and architect scalable solutions.<\/p>\nHow to use this guide:<\/strong><\/p>\n<ul>\n<li>Study each question thoroughly.<\/li>\n<li>Write and practice coding examples yourself.<\/li>\n<li>Revise the best practices and pitfalls.<\/li>\n<li>Mock interviews using the sample scenarios provided.<\/li>\n<li>Reinforce learning by building small projects using the concepts covered.<\/li>\n<\/ul>\nWith consistent practice and understanding, you\u2019ll be well-equipped to answer React-related interview questions with clarity, confidence, and depth.<\/p>\nLet\u2019s begin this journey toward mastering React!<\/p>\n<hr>\n<h3 id=\"what-is-react-describe-the-benefits-of-react--react-basics--easy\">1. What is React? Describe the benefits of React<\/strong> | React Basics | Easy<\/h3>\nReact is a JavaScript library created by Facebook for building user interfaces, especially single-page applications (SPAs).<\/p>\nIt helps developers build reusable UI components that can manage their own state, which makes it easier to build complex applications.<\/p>\nKey features include:<\/p>\n<ul>\n<li>\nComponent-based architecture:<\/strong> Developers can break the UI into small, reusable components.<\/p>\n<\/li>\n<li>\nVirtual DOM:<\/strong> React updates the UI efficiently by calculating differences between the new and old DOM trees.<\/p>\n<\/li>\n<li>\nDeclarative UI:<\/strong> You describe how the UI should look for any given state, and React manages the rendering.<\/p>\n<\/li>\n<li>\nOne-way data binding:<\/strong> Data flows from parent to child components, making state management predictable.<\/p>\n<\/li>\n<li>\nJSX syntax:<\/strong> Allows mixing HTML and JavaScript, making component structure more readable.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Welcome<\/span>(<\/span>props)<\/span> {<\/span>\n return<\/span> <<\/span>h1<\/span>><\/span><\/span>Hello,<\/span> {<\/span>props.<\/span>name}<\/span>!<\/span><\/<\/span>h1<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>Welcome<\/span> name<\/span>=<\/span>\"<\/span>Alice\"<\/span><\/span> \/><\/span><\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span>\n\n<\/code><\/pre>\nIn this example, the <code>Welcome<\/code> component takes a <code>name<\/code> prop and renders it dynamically.<\/p>\nInterview Scenarios:<\/strong><\/p>\n<ul>\n<li>\nExplaining React\u2019s role in a web application during a technical round.<\/p>\n<\/li>\n<li>\nAnswering why React is preferred over other libraries\/frameworks for SPA development.<\/p>\n<\/li>\n<li>\nDiscussing how reusable components can help scale applications.<\/p>\n<\/li>\n<li>\nTalking about performance optimizations using Virtual DOM in a system design interview.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-react-node-react-element-and-a-react-component--react-core-concepts--easy\">2. What is the difference between React Node, React Element, and a React Component?<\/strong> | React Core Concepts | Easy<\/h3>\nIn React:<\/p>\n<ul>\n<li>\nA React Node<\/strong> is anything that can be rendered, such as a React element, string, number, array, or <code>null<\/code>.<\/p>\n<\/li>\n<li>\nA React Element<\/strong> is an immutable object that describes what should appear in the UI. It\u2019s created using JSX or <code>React.createElement()<\/code>.<\/p>\n<\/li>\n<li>\nA React Component<\/strong> is a function or class that returns a React element and encapsulates logic and UI behavior.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">\/\/ React Element<\/span>\nconst<\/span> element =<\/span> <<\/span>h1<\/span>><\/span><\/span>Hello,<\/span> world!<\/span><\/<\/span>h1<\/span>><\/span><\/span>;<\/span>\n\n\/\/ React Component<\/span>\nfunction<\/span> Greeting<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>h1<\/span>><\/span><\/span>Hello!<\/span><\/<\/span>h1<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n\n\/\/ Using the component<\/span>\nconst<\/span> node =<\/span> <<\/span>Greeting<\/span> \/><\/span><\/span>;<\/span>\n\n<\/code><\/pre>\nInterview Scenarios:<\/strong><\/p>\n<ul>\n<li>\nClarifying the difference between various React constructs during an entry-level interview.<\/p>\n<\/li>\n<li>\nAsking how React builds and renders components efficiently.<\/p>\n<\/li>\n<li>\nDiscussing the importance of immutability and declarative rendering.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-jsx-and-how-does-it-work--react-syntax--easy\">3. What is JSX and how does it work?<\/strong> | React Syntax | Easy<\/h3>\nJSX (JavaScript XML) is a syntax extension that allows writing HTML-like code inside JavaScript. It makes defining UI structures more intuitive.<\/p>\nJSX is not understood by browsers directly, so tools like Babel transpile it into <code>React.createElement()<\/code> calls.<\/p>\nExample:<\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> element =<\/span> <<\/span>div<\/span>><\/span><\/span>Hello,<\/span> world!<\/span><\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n<\/code><\/pre>\nIs transpiled to:<\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">const<\/span> element =<\/span> React.<\/span>createElement<\/span>(<\/span>'div'<\/span>,<\/span> null<\/span>,<\/span> 'Hello, world!'<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nInterview Scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsking how JSX simplifies component development.<\/p>\n<\/li>\n<li>\nExploring how transpilers work with React code.<\/p>\n<\/li>\n<li>\nUnderstanding how React internally manages element creation.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-state-and-props-in-react--state-management--easy\">4. What is the difference between state and props in React?<\/strong> | State Management | Easy<\/h3>\n<ul>\n<li>\nState:<\/strong> Internal data managed by the component, can change over time.<\/p>\n<\/li>\n<li>\nProps:<\/strong> External data passed from parent components, read-only within the component.<\/p>\n<\/li>\n<\/ul>\nExample:<\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> Counter<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> React.<\/span>useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span> \/\/ state<\/span>\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>p<\/span>><\/span><\/span>Count:<\/span> {<\/span>count}<\/span><\/<\/span>p<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>Counter<\/span> initialCount<\/span>=<\/span>{<\/span>0<\/span>}<\/span><\/span> \/><\/span><\/span>;<\/span> \/\/ props can be passed here if needed<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview Scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsking how data flows in a React component hierarchy.<\/p>\n<\/li>\n<li>\nExplaining why state and props serve different roles.<\/p>\n<\/li>\n<li>\nUnderstanding how changes in state affect rendering.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-purpose-of-the-key-prop-in-react--lists--rendering--easy\">5. What is the purpose of the <code>key<\/code> prop in React?<\/strong> | Lists & Rendering | Easy<\/h3>\nThe <code>key<\/code> prop helps React uniquely identify elements in a list. It optimizes rendering by tracking which items changed, were added, or removed.<\/p>\nExample:<\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> items =<\/span> [<\/span>\n {<\/span> id:<\/span> 1<\/span>,<\/span> value:<\/span> 'Apple'<\/span> }<\/span>,<\/span>\n {<\/span> id:<\/span> 2<\/span>,<\/span> value:<\/span> 'Banana'<\/span> }<\/span>\n]<\/span>;<\/span>\n\nfunction<\/span> ItemList<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>ul<\/span>><\/span><\/span>\n {<\/span>items.<\/span>map<\/span>(<\/span>item =><\/span> (<\/span>\n <<\/span>li<\/span> key<\/span>=<\/span>{<\/span>item.<\/span>id}<\/span><\/span>><\/span><\/span>{<\/span>item.<\/span>value}<\/span><\/<\/span>li<\/span>><\/span><\/span>\n )<\/span>)<\/span>}<\/span>\n <\/<\/span>ul<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview Scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsking how React improves performance when rendering lists.<\/p>\n<\/li>\n<li>\nDiscussing how improper key usage can cause bugs.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-consequence-of-using-array-indices-as-the-value-for-key-in-react--rendering--lists--intermediate\">6. What is the consequence of using array indices as the value for <code>key<\/code> in React?<\/strong> | Rendering \/ Lists | Intermediate<\/h3>\nUsing array indices as keys in React lists can lead to bugs and performance issues because React uses keys to identify which items have changed, been added, or removed.<\/p>\n<ul>\n<li>Keys should be stable, predictable, and unique.<\/li>\n<li>If array indices are used as keys, reordering, adding, or removing items can confuse React during reconciliation.<\/li>\n<li>This can cause components to unnecessarily re-render or preserve incorrect state.<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> items =<\/span> [<\/span>'Apple'<\/span>,<\/span> 'Banana'<\/span>,<\/span> 'Cherry'<\/span>]<\/span>;<\/span>\n\nitems.<\/span>map<\/span>(<\/span>(<\/span>item,<\/span> index)<\/span> =><\/span> <<\/span>div<\/span> key<\/span>=<\/span>{<\/span>index}<\/span><\/span>><\/span><\/span>{<\/span>item}<\/span><\/<\/span>div<\/span>><\/span><\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nIf items are reordered, React may reuse DOM nodes incorrectly, leading to UI inconsistencies.<\/p>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Use unique identifiers (like IDs) for keys.<\/li>\n<li>Avoid using indices unless the list is static and won\u2019t change order.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked to explain list rendering and key importance.<\/li>\n<li>Debugging a component that behaves incorrectly after array reordering.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-controlled-and-uncontrolled-react-components--forms--state--intermediate\">7. What is the difference between controlled and uncontrolled React Components?<\/strong> | Forms \/ State | Intermediate<\/h3>\nControlled components are form inputs whose values are managed by React state. Uncontrolled components maintain their own internal state and are accessed via refs.<\/p>\nExplanation:<\/strong><\/p>\n<ul>\n<li>\nControlled:<\/strong> The state is the single source of truth. Input value is tied to <code>state<\/code> and updated via <code>onChange<\/code>.<\/p>\n<\/li>\n<li>\nUncontrolled:<\/strong> Input value is stored in the DOM. Accessed using <code>ref<\/code> when needed.<\/p>\n<\/li>\n<\/ul>\nExample (Controlled):<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> ControlledInput<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>value,<\/span> setValue]<\/span> =<\/span> React.<\/span>useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>input<\/span> value<\/span>=<\/span>{<\/span>value}<\/span><\/span> onChange<\/span>=<\/span>{<\/span>(<\/span>e)<\/span> =><\/span> setValue<\/span>(<\/span>e.<\/span>target.<\/span>value)<\/span>}<\/span><\/span> \/><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nExample (Uncontrolled):<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> UncontrolledInput<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> inputRef =<\/span> React.<\/span>useRef<\/span>(<\/span>)<\/span>;<\/span>\n\n const<\/span> handleClick<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n alert<\/span>(<\/span>inputRef.<\/span>current.<\/span>value)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>><\/span>\n <<\/span>input<\/span> ref<\/span>=<\/span>{<\/span>inputRef}<\/span><\/span> \/><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>handleClick}<\/span><\/span>><\/span><\/span>Show Value<\/<\/span>button<\/span>><\/span><\/span>\n <<\/span>\/<\/span>><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Use controlled components for form validation, complex forms, or dynamic updates.<\/li>\n<li>Use uncontrolled components for simple forms or when integrating with third-party libraries.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked to explain differences between controlled vs uncontrolled components.<\/li>\n<li>Asked when to use <code>ref<\/code> for form inputs.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-some-pitfalls-about-using-context-in-react--state-management--context--intermediate\">8. What are some pitfalls about using context in React?<\/strong> | State Management \/ Context | Intermediate<\/h3>\nReact Context provides a way to share global state, but improper usage can lead to performance and maintainability issues.<\/p>\nExplanation:<\/strong><\/p>\n<ul>\n<li>Context updates propagate to all consuming components.<\/li>\n<li>Overuse can lead to unnecessary re-renders.<\/li>\n<li>Using large or frequently changing data in context may degrade performance.<\/li>\n<\/ul>\nCommon pitfalls:<\/strong><\/p>\n<ul>\n<li>Putting too much state in a single context.<\/li>\n<li>Passing non-memoized objects as context values.<\/li>\n<li>Relying solely on context instead of external state management for complex apps.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Memoize context values using <code>useMemo<\/code>.<\/li>\n<li>Split contexts to isolate frequently changing state.<\/li>\n<li>Use libraries like Redux or Zustand for complex scenarios.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked about performance issues with context.<\/li>\n<li>Asked to optimize a component consuming context for frequently updating data.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-the-benefits-of-using-hooks-in-react--hooks--functional-components--beginner\">9. What are the benefits of using hooks in React?<\/strong> | Hooks \/ Functional Components | Beginner<\/h3>\nHooks allow functional components to use state and other React features without writing classes.<\/p>\nExplanation:<\/strong><\/p>\n<ul>\n<li>\nSimpler code:<\/strong> Eliminates the need for class components and lifecycle methods.<\/p>\n<\/li>\n<li>\nReusable logic:<\/strong> Custom hooks allow encapsulating stateful logic.<\/p>\n<\/li>\n<li>\nBetter readability:<\/strong> Clear separation of state and effects.<\/p>\n<\/li>\n<li>\nFunctional approach:<\/strong> Encourages a functional programming style, making code easier to test and maintain.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> useState,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Counter<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>`Count is: <\/span>${<\/span>count}<\/span><\/span>`<\/span><\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>count]<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n\n<\/code><\/pre>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Use hooks only in functional components.<\/li>\n<li>Follow rules of hooks (top-level calls, no conditional calls).<\/li>\n<li>Extract reusable logic into custom hooks.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked why hooks replaced class components.<\/li>\n<li>Asked to refactor class component into functional component using hooks.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-the-rules-of-react-hooks--hooks--functional-components--intermediate\">10. What are the rules of React hooks?<\/strong> | Hooks \/ Functional Components | Intermediate<\/h3>\nHooks have rules to ensure predictable behavior and maintain component integrity.<\/p>\nExplanation:<\/strong><\/p>\n<ol>\n<li>\nCall hooks at the top level:<\/strong> Don\u2019t call inside loops, conditions, or nested functions.<\/p>\n<\/li>\n<li>\nCall hooks only in React functions:<\/strong> Functional components or custom hooks.<\/p>\n<\/li>\n<li>\nCustom hooks must start with \u201cuse\u201d:<\/strong> Helps React identify hook calls.<\/p>\n<\/li>\n<\/ol>\nWhy rules matter:<\/strong><\/p>\n<ul>\n<li>Maintaining the order of hook calls ensures React can correctly preserve state across renders.<\/li>\n<li>Violating rules can lead to unpredictable behavior or errors.<\/li>\n<\/ul>\nExample (Incorrect use):<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> MyComponent<\/span>(<\/span>)<\/span> {<\/span>\n if<\/span> (<\/span>someCondition)<\/span> {<\/span>\n const<\/span> [<\/span>value,<\/span> setValue]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span> \/\/ \u274c called conditionally<\/span>\n }<\/span>\n}<\/span>\n<\/code><\/pre>\nCorrect use:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> MyComponent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>value,<\/span> setValue]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span> \/\/always called<\/span>\n if<\/span> (<\/span>someCondition)<\/span> {<\/span>\n \/\/ logic<\/span>\n }<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked to explain why hooks must be top-level.<\/li>\n<li>Asked to identify why a component using hooks fails unexpectedly.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-useeffect-and-uselayouteffect-in-react--hooks---side-effects--intermediate\">11. What is the difference between <code>useEffect<\/code> and <code>useLayoutEffect<\/code> in React?<\/strong> | Hooks – Side Effects | Intermediate<\/h3>\n<code>useEffect<\/code> and <code>useLayoutEffect<\/code> are two hooks in React used to perform side effects, such as data fetching, subscriptions, or DOM manipulations. Although they are similar in API, they differ in when they execute during the component lifecycle.<\/p>\n<h4 id=\"key-differences\">Key Differences:<\/strong><\/h4>\n\n<table>\n<thead>\n<tr>\n<th align=\"left\">Aspect<\/th>\n<th align=\"right\"><code>useEffect<\/code><\/th>\n<th align=\"right\"><code>useLayoutEffect<\/code><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\">Execution timing<\/td>\n<td align=\"right\">Runs after the browser has painted the UI<\/td>\n<td align=\"right\">Runs after DOM updates but before paint<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">Suitable for<\/td>\n<td align=\"right\">Data fetching, subscriptions, event listeners<\/td>\n<td align=\"right\">Measuring or synchronizing DOM elements before user sees it<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">Blocking behavior<\/td>\n<td align=\"right\">Doesn\u2019t block rendering<\/td>\n<td align=\"right\">Blocks rendering until executed<\/td>\n<\/tr>\n<\/tbody>\n<\/table><h4 id=\"example\">Example:<\/h4>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useState,<\/span> useEffect,<\/span> useLayoutEffect,<\/span> useRef }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Example<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>width,<\/span> setWidth]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n const<\/span> divRef =<\/span> useRef<\/span>(<\/span>)<\/span>;<\/span>\n\n useLayoutEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n \/\/ Runs before paint, ideal for measuring layout<\/span>\n setWidth<\/span>(<\/span>divRef.<\/span>current.<\/span>offsetWidth)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>\"Rendered with width:\"<\/span>,<\/span> width)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>width]<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>div<\/span> ref<\/span>=<\/span>{<\/span>divRef}<\/span><\/span> style<\/span>=<\/span>{<\/span>{<\/span> width:<\/span> '50%'<\/span> }<\/span>}<\/span><\/span>><\/span><\/span>Resize me!<\/span><\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\n<h4 id=\"when-to-use-each\">When to use each:<\/strong><\/h4>\n<ul>\n<li>\n<code>useEffect<\/code>:<\/strong><\/p>\n<ul>\n<li>Fetching data after initial render<\/li>\n<li>Adding event listeners or subscriptions<\/li>\n<li>Performing actions that don\u2019t affect layout calculations<\/li>\n<\/ul>\n<\/li>\n<li>\n<code>useLayoutEffect<\/code>:<\/strong><\/p>\n<ul>\n<li>Measuring DOM elements before paint<\/li>\n<li>Synchronously updating DOM styles<\/li>\n<li>Adjusting scroll position or animations before user interaction<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4 id=\"mistakes-to-avoid\">Mistakes to avoid:<\/strong><\/h4>\n<ul>\n<li>\nUsing <code>useLayoutEffect<\/code> for data fetching unnecessarily blocks rendering, causing a poor user experience.<\/p>\n<\/li>\n<li>\nForgetting to clean up effects like event listeners, which can cause memory leaks.<\/p>\n<\/li>\n<li>\nAssuming both hooks behave the same – <code>useLayoutEffect<\/code> blocks paint, so it should be used carefully.<\/p>\n<\/li>\n<\/ul>\n<h4 id=\"best-practices\">Best practices:<\/strong><\/h4>\n<ul>\n<li>\nDefault to using <code>useEffect<\/code> unless layout measurements or synchronous DOM updates are required.<\/p>\n<\/li>\n<li>\nAlways clean up side effects in the return function to avoid resource leaks.<\/p>\n<\/li>\n<\/ul>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n const<\/span> handleResize<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span> \/* logic *\/<\/span> }<\/span>;<\/span>\n window.<\/span>addEventListener<\/span>(<\/span>'resize'<\/span>,<\/span> handleResize)<\/span>;<\/span>\n return<\/span> (<\/span>)<\/span> =><\/span> window.<\/span>removeEventListener<\/span>(<\/span>'resize'<\/span>,<\/span> handleResize)<\/span>;<\/span>\n}<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\n<h4 id=\"interview-scenarios\">Interview scenarios:<\/strong><\/h4>\n<ul>\n<li>\nYou are asked to explain how React manages updates and why <code>useLayoutEffect<\/code> might be necessary in animation-heavy applications.<\/p>\n<\/li>\n<li>\nYou are given a component that flickers when updated and asked to debug why the layout measurement might be happening too late.<\/p>\n<\/li>\n<li>\nYou are asked how to manage side effects in components and what the difference between synchronous and asynchronous updates is.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used--state-management--intermediate\">12. What is the purpose of callback function argument format of <code>setState()<\/code> in React and when should it be used?<\/strong> | State Management | Intermediate<\/h3>\nThe callback function format of <code>setState()<\/code> ensures that state updates are calculated based on the most recent state and props. It\u2019s important when the new state depends on the current state because React batches updates asynchronously.<\/p>\n<h4 id=\"explanation\">Explanation:<\/strong><\/h4>\nReact\u2019s <code>setState()<\/code> doesn\u2019t immediately update the state instead, it schedules an update. If you calculate the next state based on the current state directly, you may end up using a stale value.<\/p>\nThe callback format takes two arguments:<\/p>\n<ul>\n<li><code>prevState<\/code>: The state before the update<\/li>\n<li><code>props<\/code>: The latest props passed to the component<\/li>\n<\/ul>\nThis ensures your update logic always references the correct state.<\/p>\n<h4 id=\"example-1\">Example:<\/h4>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">class<\/span> Counter<\/span> extends<\/span> React.<\/span>Component<\/span> {<\/span>\n state =<\/span> {<\/span> count:<\/span> 0<\/span> }<\/span>;<\/span>\n\n increment<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n this<\/span>.<\/span>setState<\/span>(<\/span>(<\/span>prevState,<\/span> props)<\/span> =><\/span> (<\/span>{<\/span>\n count:<\/span> prevState.<\/span>count +<\/span> 1<\/span>\n }<\/span>)<\/span>)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n render<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>p<\/span>><\/span><\/span>Count:<\/span> {<\/span>this<\/span>.<\/span>state.<\/span>count}<\/span><\/<\/span>p<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>this<\/span>.<\/span>increment}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n }<\/span>\n}<\/span>\n<\/code><\/pre>\nIf you used this instead, it could cause bugs:<\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">this<\/span>.<\/span>setState<\/span>(<\/span>{<\/span>\n count:<\/span> this<\/span>.<\/span>state.<\/span>count +<\/span> 1<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nBecause multiple calls to <code>increment<\/code> might not correctly use the updated value of <code>count<\/code>.<\/p>\n<h4 id=\"when-should-it-be-used\">When should it be used:<\/strong><\/h4>\n<ul>\n<li>\nWhen updating state based on previous state, such as toggling values, counters, or accumulative calculations.<\/p>\n<\/li>\n<li>\nWhen updates need to ensure they are using the latest state, especially in event handlers or asynchronous operations.<\/p>\n<\/li>\n<\/ul>\n<h4 id=\"mistakes-to-avoid-1\">Mistakes to avoid:<\/strong><\/h4>\n<ul>\n<li>\nUpdating state directly using <code>this.state<\/code> instead of <code>prevState<\/code> may lead to inconsistent updates.<\/p>\n<\/li>\n<li>\nNot recognizing that state updates are batched and asynchronous, especially in concurrent rendering.<\/p>\n<\/li>\n<\/ul>\n<h4 id=\"best-practices-1\">Best practices:<\/strong><\/h4>\n<ul>\n<li>Always use the callback format when the new state depends on previous values.<\/li>\n<li>Avoid side effects within <code>setState()<\/code> callbacks keep logic pure and predictable.<\/li>\n<\/ul>\n<h4 id=\"interview-scenarios-1\">Interview scenarios:<\/strong><\/h4>\n<ul>\n<li>Asked to implement a counter where multiple increments happen quickly.<\/li>\n<li>Asked to explain how React manages asynchronous state updates.<\/li>\n<li>Asked why certain bugs happen when state is updated based on stale values.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-does-the-dependency-array-of-useeffect-affect--hooks-side-effects--intermediate\">13. What does the dependency array of <code>useEffect<\/code> affect?<\/strong> | Hooks Side Effects | Intermediate<\/h3>\nThe dependency array determines when the effect should be re-executed after renders. It\u2019s crucial to manage this correctly to avoid unnecessary reruns or stale data.<\/p>\nExplanation:<\/strong><\/p>\n<ul>\n<li>If the dependency array is empty (<code>[]<\/code>), the effect runs once after the initial render.<\/li>\n<li>If the array includes variables, the effect runs whenever one of them changes.<\/li>\n<li>If omitted, the effect runs after every render, which can lead to performance issues.<\/li>\n<\/ul>\n<h4 id=\"example-2\">Example:<\/h4>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useState,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Timer<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Effect runs'<\/span>)<\/span>;<\/span>\n const<\/span> interval =<\/span> setInterval<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n setCount<\/span>(<\/span>c =><\/span> c +<\/span> 1<\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> 1000<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>)<\/span> =><\/span> clearInterval<\/span>(<\/span>interval)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span> \/\/ Empty array: effect runs once on mount<\/span>\n\n return<\/span> <<\/span>div<\/span>><\/span><\/span>Count:<\/span> {<\/span>count}<\/span><\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nIf we used <code>[count]<\/code>, it would re-run the effect on every count update, unnecessarily creating new intervals.<\/p>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Forgetting to include all relevant dependencies, which can cause bugs due to stale closures.<\/li>\n<li>Adding too many dependencies, causing unnecessary rerenders.<\/li>\n<li>Omitting the array entirely, which makes effects run on every render.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Include all dependencies that are referenced inside the effect to avoid stale data.<\/li>\n<li>Use <code>useCallback<\/code> or <code>useMemo<\/code> to stabilize functions or values used as dependencies.<\/li>\n<li>Use ESLint\u2019s <code>react-hooks\/exhaustive-deps<\/code> rule to catch missing dependencies.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked how effects can cause bugs due to stale closures.<\/li>\n<li>Asked how to handle API calls inside <code>useEffect<\/code>.<\/li>\n<li>Asked why developers should not omit the dependency array.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-useref-hook-in-react-and-when-should-it-be-used--hooks-refs--intermediate\">14. What is the <code>useRef<\/code> hook in React and when should it be used?<\/strong> | Hooks Refs | Intermediate<\/h3>\n<code>useRef<\/code> creates a persistent reference that doesn\u2019t cause rerenders when updated. It\u2019s commonly used to access DOM elements or keep mutable state across renders.<\/p>\nExplanation:<\/strong><\/p>\n<ul>\n<li>Returns a mutable object <code>{ current: ... }<\/code>.<\/li>\n<li>Persists across renders, making it suitable for storing values without triggering updates.<\/li>\n<li>Useful for:\n<ul>\n<li>Accessing DOM nodes<\/li>\n<li>Storing previous state<\/li>\n<li>Holding intervals or timers<\/li>\n<li>Managing focus<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4 id=\"example-focus-input\">Example (Focus input):<\/h4>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useRef,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> FocusInput<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> inputRef =<\/span> useRef<\/span>(<\/span>null<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n inputRef.<\/span>current.<\/span>focus<\/span>(<\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>input<\/span> ref<\/span>=<\/span>{<\/span>inputRef}<\/span><\/span> type<\/span>=<\/span>\"<\/span>text\"<\/span><\/span> \/><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>Manipulating DOM directly (focus, scroll, measurements).<\/li>\n<li>Storing mutable values that should not cause rerenders.<\/li>\n<li>Keeping references to timers, WebSocket connections, or subscriptions.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Using <code>useRef<\/code> for state that should trigger UI updates use <code>useState<\/code> instead.<\/li>\n<li>Forgetting that <code>useRef<\/code> does not cause rerenders when its value changes.<\/li>\n<li>Overusing refs instead of proper state management.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Use <code>useRef<\/code> for non-render affecting data.<\/li>\n<li>Keep ref logic outside of component state to avoid unnecessary complexity.<\/li>\n<li>Avoid using it as a substitute for state management when state-driven UI changes are required.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked to manage form input focus.<\/li>\n<li>Asked how to store previous render values without triggering rerenders.<\/li>\n<li>Asked how to manipulate DOM directly within functional components.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-usecallback-hook-in-react-and-when-should-it-be-used--hooks-performance-optimization--intermediate\">15. What is the <code>useCallback<\/code> hook in React and when should it be used?<\/strong> | Hooks Performance Optimization | Intermediate<\/h3>\n<code>useCallback<\/code> memoizes functions so that they are only recreated when dependencies change. It\u2019s a performance optimization that prevents unnecessary rerenders, especially in child components.<\/p>\nExplanation:<\/strong><\/p>\nFunctions in JavaScript are recreated every time a component rerenders. If a function is passed as a prop to a child, the child may rerender unnecessarily. <code>useCallback<\/code> ensures that the function reference stays stable unless its dependencies change.<\/p>\n<h4 id=\"example-3\">Example:<\/h4>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useState,<\/span> useCallback }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Parent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n const<\/span> increment =<\/span> useCallback<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n setCount<\/span>(<\/span>c =><\/span> c +<\/span> 1<\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>Child<\/span> onIncrement<\/span>=<\/span>{<\/span>increment}<\/span><\/span> \/><\/span><\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> Child<\/span>(<\/span>{<\/span> onIncrement }<\/span>)<\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>\"Child rendered\"<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>onIncrement}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nIn this example, <code>Child<\/code> will not rerender unnecessarily because the <code>increment<\/code> function is memoized.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>Passing callbacks to optimized child components.<\/li>\n<li>Avoiding function recreation when dependencies are unchanged.<\/li>\n<li>Managing expensive event handlers.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Using <code>useCallback<\/code> indiscriminately it adds overhead and complexity without real benefits in simpler cases.<\/li>\n<li>Forgetting to include dependencies, leading to stale references.<\/li>\n<li>Overusing memoization without profiling.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Use <code>useCallback<\/code> when functions are passed as props and you want to prevent rerenders.<\/li>\n<li>Include all relevant dependencies in the dependency array.<\/li>\n<li>Profile performance before over-optimizing.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked how to avoid unnecessary renders in performance-critical applications.<\/li>\n<li>Asked to explain how closures and stale references occur in hooks.<\/li>\n<li>Asked why memoization is important in component hierarchies.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-usememo-hook-in-react-and-when-should-it-be-used--performance-optimization--intermediate\">16. What is the <code>useMemo<\/code> hook in React and when should it be used?<\/strong> | Performance Optimization | Intermediate<\/h3>\n<code>useMemo<\/code> is a React hook that memoizes the result of a function so that it is only recalculated when its dependencies change. This helps avoid expensive computations on every render and improves performance.<\/p>\nExplanation:<\/strong><\/p>\nIn React, computations or derived state that rely on props or state might be expensive. Without memoization, these computations would run every time the component rerenders. <code>useMemo<\/code> caches the result and recalculates only when dependencies change.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useState,<\/span> useMemo }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>text,<\/span> setText]<\/span> =<\/span> useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span>\n\n const<\/span> factorial =<\/span> useMemo<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Calculating factorial...'<\/span>)<\/span>;<\/span>\n return<\/span> computeFactorial<\/span>(<\/span>count)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>count]<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>h1<\/span>><\/span><\/span>Factorial of<\/span> {<\/span>count}<\/span> is {<\/span>factorial}<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <<\/span>input<\/span> value<\/span>=<\/span>{<\/span>text}<\/span><\/span> onChange<\/span>=<\/span>{<\/span>e =><\/span> setText<\/span>(<\/span>e.<\/span>target.<\/span>value)<\/span>}<\/span><\/span> placeholder<\/span>=<\/span>\"<\/span>Type here\"<\/span><\/span> \/><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> computeFactorial<\/span>(<\/span>n)<\/span> {<\/span>\n if<\/span> (<\/span>n <=<\/span> 0<\/span>)<\/span> return<\/span> 1<\/span>;<\/span>\n return<\/span> n *<\/span> computeFactorial<\/span>(<\/span>n -<\/span> 1<\/span>)<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nIn this example, changing <code>text<\/code> won\u2019t recalculate the factorial because the dependency array ensures it only recomputes when <code>count<\/code> changes.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>Avoid expensive computations on every render.<\/li>\n<li>Memoize derived data from props or state.<\/li>\n<li>Improve performance in large component trees.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Overusing <code>useMemo<\/code> for trivial computations where caching overhead outweighs the benefits.<\/li>\n<li>Not specifying the correct dependencies, which can lead to stale or incorrect results.<\/li>\n<li>Assuming <code>useMemo<\/code> always improves performance without profiling.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Use it when you have expensive computations.<\/li>\n<li>Always include all dependencies that affect the computation.<\/li>\n<li>Profile performance to justify memoization.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked how to optimize performance when components rerender frequently.<\/li>\n<li>Asked to explain how memoization avoids unnecessary computations.<\/li>\n<li>Asked to contrast <code>useMemo<\/code> and <code>useCallback<\/code>.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-usereducer-hook-in-react-and-when-should-it-be-used--state-management--intermediate\">17. What is the <code>useReducer<\/code> hook in React and when should it be used?<\/strong> | State Management | Intermediate<\/h3>\n<code>useReducer<\/code> is a hook that manages complex state logic by using a reducer function. It\u2019s an alternative to <code>useState<\/code>, suitable when state has multiple sub-values or when the next state depends on the previous state.<\/p>\nExplanation:<\/strong><\/p>\nA reducer is a function that takes the current state and an action, and returns a new state. <code>useReducer<\/code> provides a more structured way of updating state, especially when state transitions are complex or require multiple branches of logic.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useReducer }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> initialState =<\/span> {<\/span> count:<\/span> 0<\/span> }<\/span>;<\/span>\n\nfunction<\/span> reducer<\/span>(<\/span>state,<\/span> action)<\/span> {<\/span>\n switch<\/span>(<\/span>action.<\/span>type)<\/span> {<\/span>\n case<\/span> 'increment'<\/span>:<\/span>\n return<\/span> {<\/span> count:<\/span> state.<\/span>count +<\/span> 1<\/span> }<\/span>;<\/span>\n case<\/span> 'decrement'<\/span>:<\/span>\n return<\/span> {<\/span> count:<\/span> state.<\/span>count -<\/span> 1<\/span> }<\/span>;<\/span>\n default<\/span>:<\/span>\n throw<\/span> new<\/span> Error<\/span>(<\/span>'Unknown action'<\/span>)<\/span>;<\/span>\n }<\/span>\n}<\/span>\n\nfunction<\/span> Counter<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>state,<\/span> dispatch]<\/span> =<\/span> useReducer<\/span>(<\/span>reducer,<\/span> initialState)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>h1<\/span>><\/span><\/span>Count:<\/span> {<\/span>state.<\/span>count}<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n <<\/span>button onClick=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> dispatch<\/span>(<\/span>{<\/span> type:<\/span> 'increment'<\/span> }<\/span>)<\/span>}<\/span>><\/span>+<\/span><\/<\/span>button<\/span>><\/span><\/span>\n <<\/span>button onClick=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> dispatch<\/span>(<\/span>{<\/span> type:<\/span> 'decrement'<\/span> }<\/span>)<\/span>}<\/span>><\/span>-<\/span><\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> Counter;<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>When state is an object with multiple properties.<\/li>\n<li>When state updates depend on the current state.<\/li>\n<li>When managing forms, complex UI interactions, or nested state.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Using it when <code>useState<\/code> is sufficient, adding unnecessary complexity.<\/li>\n<li>Forgetting to handle unknown actions, which may cause errors.<\/li>\n<li>Not memoizing the reducer function when needed.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Define clear action types.<\/li>\n<li>Separate state logic from component logic for readability.<\/li>\n<li>Use context with <code>useReducer<\/code> to share state across components.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked to manage complex form states with multiple inputs.<\/li>\n<li>Asked to implement undo\/redo functionality using state history.<\/li>\n<li>Asked to refactor <code>useState<\/code> logic into <code>useReducer<\/code>.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-useid-hook-in-react-and-when-should-it-be-used--accessibility--forms--intermediate\">18. What is the <code>useId<\/code> hook in React and when should it be used?<\/strong> | Accessibility \/ Forms | Intermediate<\/h3>\n<code>useId<\/code> generates unique IDs that are stable across server and client renders. It is particularly useful for linking form elements, labels, and other accessibility-related attributes.<\/p>\nExplanation:<\/strong><\/p>\nGenerating unique IDs is important to prevent clashes when rendering forms or components multiple times. <code>useId<\/code> ensures IDs are unique even when server-side rendering (SSR) is used, which helps with hydration and accessibility.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useId }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> LoginForm<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> id =<\/span> useId<\/span>(<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>form<\/span>><\/span><\/span>\n <<\/span>label<\/span> htmlFor<\/span>=<\/span>{<\/span>id}<\/span><\/span>><\/span><\/span>Username:<\/span><\/<\/span>label<\/span>><\/span><\/span>\n <<\/span>input<\/span> id<\/span>=<\/span>{<\/span>id}<\/span><\/span> type<\/span>=<\/span>\"<\/span>text\"<\/span><\/span> \/><\/span><\/span>\n <\/<\/span>form<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, the <code>id<\/code> generated by <code>useId<\/code> ensures that the <code>label<\/code> is correctly associated with the <code>input<\/code>.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>Linking labels to form inputs.<\/li>\n<li>Generating unique IDs for accessibility attributes.<\/li>\n<li>Ensuring SSR compatibility with stable IDs.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Using random or incremental IDs that break during hydration.<\/li>\n<li>Forgetting to use <code>useId<\/code> when accessibility features require unique identifiers.<\/li>\n<li>Manually managing IDs in complex forms leading to duplication.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Always use <code>useId<\/code> for form-related accessibility.<\/li>\n<li>Avoid global counters for generating IDs.<\/li>\n<li>Ensure IDs remain consistent across renders.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked to improve form accessibility.<\/li>\n<li>Asked how server-side rendering affects unique identifiers.<\/li>\n<li>Asked to explain how hydration issues arise in React.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-does-re-rendering-mean-in-react--rendering-concepts--easy\">19. What does re-rendering mean in React?<\/strong> | Rendering Concepts | Easy<\/h3>\nRe-rendering refers to the process where React updates a component\u2019s output based on changes in its state or props. React recalculates the virtual DOM and updates the actual DOM to reflect those changes.<\/p>\nExplanation:<\/strong><\/p>\nWhenever a component\u2019s state or props change, React schedules a rerender. It creates a new virtual DOM tree, compares it to the previous one using the reconciliation process, and applies only the differences to the real DOM.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Counter<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n console.<\/span>log<\/span>(<\/span>\"Component rendered\"<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>h1<\/span>><\/span><\/span>Count:<\/span> {<\/span>count}<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nEach time you click the button, the state changes, causing React to rerender the component.<\/p>\nWhen re-rendering happens:<\/strong><\/p>\n<ul>\n<li>State updates using <code>useState<\/code> or <code>setState<\/code>.<\/li>\n<li>Props change from a parent component.<\/li>\n<li>Context value changes.<\/li>\n<li>Force updates triggered programmatically.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Causing unnecessary renders by not memoizing functions or objects passed as props.<\/li>\n<li>Deeply nesting state and causing complex rerenders.<\/li>\n<li>Forgetting that every state change triggers a rerender.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Lift state only when necessary.<\/li>\n<li>Use <code>React.memo<\/code> or <code>useCallback<\/code> to optimize rerenders.<\/li>\n<li>Keep state flat and minimal to reduce complexity.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked how React handles updates efficiently.<\/li>\n<li>Asked to explain why components rerender after state changes.<\/li>\n<li>Asked to debug performance issues related to unnecessary rerenders.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-react-fragments-used-for--jsx--rendering--easy\">20. What are React Fragments used for?<\/strong> | JSX \/ Rendering | Easy<\/h3>\nReact Fragments allow you to group multiple elements without adding extra nodes to the DOM. It\u2019s useful when you want to return multiple elements from a component without introducing unnecessary wrappers.<\/p>\nExplanation:<\/strong><\/p>\nNormally, JSX requires a single parent element. React Fragments let you group elements without rendering extra DOM nodes, which can interfere with layout or styling.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> List<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>><\/span>\n <<\/span>li<\/span>><\/span><\/span>Item 1<\/span><\/<\/span>li<\/span>><\/span><\/span>\n <<\/span>li<\/span>><\/span><\/span>Item 2<\/span><\/<\/span>li<\/span>><\/span><\/span>\n <<\/span>li<\/span>><\/span><\/span>Item 3<\/span><\/<\/span>li<\/span>><\/span><\/span>\n <<\/span>\/<\/span>><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nThis way, the component returns multiple list items without wrapping them in a <code><div><\/code> or other container.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>Grouping elements in a list without extra DOM nodes.<\/li>\n<li>Avoiding unnecessary wrappers that complicate styling or structure.<\/li>\n<li>Returning multiple elements from a component.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Forgetting to wrap elements when JSX expects a single parent.<\/li>\n<li>Using extra <code><div><\/code> containers that break CSS layouts.<\/li>\n<li>Overusing fragments where semantic HTML elements are better.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Use fragments when grouping elements that don\u2019t need a container.<\/li>\n<li>Keep your component tree clean and avoid unnecessary DOM nodes.<\/li>\n<li>Use <code>React.Fragment<\/code> if you need to attach keys in lists.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked how to return multiple elements from a component.<\/li>\n<li>Asked why unnecessary DOM nodes can cause styling issues.<\/li>\n<li>Asked to explain differences between fragments and regular containers.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-forwardref-in-react-used-for--refs--advanced-patterns--intermediate\">21. What is <code>forwardRef()<\/code> in React used for?<\/strong> | Refs \/ Advanced Patterns | Intermediate<\/h3>\n<code>forwardRef()<\/code> is a React API that allows a component to forward its ref to one of its child components. This is useful when the parent component needs direct access to a DOM element or a child component\u2019s instance.<\/p>\nExplanation:<\/strong><\/p>\nNormally, refs are used to directly access DOM elements or components. However, when you wrap a component, its ref doesn\u2019t automatically get passed down. <code>forwardRef()<\/code> lets you explicitly forward the ref to a specific child, enabling scenarios like focusing inputs or managing animations.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> forwardRef,<\/span> useRef }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> CustomInput =<\/span> forwardRef<\/span>(<\/span>(<\/span>props,<\/span> ref)<\/span> =><\/span> {<\/span>\n return<\/span> <<\/span>input<\/span> ref<\/span>=<\/span>{<\/span>ref}<\/span><\/span> {<\/span>...<\/span>props<\/span>}<\/span><\/span> \/><\/span><\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> inputRef =<\/span> useRef<\/span>(<\/span>)<\/span>;<\/span>\n\n const<\/span> focusInput<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n inputRef.<\/span>current.<\/span>focus<\/span>(<\/span>)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>CustomInput<\/span> ref<\/span>=<\/span>{<\/span>inputRef}<\/span><\/span> placeholder<\/span>=<\/span>\"<\/span>Type here\"<\/span><\/span> \/><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>focusInput}<\/span><\/span>><\/span><\/span>Focus Input<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span>\n<\/code><\/pre>\nHere, <code>CustomInput<\/code> forwards the ref to the <code><input><\/code> element, enabling <code>App<\/code> to call <code>focus()<\/code>.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nWhen you need to expose a DOM element or instance to a parent component.<\/p>\n<\/li>\n<li>\nFor building reusable input components that need focus or selection management.<\/p>\n<\/li>\n<li>\nWhen integrating with third-party libraries that require direct DOM manipulation.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nForgetting to forward the ref and expecting it to work automatically.<\/p>\n<\/li>\n<li>\nUsing <code>forwardRef()<\/code> when it\u2019s unnecessary, adding complexity.<\/p>\n<\/li>\n<li>\nNot handling the ref correctly in functional components.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse <code>forwardRef()<\/code> for wrapper components that need to expose internal elements.<\/p>\n<\/li>\n<li>\nDocument how the forwarded ref is used in the component\u2019s API.<\/p>\n<\/li>\n<li>\nCombine <code>forwardRef()<\/code> with <code>useImperativeHandle<\/code> when you need to expose custom instance methods.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked to explain how to control a child input from the parent.<\/p>\n<\/li>\n<li>\nAsked to implement reusable form fields with ref forwarding.<\/p>\n<\/li>\n<li>\nAsked to expose methods in functional components.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-do-you-reset-a-components-state-in-react--state-management--beginner\">22. How do you reset a component\u2019s state in React?<\/strong> | State Management | Beginner<\/h3>\nResetting a component\u2019s state means restoring it to its initial values, often used after form submissions or when navigating between views.<\/p>\nExplanation:<\/strong><\/p>\nState in React is mutable through <code>setState<\/code> or the <code>useState<\/code> hook. To reset it, you simply assign the initial state again. This ensures the component\u2019s UI reflects the reset state.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> initialState =<\/span> {<\/span> name:<\/span> ''<\/span>,<\/span> email:<\/span> ''<\/span> }<\/span>;<\/span>\n\nfunction<\/span> Form<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>formData,<\/span> setFormData]<\/span> =<\/span> useState<\/span>(<\/span>initialState)<\/span>;<\/span>\n\n const<\/span> handleReset<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n setFormData<\/span>(<\/span>initialState)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>input\n value=<\/span>{<\/span>formData.<\/span>name}<\/span>\n onChange=<\/span>{<\/span>(<\/span>e)<\/span> =><\/span> setFormData<\/span>(<\/span>{<\/span> ...<\/span>formData,<\/span> name:<\/span> e.<\/span>target.<\/span>value }<\/span>)<\/span>}<\/span>\n placeholder=<\/span>\"Name\"<\/span>\n \/<\/span>><\/span>\n <<\/span>input\n value=<\/span>{<\/span>formData.<\/span>email}<\/span>\n onChange=<\/span>{<\/span>(<\/span>e)<\/span> =><\/span> setFormData<\/span>(<\/span>{<\/span> ...<\/span>formData,<\/span> email:<\/span> e.<\/span>target.<\/span>value }<\/span>)<\/span>}<\/span>\n placeholder=<\/span>\"Email\"<\/span>\n \/<\/span>><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>handleReset}<\/span><\/span>><\/span><\/span>Reset<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> Form;<\/span>\n<\/code><\/pre>\nClicking the reset button clears the form fields.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nAfter submitting or canceling a form.<\/p>\n<\/li>\n<li>\nWhen switching between different data views.<\/p>\n<\/li>\n<li>\nFor clearing controlled inputs.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nMutating the state directly instead of using <code>setState<\/code>.<\/p>\n<\/li>\n<li>\nUsing stale state when resetting due to incorrect reference copying.<\/p>\n<\/li>\n<li>\nForgetting to reset nested objects properly.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nStore initial state in a constant and reuse it.<\/p>\n<\/li>\n<li>\nAvoid mutating state; always create a new object when resetting.<\/p>\n<\/li>\n<li>\nEnsure form fields are controlled with <code>value<\/code> and <code>onChange<\/code>.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked to implement a form that can be reset.<\/p>\n<\/li>\n<li>\nAsked how to manage controlled form inputs.<\/p>\n<\/li>\n<li>\nAsked about state immutability and how to ensure state is updated correctly.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"why-does-react-recommend-against-mutating-state--state-management--best-practices--intermediate\">23. Why does React recommend against mutating state?<\/strong> | State Management \/ Best Practices | Intermediate<\/h3>\nReact\u2019s rendering system relies on detecting changes in state. If state is mutated directly, React may not detect changes, causing rendering bugs and stale UI.<\/p>\nExplanation:<\/strong><\/p>\nReact uses shallow comparison to determine if state or props have changed. When you mutate state directly, you don\u2019t create a new reference, so React may not rerender the component even though data has changed.<\/p>\nExample of incorrect approach:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> [<\/span>items,<\/span> setItems]<\/span> =<\/span> useState<\/span>(<\/span>[<\/span>1<\/span>,<\/span> 2<\/span>,<\/span> 3<\/span>]<\/span>)<\/span>;<\/span>\n\nfunction<\/span> addItem<\/span>(<\/span>)<\/span> {<\/span>\n items.<\/span>push<\/span>(<\/span>4<\/span>)<\/span>;<\/span> \/\/ Direct mutation!<\/span>\n setItems<\/span>(<\/span>items)<\/span>;<\/span> \/\/ React might not rerender<\/span>\n}<\/span>\n<\/code><\/pre>\nCorrect approach:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> addItem<\/span>(<\/span>)<\/span> {<\/span>\n setItems<\/span>(<\/span>prevItems =><\/span> [<\/span>...<\/span>prevItems,<\/span> 4<\/span>]<\/span>)<\/span>;<\/span> \/\/ Create new array<\/span>\n}<\/span>\n<\/code><\/pre>\nWhy mutation causes issues:<\/strong><\/p>\n<ul>\n<li>\nReact compares old and new state by reference.<\/p>\n<\/li>\n<li>\nMutated state keeps the same reference, causing skipped renders.<\/p>\n<\/li>\n<li>\nMay lead to bugs where UI doesn\u2019t update correctly.<\/p>\n<\/li>\n<\/ul>\nWhen this becomes a problem:<\/strong><\/p>\n<ul>\n<li>\nComplex state objects or arrays.<\/p>\n<\/li>\n<li>\nNested state that\u2019s deeply updated.<\/p>\n<\/li>\n<li>\nOptimized components using <code>React.memo<\/code>.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nMutating arrays with <code>push<\/code> or <code>splice<\/code> instead of creating new arrays.<\/p>\n<\/li>\n<li>\nMutating objects by assigning properties directly.<\/p>\n<\/li>\n<li>\nMixing mutable and immutable patterns.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nAlways create a new object or array when updating state.<\/p>\n<\/li>\n<li>\nUse helper functions like <code>map<\/code>, <code>filter<\/code>, or <code>spread syntax<\/code>.<\/p>\n<\/li>\n<li>\nEmbrace immutability for predictable rendering and debugging.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked why state changes sometimes don\u2019t reflect in the UI.<\/p>\n<\/li>\n<li>\nAsked to identify why a component doesn\u2019t rerender after updating state.<\/p>\n<\/li>\n<li>\nAsked how immutability helps in debugging or optimizing performance.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-error-boundaries-in-react-for--error-handling--intermediate\">24. What are error boundaries in React for?<\/strong> | Error Handling | Intermediate<\/h3>\nError boundaries are special React components that catch errors in their child components during rendering, lifecycle methods, or constructors, preventing the entire app from crashing.<\/p>\nExplanation:<\/strong><\/p>\nReact\u2019s component tree doesn\u2019t handle errors by default. Error boundaries act as a safeguard by catching JavaScript errors and showing fallback UI instead of breaking the entire application.<\/p>\nHow they work:<\/strong><\/p>\n<ul>\n<li>\nImplemented using <code>componentDidCatch<\/code> and <code>getDerivedStateFromError<\/code>.<\/p>\n<\/li>\n<li>\nCatch errors in rendering, lifecycle methods, and constructors.<\/p>\n<\/li>\n<li>\nDon\u2019t catch errors in event handlers, asynchronous code, or server-side rendering.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React from<\/span> 'react'<\/span>;<\/span>\n\nclass<\/span> ErrorBoundary<\/span> extends<\/span> React.<\/span>Component<\/span> {<\/span>\n constructor<\/span>(<\/span>props)<\/span> {<\/span>\n super<\/span>(<\/span>props)<\/span>;<\/span>\n this<\/span>.<\/span>state =<\/span> {<\/span> hasError:<\/span> false<\/span> }<\/span>;<\/span>\n }<\/span>\n\n static<\/span> getDerivedStateFromError<\/span>(<\/span>error)<\/span> {<\/span>\n return<\/span> {<\/span> hasError:<\/span> true<\/span> }<\/span>;<\/span>\n }<\/span>\n\n componentDidCatch<\/span>(<\/span>error,<\/span> info)<\/span> {<\/span>\n console.<\/span>error<\/span>(<\/span>\"Error caught:\"<\/span>,<\/span> error,<\/span> info)<\/span>;<\/span>\n }<\/span>\n\n render<\/span>(<\/span>)<\/span> {<\/span>\n if<\/span> (<\/span>this<\/span>.<\/span>state.<\/span>hasError)<\/span> {<\/span>\n return<\/span> <<\/span>h2<\/span>><\/span><\/span>Something went wrong.<\/span><\/<\/span>h2<\/span>><\/span><\/span>;<\/span>\n }<\/span>\n return<\/span> this<\/span>.<\/span>props.<\/span>children;<\/span>\n }<\/span>\n}<\/span>\n\nfunction<\/span> BuggyComponent<\/span>(<\/span>)<\/span> {<\/span>\n throw<\/span> new<\/span> Error<\/span>(<\/span>\"Oops!\"<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>div<\/span>><\/span><\/span>Normal content<\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>ErrorBoundary<\/span>><\/span><\/span>\n <<\/span>BuggyComponent<\/span> \/><\/span><\/span>\n <\/<\/span>ErrorBoundary<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nCatch errors in UI rendering.<\/p>\n<\/li>\n<li>\nAvoid breaking the entire app due to a minor component failure.<\/p>\n<\/li>\n<li>\nProvide fallback UI to improve user experience.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nExpecting error boundaries to catch errors in event handlers.<\/p>\n<\/li>\n<li>\nForgetting to log or report the error for debugging.<\/p>\n<\/li>\n<li>\nWrapping too large portions of the app, making error isolation harder.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nWrap only critical parts of the UI.<\/p>\n<\/li>\n<li>\nUse multiple error boundaries to localize errors.<\/p>\n<\/li>\n<li>\nProvide meaningful fallback UI and logging.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to improve app resilience when parts of the UI fail.<\/p>\n<\/li>\n<li>\nAsked to explain how React handles exceptions in child components.<\/p>\n<\/li>\n<li>\nAsked about best practices in debugging production errors.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-do-you-test-react-applications--testing--quality-assurance--intermediate\">25. How do you test React applications?<\/strong> | Testing \/ Quality Assurance | Intermediate<\/h3>\nTesting ensures that React components behave as expected. You can use libraries like Jest and React Testing Library to write unit, integration, and end-to-end tests.<\/p>\nExplanation:<\/strong><\/p>\nTesting helps catch bugs early and ensures UI correctness. Jest is a test runner and assertion library, while React Testing Library simulates user interactions and verifies component behavior without relying on implementation details.<\/p>\nTypes of tests:<\/strong><\/p>\n<ol>\n<li>\nUnit tests:<\/strong> Test individual components or functions.<\/p>\n<\/li>\n<li>\nIntegration tests:<\/strong> Verify how components interact together.<\/p>\n<\/li>\n<li>\nEnd-to-end tests:<\/strong> Test full workflows, often using tools like Cypress.<\/p>\n<\/li>\n<\/ol>\nExample (Unit test with React Testing Library):<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> render,<\/span> screen,<\/span> fireEvent }<\/span> from<\/span> '@testing-library\/react'<\/span>;<\/span>\nimport<\/span> Counter from<\/span> '.\/Counter'<\/span>;<\/span>\n\ntest<\/span>(<\/span>'increments count on button click'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n render<\/span>(<\/span><<\/span>Counter<\/span> \/><\/span><\/span>)<\/span>;<\/span> \nconst<\/span> button =<\/span> screen.<\/span>getByText<\/span>(<\/span>'Increment'<\/span>)<\/span>;<\/span> \nfireEvent.<\/span>click<\/span>(<\/span>button)<\/span>;<\/span> \nexpect<\/span>(<\/span>screen.<\/span>getByText<\/span>(<\/span>'Count: 1'<\/span>)<\/span>)<\/span>.<\/span>toBeInTheDocument<\/span>(<\/span>)<\/span>;<\/span> \n}<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\n<hr>\nWhen to test:<\/strong><\/p>\n<ul>\n<li>Before releasing features.<\/li>\n<li>When fixing bugs.<\/li>\n<li>While refactoring code.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Testing implementation details instead of behavior.<\/li>\n<li>Writing brittle tests that break easily with minor refactoring.<\/li>\n<li>Not cleaning up mocks or listeners between tests.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Write tests that focus on what the user sees and interacts with.<\/li>\n<li>Use <code>beforeEach<\/code> and <code>afterEach<\/code> to reset state.<\/li>\n<li>Avoid over-mocking unless necessary.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked how to test a form submission flow.<\/li>\n<li>Asked to explain the difference between unit and integration tests.<\/li>\n<li>Asked why testing UI components improves maintainability.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-what-react-hydration-is--rendering--ssr--intermediate\">26. Explain what React hydration is<\/strong> | Rendering \/ SSR | Intermediate<\/h3>\nHydration is the process where a server-rendered HTML page is \u201cwired up\u201d with JavaScript to make it interactive on the client side.<\/p>\nExplanation:<\/strong><\/p>\nWhen you use Server-Side Rendering (SSR), the server sends a fully rendered HTML page to the browser. This improves load time and SEO. However, the HTML alone isn\u2019t interactive event listeners and state management need to be attached once the JavaScript code is loaded on the client. This process of attaching event handlers and initializing state without replacing the existing markup is called hydration.<\/p>\nHow it works:<\/strong><\/p>\n<ol>\n<li>\nServer renders the page and sends HTML.<\/p>\n<\/li>\n<li>\nThe browser loads the HTML and displays it.<\/p>\n<\/li>\n<li>\nReact runs on the client, finds the matching DOM structure, and attaches event listeners without re-rendering.<\/p>\n<\/li>\n<\/ol>\nExample with Next.js:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">\/\/ pages\/index.js<\/span>\nfunction<\/span> Home<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>h1<\/span>><\/span><\/span>Welcome<\/<\/span>h1<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>\n Count:<\/span> {<\/span>count}<\/span>\n <\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> Home;<\/span>\n<\/code><\/pre>\nThis page can be server-rendered by Next.js and hydrated on the client to become interactive.<\/p>\nWhen hydration is important:<\/strong><\/p>\n<ul>\n<li>\nSEO-focused websites that benefit from server rendering.<\/p>\n<\/li>\n<li>\nApps where fast initial load is critical.<\/p>\n<\/li>\n<li>\nComplex UIs that need both pre-rendered content and interactivity.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nHydration mismatch errors when server and client render differently.<\/p>\n<\/li>\n<li>\nAdding dynamic data on the server that changes on the client without syncing.<\/p>\n<\/li>\n<li>\nNot using consistent props or markup between server and client.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nEnsure that server-rendered markup matches client-side rendering.<\/p>\n<\/li>\n<li>\nAvoid using non-deterministic data during initial render.<\/p>\n<\/li>\n<li>\nHandle loading and fallback states carefully during hydration.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked about the difference between SSR and CSR.<\/p>\n<\/li>\n<li>\nAsked how hydration improves performance.<\/p>\n<\/li>\n<li>\nAsked why hydration errors occur and how to debug them.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-react-portals-used-for--rendering--advanced-patterns--intermediate\">27. What are React Portals used for?<\/strong> | Rendering \/ Advanced Patterns | Intermediate<\/h3>\nPortals allow you to render a component\u2019s children into a DOM node that exists outside the parent component\u2019s hierarchy.<\/p>\nExplanation:<\/strong><\/p>\nSometimes you need UI elements like modals, tooltips, or dropdowns to break out of their parent container\u2019s styles, overflow, or z-index constraints. Portals let you render content elsewhere in the DOM tree while keeping the component\u2019s logic within its parent.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React from<\/span> 'react'<\/span>;<\/span>\nimport<\/span> ReactDOM from<\/span> 'react-dom'<\/span>;<\/span>\n\nfunction<\/span> Modal<\/span>(<\/span>{<\/span> children }<\/span>)<\/span> {<\/span>\n return<\/span> ReactDOM.<\/span>createPortal<\/span>(<\/span>\n <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>modal\"<\/span><\/span>><\/span><\/span>\n {<\/span>children}<\/span>\n <\/<\/span>div<\/span>><\/span><\/span>,<\/span>\n document.<\/span>getElementById<\/span>(<\/span>'modal-root'<\/span>)<\/span> \/\/ outside the main app container<\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>h1<\/span>><\/span><\/span>My App<\/<\/span>h1<\/span>><\/span><\/span>\n <<\/span>Modal<\/span>><\/span><\/span>\n <<\/span>h2<\/span>><\/span><\/span>I'm a modal!<\/span><\/<\/span>h2<\/span>><\/span><\/span>\n <\/<\/span>Modal<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span>\n<\/code><\/pre>\nHere, <code>Modal<\/code> is rendered into a separate <code>div<\/code> with ID <code>modal-root<\/code>, outside the main app tree.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nBuilding modals, popovers, or tooltips.<\/p>\n<\/li>\n<li>\nManaging z-index or overflow issues.<\/p>\n<\/li>\n<li>\nIsolating UI elements that require special handling.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nForgetting to create the target DOM node (<code>modal-root<\/code>).<\/p>\n<\/li>\n<li>\nRendering mismatched content between parent and portal.<\/p>\n<\/li>\n<li>\nNot handling accessibility concerns (like focus trapping).<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nEnsure the portal\u2019s target node exists before rendering.<\/p>\n<\/li>\n<li>\nManage focus and accessibility within portals.<\/p>\n<\/li>\n<li>\nAvoid passing complex state unless needed.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to build a modal component.<\/p>\n<\/li>\n<li>\nAsked how to solve overflow or styling issues in nested layouts.<\/p>\n<\/li>\n<li>\nAsked how to manage event bubbling with portals.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-do-you-debug-react-applications--debugging--tools--beginner\">28. How do you debug React applications?<\/strong> | Debugging \/ Tools | Beginner<\/h3>\nDebugging in React involves inspecting component trees, checking state and props, and identifying errors using browser tools and libraries.<\/p>\nExplanation:<\/strong><\/p>\nDebugging helps developers find and fix issues during development or in production. React apps can be debugged using both built-in browser tools and external libraries designed to inspect React-specific structures.<\/p>\nTools and methods:<\/strong><\/p>\n<ol>\n<li>\nReact Developer Tools:<\/strong> Inspect the component hierarchy, state, and props.<\/p>\n<\/li>\n<li>\nConsole logs:<\/strong> Use <code>console.log()<\/code> to trace state updates or errors.<\/p>\n<\/li>\n<li>\nBreakpoints:<\/strong> Set breakpoints in browser DevTools to step through code.<\/p>\n<\/li>\n<li>\nError boundaries:<\/strong> Catch rendering errors and inspect stack traces.<\/p>\n<\/li>\n<li>\nNetwork inspection:<\/strong> Check API requests and responses.<\/p>\n<\/li>\n<\/ol>\nExample use of React Developer Tools:<\/strong><\/p>\n<ul>\n<li>\nInspect a component\u2019s props.<\/p>\n<\/li>\n<li>\nSee which component caused an error.<\/p>\n<\/li>\n<li>\nTrace state changes and understand component rerenders.<\/p>\n<\/li>\n<\/ul>\nCommon debugging approaches:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">console.<\/span>log<\/span>(<\/span>\"Current state:\"<\/span>,<\/span> state)<\/span>;<\/span>\nconsole.<\/span>error<\/span>(<\/span>\"Something went wrong!\"<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nUse conditionals to debug state transitions or logic flow.<\/p>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nLogging too much data, making debugging harder.<\/p>\n<\/li>\n<li>\nRelying only on <code>console.log<\/code> instead of structured error handling.<\/p>\n<\/li>\n<li>\nForgetting to clean up event listeners or intervals during component unmount.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse React DevTools for structural inspection.<\/p>\n<\/li>\n<li>\nLeverage <code>useEffect<\/code> cleanup functions to manage side effects.<\/p>\n<\/li>\n<li>\nIntegrate monitoring tools like Sentry in production environments.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how you would identify why a component isn\u2019t updating.<\/p>\n<\/li>\n<li>\nAsked how you would debug API calls in a React app.<\/p>\n<\/li>\n<li>\nAsked how you would troubleshoot hydration issues.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-react-strict-mode-and-what-are-its-benefits--development-tools--best-practices--beginner\">29. What is React strict mode and what are its benefits?<\/strong> | Development Tools \/ Best Practices | Beginner<\/h3>\nReact Strict Mode is a tool that helps developers find potential issues by adding additional checks and warnings during development.<\/p>\nExplanation:<\/strong><\/p>\nStrict Mode doesn\u2019t render anything on the screen, but it activates extra checks in the background. It helps catch unsafe lifecycle methods, side effects, deprecated APIs, and other common issues early.<\/p>\nKey features:<\/strong><\/p>\n<ul>\n<li>\nDetects components with unsafe lifecycle methods.<\/p>\n<\/li>\n<li>\nIdentifies side effects and unexpected behaviors.<\/p>\n<\/li>\n<li>\nHighlights deprecated APIs.<\/p>\n<\/li>\n<li>\nHelps prepare code for future versions of React.<\/p>\n<\/li>\n<\/ul>\nExample usage:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>React.StrictMode<\/span>><\/span><\/span>\n <<\/span>MyComponent<\/span> \/><\/span><\/span>\n <\/<\/span>React.StrictMode<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nThis wraps the component and applies extra checks during development.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nDuring development to catch bugs early.<\/p>\n<\/li>\n<li>\nTo prepare for future React updates.<\/p>\n<\/li>\n<li>\nTo ensure best practices in component design.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nThinking it\u2019s meant for production performance optimization.<\/p>\n<\/li>\n<li>\nIgnoring warnings without fixing underlying issues.<\/p>\n<\/li>\n<li>\nConfusing it with error boundaries (they serve different purposes).<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nAlways enable it during development.<\/p>\n<\/li>\n<li>\nUse it alongside testing and code reviews.<\/p>\n<\/li>\n<li>\nAddress warnings to maintain code health.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to ensure code quality in a React app.<\/p>\n<\/li>\n<li>\nAsked how to find side effects or deprecated code.<\/p>\n<\/li>\n<li>\nAsked why a component behaves unexpectedly in strict mode.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-do-you-localize-react-applications--internationalization-i18n--intermediate\">30. How do you localize React applications?<\/strong> | Internationalization (i18n) | Intermediate<\/h3>\nLocalization is the process of adapting an application\u2019s content for different languages and regions, making it accessible to a broader audience.<\/p>\nExplanation:<\/strong><\/p>\nLocalization involves providing translations, date\/time formats, number formats, and culturally appropriate content. In React, libraries like <code>react-i18next<\/code> and <code>react-intl<\/code> make it easier to manage translations and switch languages dynamically.<\/p>\nSteps to localize an app:<\/strong><\/p>\n<ol>\n<li>\nCreate translation files for different languages.<\/p>\n<\/li>\n<li>\nUse an i18n library to load and switch translations.<\/p>\n<\/li>\n<li>\nReplace static text with translatable keys.<\/p>\n<\/li>\n<\/ol>\nExample using <code>react-i18next<\/code>:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">\/\/ i18n.js<\/span>\nimport<\/span> i18n from<\/span> 'i18next'<\/span>;<\/span>\nimport<\/span> {<\/span> initReactI18next }<\/span> from<\/span> 'react-i18next'<\/span>;<\/span>\n\ni18n.<\/span>use<\/span>(<\/span>initReactI18next)<\/span>.<\/span>init<\/span>(<\/span>{<\/span>\n resources:<\/span> {<\/span>\n en:<\/span> {<\/span>\n translation:<\/span> {<\/span>\n welcome_message:<\/span> \"Welcome!\"<\/span>,<\/span>\n }<\/span>,<\/span>\n }<\/span>,<\/span>\n fr:<\/span> {<\/span>\n translation:<\/span> {<\/span>\n welcome_message:<\/span> \"Bienvenue!\"<\/span>,<\/span>\n }<\/span>,<\/span>\n }<\/span>,<\/span>\n }<\/span>,<\/span>\n lng:<\/span> \"en\"<\/span>,<\/span>\n fallbackLng:<\/span> \"en\"<\/span>,<\/span>\n}<\/span>)<\/span>;<\/span>\n\n\/\/ Component<\/span>\nimport<\/span> {<\/span> useTranslation }<\/span> from<\/span> 'react-i18next'<\/span>;<\/span>\n\nfunction<\/span> MyComponent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> {<\/span> t }<\/span> =<\/span> useTranslation<\/span>(<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>p><\/span>{<\/span>t<\/span>(<\/span>'welcome_message'<\/span>)<\/span>}<\/span><<\/span>\/<\/span>p><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nApplications targeting global audiences.<\/p>\n<\/li>\n<li>\nApps with dynamic language switching.<\/p>\n<\/li>\n<li>\nApps needing support for multiple date, time, or currency formats.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nHardcoding text instead of using translation keys.<\/p>\n<\/li>\n<li>\nForgetting to handle fallback languages.<\/p>\n<\/li>\n<li>\nNot considering text direction or pluralization rules.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nStore translations in separate files for maintainability.<\/p>\n<\/li>\n<li>\nUse context-aware translations for complex sentences.<\/p>\n<\/li>\n<li>\nTest with multiple languages to ensure correct rendering.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked how you would support multiple languages in a web app.<\/li>\n<li>Asked how to manage translations for dynamic content.<\/li>\n<li>Asked how to ensure fallback options when translations are missing.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-code-splitting-in-a-react-application--performance-optimization--intermediate\">31. What is code splitting in a React application?<\/strong> | Performance Optimization | Intermediate<\/h3>\nCode splitting is a technique that helps improve performance by breaking the application\u2019s code into smaller chunks and loading them on demand.<\/p>\nExplanation:<\/strong><\/p>\nIn large React applications, bundling everything into one file can slow down the initial load time. Code splitting allows you to split your code at logical points (such as routes or components) so that only the necessary code is loaded when required.<\/p>\nReact provides built-in support for code splitting through <code>React.lazy()<\/code> and <code>Suspense<\/code>, allowing developers to load components asynchronously.<\/p>\nHow it works:<\/strong><\/p>\n<ol>\n<li>\nDefine a component to be lazily loaded using <code>React.lazy<\/code>.<\/p>\n<\/li>\n<li>\nWrap the component with <code>React.Suspense<\/code>, specifying a fallback UI while the component loads.<\/p>\n<\/li>\n<\/ol>\nExample:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">import<\/span> React,<\/span> {<\/span> Suspense,<\/span> lazy }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> LazyComponent =<\/span> lazy<\/span>(<\/span>(<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'.\/LazyComponent'<\/span>)<\/span>)<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>div><\/span>\n <<\/span>h1><\/span>Main App<<\/span>\/<\/span>h1><\/span>\n <<\/span>Suspense fallback=<\/span>{<\/span><<\/span>div><\/span>Loading...<\/span><<\/span>\/<\/span>div><\/span>}<\/span>><\/span>\n <<\/span>LazyComponent \/<\/span>><\/span>\n <<\/span>\/<\/span>Suspense><\/span>\n <<\/span>\/<\/span>div><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span>\n<\/code><\/pre>\nHere, <code>LazyComponent<\/code> is loaded only when needed, improving the initial load time.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nLarge applications with multiple routes.<\/p>\n<\/li>\n<li>\nComponents not required at the initial render.<\/p>\n<\/li>\n<li>\nReducing the size of JavaScript bundles.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nNot wrapping lazy components with <code>Suspense<\/code>, leading to errors.<\/p>\n<\/li>\n<li>\nOverusing code splitting, causing excessive network requests.<\/p>\n<\/li>\n<li>\nNot handling errors during dynamic imports.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nCode split by route or feature rather than at arbitrary points.<\/p>\n<\/li>\n<li>\nUse fallback UI that provides useful loading feedback.<\/p>\n<\/li>\n<li>\nCombine with error boundaries to handle loading failures gracefully.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to optimize performance for large React apps.<\/p>\n<\/li>\n<li>\nAsked why code splitting is beneficial.<\/p>\n<\/li>\n<li>\nAsked how to handle lazy loading errors in production.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders--state-management--performance--advanced\">32. How would one optimize the performance of React contexts to reduce rerenders?<\/strong> | State Management \/ Performance | Advanced<\/h3>\nOptimizing React context involves ensuring that only the necessary components re-render when context values change.<\/p>\nExplanation:<\/strong><\/p>\nReact\u2019s context API provides a way to pass data through the component tree without prop drilling. However, when context values change, all components that consume the context re-render by default, even if they don\u2019t use the changed part of the context.<\/p>\nOptimizing context ensures better performance by minimizing unnecessary re-renders.<\/p>\nTechniques to optimize:<\/strong><\/p>\n<ol>\n<li>Memoize context values:<\/strong> \nUse <code>useMemo<\/code> to prevent context values from changing unnecessarily.<\/li>\n<\/ol>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">const<\/span> value =<\/span> useMemo<\/span>(<\/span>(<\/span>)<\/span> =><\/span> (<\/span>{<\/span> state,<\/span> dispatch }<\/span>)<\/span>,<\/span> [<\/span>state,<\/span> dispatch]<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\n<ol start=\"2\">\n<li>\nSplit contexts:<\/strong> \nCreate separate contexts for unrelated state slices.<\/p>\n<\/li>\n<li>\nUse selectors:<\/strong> \nLibraries like <code>use-context-selector<\/code> allow consumers to only listen to specific parts of the context.<\/p>\n<\/li>\n<\/ol>\nExample:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">const<\/span> AppContext =<\/span> React.<\/span>createContext<\/span>(<\/span>)<\/span>;<\/span>\n\nfunction<\/span> AppProvider<\/span>(<\/span>{<\/span> children }<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n const<\/span> value =<\/span> useMemo<\/span>(<\/span>(<\/span>)<\/span> =><\/span> (<\/span>{<\/span> count,<\/span> setCount }<\/span>)<\/span>,<\/span> [<\/span>count]<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>AppContext.<\/span>Provider value=<\/span>{<\/span>value}<\/span>><\/span>\n {<\/span>children}<\/span>\n <<\/span>\/<\/span>AppContext.<\/span>Provider><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to apply:<\/strong><\/p>\n<ul>\n<li>\nApplications with deep component trees.<\/p>\n<\/li>\n<li>\nState shared across unrelated components.<\/p>\n<\/li>\n<li>\nPerformance-critical apps where frequent state updates occur.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nPassing inline objects or functions as context values, triggering re-renders.<\/p>\n<\/li>\n<li>\nUsing a single context for all state, causing widespread updates.<\/p>\n<\/li>\n<li>\nForgetting to memoize or separate unrelated state.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nStructure contexts based on state usage patterns.<\/p>\n<\/li>\n<li>\nAlways memoize values that change over time.<\/p>\n<\/li>\n<li>\nAvoid unnecessary context usage when local state suffices.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked why your app\u2019s performance drops with global state.<\/p>\n<\/li>\n<li>\nAsked how to manage global state in a scalable way.<\/p>\n<\/li>\n<li>\nAsked about alternatives to Redux or MobX.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-higher-order-components-in-react--component-patterns--intermediate\">33. What are higher order components in React?<\/strong> | Component Patterns | Intermediate<\/h3>\nHigher-order components (HOCs) are functions that take a component as input and return a new component with added functionality or props.<\/p>\nExplanation:<\/strong><\/p>\nHOCs are a design pattern for reusing logic across components without duplicating code. Instead of inheritance, you wrap a component to enhance its behavior.<\/p>\nA typical HOC adds props, handles state, or injects logic into wrapped components.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">const<\/span> withLogger<\/span> =<\/span> (<\/span>WrappedComponent)<\/span> =><\/span> {<\/span>\n return<\/span> (<\/span>props)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Rendering with props:'<\/span>,<\/span> props)<\/span>;<\/span>\n return<\/span> <<\/span>WrappedComponent {<\/span>...<\/span>props}<\/span> \/<\/span>><\/span>;<\/span>\n }<\/span>;<\/span>\n}<\/span>;<\/span>\n\nconst<\/span> Hello<\/span> =<\/span> (<\/span>{<\/span> name }<\/span>)<\/span> =><\/span> <<\/span>div><\/span>Hello,<\/span> {<\/span>name}<\/span>!<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n\nconst<\/span> HelloWithLogger =<\/span> withLogger<\/span>(<\/span>Hello)<\/span>;<\/span>\n<\/code><\/pre>\nNow, <code>HelloWithLogger<\/code> logs props before rendering <code>Hello<\/code>.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nReusing component logic like authentication checks or data fetching.<\/p>\n<\/li>\n<li>\nInjecting props without modifying the original component.<\/p>\n<\/li>\n<li>\nEnhancing components for testing or logging.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nMutating props or state inside the HOC.<\/p>\n<\/li>\n<li>\nNot forwarding refs when needed.<\/p>\n<\/li>\n<li>\nUsing HOCs where hooks would suffice, complicating the component tree.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse HOCs for shared logic that applies to multiple components.<\/p>\n<\/li>\n<li>\nAvoid overusing them; prefer hooks where appropriate.<\/p>\n<\/li>\n<li>\nEnsure composability by properly handling props and refs.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked to explain patterns for code reuse.<\/p>\n<\/li>\n<li>\nAsked how you would share logic across multiple components.<\/p>\n<\/li>\n<li>\nAsked why inheritance is avoided in React.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-flux-pattern-and-what-are-its-benefits--state-management--intermediate\">34. What is the Flux pattern and what are its benefits?<\/strong> | State Management | Intermediate<\/h3>\nFlux is an architectural pattern for managing application state with a unidirectional data flow.<\/p>\nExplanation:<\/strong><\/p>\nIn traditional applications, data can flow in multiple directions, making it hard to track state changes. Flux enforces a single direction for data flow, making state management predictable and easier to debug.<\/p>\nCore components:<\/strong><\/p>\n<ol>\n<li>\nDispatcher:<\/strong> Sends actions to stores.<\/p>\n<\/li>\n<li>\nStores:<\/strong> Hold application state and logic.<\/p>\n<\/li>\n<li>\nActions:<\/strong> Define events that change the state.<\/p>\n<\/li>\n<li>\nViews (Components):<\/strong> React to changes in stores and update the UI.<\/p>\n<\/li>\n<\/ol>\nData flow sequence:<\/strong><\/p>\n<ol>\n<li>\nUser triggers an event.<\/p>\n<\/li>\n<li>\nAn action is created and dispatched.<\/p>\n<\/li>\n<li>\nStores update based on the action.<\/p>\n<\/li>\n<li>\nViews re-render with updated state.<\/p>\n<\/li>\n<\/ol>\nBenefits:<\/strong><\/p>\n<ul>\n<li>\nPredictable state transitions.<\/p>\n<\/li>\n<li>\nEasier debugging and tracing of state changes.<\/p>\n<\/li>\n<li>\nSeparation of concerns between data and UI logic.<\/p>\n<\/li>\n<\/ul>\nExample illustration:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">\/\/ Action<\/span>\nconst<\/span> incrementAction =<\/span> {<\/span> type:<\/span> 'INCREMENT'<\/span> }<\/span>;<\/span>\n\n\/\/ Store<\/span>\nlet<\/span> count =<\/span> 0<\/span>;<\/span>\nfunction<\/span> handleAction<\/span>(<\/span>action)<\/span> {<\/span>\n switch<\/span>(<\/span>action.<\/span>type)<\/span> {<\/span>\n case<\/span> 'INCREMENT'<\/span>:<\/span>\n count +=<\/span> 1<\/span>;<\/span>\n break<\/span>;<\/span>\n }<\/span>\n}<\/span>\n<\/code><\/pre>\nThis simplified model shows how actions modify state and trigger UI updates.<\/p>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nOvercomplicating the dispatcher or stores.<\/p>\n<\/li>\n<li>\nUsing it for trivial state instead of shared state.<\/p>\n<\/li>\n<li>\nMixing responsibilities across actions and stores.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nKeep actions descriptive and minimal.<\/p>\n<\/li>\n<li>\nEnsure stores only hold state logic.<\/p>\n<\/li>\n<li>\nUse libraries like Redux that implement Flux principles with added tools.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked why unidirectional data flow helps in complex apps.<\/p>\n<\/li>\n<li>\nAsked how Redux or MobX relate to Flux.<\/p>\n<\/li>\n<li>\nAsked to describe how state changes propagate in your app.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-one-way-data-flow-of-react-and-its-benefits--data-flow--core-concepts--beginner\">35. Explain one-way data flow of React and its benefits<\/strong> | Data Flow \/ Core Concepts | Beginner<\/h3>\nOne-way data flow means that data flows from parent components down to child components, making state management more predictable.<\/p>\nExplanation:<\/strong><\/p>\nIn React, data flows in a single direction\u2014from parent components to child components via props. This ensures that data dependencies are clear and that child components cannot directly modify data owned by parent components.<\/p>\nHow it works:<\/strong><\/p>\n<ul>\n<li>\nParent defines state and passes it to children.<\/p>\n<\/li>\n<li>\nChildren render UI based on props.<\/p>\n<\/li>\n<li>\nChildren communicate changes via callbacks passed from the parent.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">function<\/span> Parent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>Child count=<\/span>{<\/span>count}<\/span> increment=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span> \/<\/span>><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> Child<\/span>(<\/span>{<\/span> count,<\/span> increment }<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>div><\/span>\n <<\/span>p><\/span>Count:<\/span> {<\/span>count}<\/span><<\/span>\/<\/span>p><\/span>\n <<\/span>button onClick=<\/span>{<\/span>increment}<\/span>><\/span>Increment<<\/span>\/<\/span>button><\/span>\n <<\/span>\/<\/span>div><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, <code>Parent<\/code> manages state, and <code>Child<\/code> uses props to render and request updates.<\/p>\nBenefits:<\/strong><\/p>\n<ul>\n<li>\nPredictable UI updates.<\/p>\n<\/li>\n<li>\nEasier debugging since data flow is traceable.<\/p>\n<\/li>\n<li>\nReduces unexpected side effects.<\/p>\n<\/li>\n<li>\nEncourages better component design and separation of concerns.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nPassing unnecessary props that cause re-renders.<\/p>\n<\/li>\n<li>\nOverusing prop drilling instead of context for global state.<\/p>\n<\/li>\n<li>\nAllowing children to mutate parent data directly.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nKeep state where it logically belongs.<\/p>\n<\/li>\n<li>\nUse callbacks to notify parents of changes.<\/p>\n<\/li>\n<li>\nUse context or state managers when prop drilling gets cumbersome.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how state updates in React are managed.<\/p>\n<\/li>\n<li>\nAsked why data shouldn\u2019t be passed in multiple directions.<\/p>\n<\/li>\n<li>\nAsked how to handle shared state across components.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-do-you-handle-asynchronous-data-loading-in-react-applications--data-fetching--side-effects--intermediate\">36. How do you handle asynchronous data loading in React applications?<\/strong> | Data Fetching \/ Side Effects | Intermediate<\/h3>\nHandling asynchronous data loading in React involves fetching data from APIs or other sources and updating the component state accordingly while managing loading and error states.<\/p>\nExplanation:<\/strong><\/p>\nIn React, data fetching is typically done inside the <code>useEffect<\/code> hook, which allows you to run side effects after the component mounts or when dependencies change. You also use <code>useState<\/code> to store the data and track the loading or error status.<\/p>\nSteps to handle data fetching:<\/strong><\/p>\n<ol>\n<li>\nDefine state variables to store data, loading, and error.<\/p>\n<\/li>\n<li>\nUse <code>useEffect<\/code> to trigger the data fetch on component mount or when dependencies change.<\/p>\n<\/li>\n<li>\nUse <code>async\/await<\/code> or promises to fetch data.<\/p>\n<\/li>\n<li>\nUpdate state when data is successfully loaded or an error occurs.<\/p>\n<\/li>\n<\/ol>\nExample:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">import<\/span> React,<\/span> {<\/span> useState,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> DataFetchingComponent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>data,<\/span> setData]<\/span> =<\/span> useState<\/span>(<\/span>null<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>loading,<\/span> setLoading]<\/span> =<\/span> useState<\/span>(<\/span>true<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>error,<\/span> setError]<\/span> =<\/span> useState<\/span>(<\/span>null<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n async<\/span> function<\/span> fetchData<\/span>(<\/span>)<\/span> {<\/span>\n try<\/span> {<\/span>\n const<\/span> response =<\/span> await<\/span> fetch<\/span>(<\/span>'https:\/\/api.example.com\/data'<\/span>)<\/span>;<\/span>\n if<\/span> (<\/span>!<\/span>response.<\/span>ok)<\/span> {<\/span>\n throw<\/span> new<\/span> Error<\/span>(<\/span>'Network response was not ok'<\/span>)<\/span>;<\/span>\n }<\/span>\n const<\/span> result =<\/span> await<\/span> response.<\/span>json<\/span>(<\/span>)<\/span>;<\/span>\n setData<\/span>(<\/span>result)<\/span>;<\/span>\n }<\/span> catch<\/span> (<\/span>err<\/span>)<\/span> {<\/span>\n setError<\/span>(<\/span>err.<\/span>message)<\/span>;<\/span>\n }<\/span> finally<\/span> {<\/span>\n setLoading<\/span>(<\/span>false<\/span>)<\/span>;<\/span>\n }<\/span>\n }<\/span>\n\n fetchData<\/span>(<\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span> \/\/ Empty dependency array to run once on mount<\/span>\n\n if<\/span> (<\/span>loading)<\/span> return<\/span> <<\/span>div><\/span>Loading...<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n if<\/span> (<\/span>error)<\/span> return<\/span> <<\/span>div><\/span>Error:<\/span> {<\/span>error}<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n\n return<\/span> <<\/span>div><\/span>Data:<\/span> {<\/span>JSON.<\/span>stringify<\/span>(<\/span>data)<\/span>}<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to apply:<\/strong><\/p>\n<ul>\n<li>\nLoading data from REST APIs.<\/p>\n<\/li>\n<li>\nInteracting with backend services.<\/p>\n<\/li>\n<li>\nUpdating UI based on external data sources.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nForgetting the empty dependency array, causing infinite fetch loops.<\/p>\n<\/li>\n<li>\nNot handling error states, leading to broken UI.<\/p>\n<\/li>\n<li>\nUpdating state after the component has unmounted.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nAlways handle errors gracefully.<\/p>\n<\/li>\n<li>\nCancel or clean up requests when the component unmounts.<\/p>\n<\/li>\n<li>\nUse loading states to inform users while data is being fetched.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how you would fetch data in a functional component.<\/p>\n<\/li>\n<li>\nAsked how to avoid memory leaks in components.<\/p>\n<\/li>\n<li>\nAsked how to manage loading and error states.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-server-side-rendering-of-react-applications-and-its-benefits--rendering--performance--intermediate\">37. Explain server-side rendering of React applications and its benefits<\/strong> | Rendering \/ Performance | Intermediate<\/h3>\nServer-side rendering (SSR) refers to rendering React components on the server and sending fully rendered HTML to the client.<\/p>\nExplanation:<\/strong><\/p>\nNormally, React applications are client-rendered, where JavaScript loads and renders the UI after the page has loaded. With SSR, the server pre-renders the page into HTML, improving performance and SEO.<\/p>\nAfter the initial HTML is sent to the browser, React takes over with hydration, attaching event listeners and enabling interactivity.<\/p>\nBenefits:<\/strong><\/p>\n<ol>\n<li>\nImproved SEO:<\/strong> Search engines can index content from the initial HTML.<\/p>\n<\/li>\n<li>\nFaster load times:<\/strong> Users see content faster since it\u2019s rendered on the server.<\/p>\n<\/li>\n<li>\nBetter performance on slow devices:<\/strong> Less JavaScript processing is required on the client.<\/p>\n<\/li>\n<\/ol>\nHow SSR works:<\/strong><\/p>\n<ol>\n<li>\nServer renders components into static HTML.<\/p>\n<\/li>\n<li>\nHTML is sent to the client.<\/p>\n<\/li>\n<li>\nReact hydrates the page, making it interactive.<\/p>\n<\/li>\n<\/ol>\nExample using Next.js:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">\/\/ pages\/index.js<\/span>\nexport<\/span> async<\/span> function<\/span> getServerSideProps<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> res =<\/span> await<\/span> fetch<\/span>(<\/span>'https:\/\/api.example.com\/data'<\/span>)<\/span>;<\/span>\n const<\/span> data =<\/span> await<\/span> res.<\/span>json<\/span>(<\/span>)<\/span>;<\/span>\n return<\/span> {<\/span> props:<\/span> {<\/span> data }<\/span> }<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>{<\/span> data }<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>div><\/span>Data:<\/span> {<\/span>JSON.<\/span>stringify<\/span>(<\/span>data)<\/span>}<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, <code>getServerSideProps<\/code> fetches data during each request on the server.<\/p>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nFetching data incorrectly without server context.<\/p>\n<\/li>\n<li>\nRendering components that rely on browser-specific APIs without checks.<\/p>\n<\/li>\n<li>\nNot using caching strategies, causing slow responses.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nHandle browser-only code using feature detection or lifecycle checks.<\/p>\n<\/li>\n<li>\nCache frequently requested data where possible.<\/p>\n<\/li>\n<li>\nUse frameworks like Next.js that provide built-in SSR support.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked why SEO is a problem with client-side rendering.<\/p>\n<\/li>\n<li>\nAsked how you would implement SSR in your app.<\/p>\n<\/li>\n<li>\nAsked to compare SSR vs static generation.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-static-generation-of-react-applications-and-its-benefits--rendering--performance--intermediate\">38. Explain static generation of React applications and its benefits<\/strong> | Rendering \/ Performance | Intermediate<\/h3>\nStatic generation refers to pre-rendering pages at build time rather than on each request, delivering optimized HTML files.<\/p>\nExplanation:<\/strong><\/p>\nStatic generation builds the pages ahead of time into HTML files that can be served quickly, often from a CDN. It\u2019s suitable for pages that don\u2019t change frequently and helps achieve fast load times and better SEO.<\/p>\nFrameworks like Next.js allow developers to generate static pages easily with functions like <code>getStaticProps<\/code>.<\/p>\nBenefits:<\/strong><\/p>\n<ol>\n<li>\nBlazing fast load times:<\/strong> Pages are served without runtime data fetching.<\/p>\n<\/li>\n<li>\nSEO-friendly content:<\/strong> Search engines see the full content without JavaScript execution.<\/p>\n<\/li>\n<li>\nLower server load:<\/strong> Pages are generated at build time.<\/p>\n<\/li>\n<\/ol>\nHow it works:<\/strong><\/p>\n<ol>\n<li>\nAt build time, data is fetched and pages are pre-rendered.<\/p>\n<\/li>\n<li>\nThe static files are deployed to servers or CDNs.<\/p>\n<\/li>\n<li>\nClients receive ready-to-render HTML.<\/p>\n<\/li>\n<\/ol>\nExample with Next.js:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">\/\/ pages\/index.js<\/span>\nexport<\/span> async<\/span> function<\/span> getStaticProps<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> res =<\/span> await<\/span> fetch<\/span>(<\/span>'https:\/\/api.example.com\/data'<\/span>)<\/span>;<\/span>\n const<\/span> data =<\/span> await<\/span> res.<\/span>json<\/span>(<\/span>)<\/span>;<\/span>\n return<\/span> {<\/span> props:<\/span> {<\/span> data }<\/span> }<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>{<\/span> data }<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>div><\/span>Data:<\/span> {<\/span>JSON.<\/span>stringify<\/span>(<\/span>data)<\/span>}<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nThe data is fetched during the build process.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nMarketing pages, blogs, documentation sites.<\/p>\n<\/li>\n<li>\nPages with infrequent content updates.<\/p>\n<\/li>\n<li>\nSites aiming for performance and SEO improvements.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nUsing static generation for highly dynamic pages.<\/p>\n<\/li>\n<li>\nNot implementing incremental regeneration when needed.<\/p>\n<\/li>\n<li>\nFailing to handle API errors at build time.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse static generation where data rarely changes.<\/p>\n<\/li>\n<li>\nCombine with incremental static regeneration for freshness.<\/p>\n<\/li>\n<li>\nOptimize API calls to reduce build time.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to optimize page load times.<\/p>\n<\/li>\n<li>\nAsked the difference between SSR and static generation.<\/p>\n<\/li>\n<li>\nAsked when to prefer static generation over SSR.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-the-presentational-vs-container-component-pattern-in-react--component-architecture--intermediate\">39. Explain the presentational vs container component pattern in React<\/strong> | Component Architecture | Intermediate<\/h3>\nThis pattern helps separate concerns by distinguishing between components responsible for UI and those responsible for logic and state.<\/p>\nExplanation:<\/strong><\/p>\n<ul>\n<li>\nPresentational components:<\/strong> Focus on how the UI looks. They receive data and callbacks via props and have little to no state.<\/p>\n<\/li>\n<li>\nContainer components:<\/strong> Focus on how the application works. They manage state, data fetching, and logic, and pass props to presentational components.<\/p>\n<\/li>\n<\/ul>\nThis separation makes code more reusable, testable, and maintainable.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">\/\/ Presentational component<\/span>\nfunction<\/span> UserList<\/span>(<\/span>{<\/span> users }<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>ul><\/span>\n {<\/span>users.<\/span>map<\/span>(<\/span>(<\/span>user)<\/span> =><\/span> (<\/span>\n <<\/span>li key=<\/span>{<\/span>user.<\/span>id}<\/span>><\/span>{<\/span>user.<\/span>name}<\/span><<\/span>\/<\/span>li><\/span>\n )<\/span>)<\/span>}<\/span>\n <<\/span>\/<\/span>ul><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\n\/\/ Container component<\/span>\nfunction<\/span> UserContainer<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>users,<\/span> setUsers]<\/span> =<\/span> useState<\/span>(<\/span>[<\/span>]<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n fetch<\/span>(<\/span>'\/api\/users'<\/span>)<\/span>\n .<\/span>then<\/span>(<\/span>(<\/span>res)<\/span> =><\/span> res.<\/span>json<\/span>(<\/span>)<\/span>)<\/span>\n .<\/span>then<\/span>(<\/span>(<\/span>data)<\/span> =><\/span> setUsers<\/span>(<\/span>data)<\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>UserList users=<\/span>{<\/span>users}<\/span> \/<\/span>><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, <code>UserList<\/code> only renders the UI, while <code>UserContainer<\/code> handles fetching data.<\/p>\nBenefits:<\/strong><\/p>\n<ol>\n<li>\nClear separation of UI and logic.<\/p>\n<\/li>\n<li>\nReusable and easily testable components.<\/p>\n<\/li>\n<li>\nEncourages a modular and scalable architecture.<\/p>\n<\/li>\n<\/ol>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nMixing state logic into presentational components.<\/p>\n<\/li>\n<li>\nOverusing containers, making code harder to navigate.<\/p>\n<\/li>\n<li>\nIgnoring prop drilling when it\u2019s unnecessary.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nKeep presentational components stateless where possible.<\/p>\n<\/li>\n<li>\nMove logic to containers for better readability.<\/p>\n<\/li>\n<li>\nUse hooks to manage side effects in containers.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how you structure components in a large project.<\/p>\n<\/li>\n<li>\nAsked how you make components reusable.<\/p>\n<\/li>\n<li>\nAsked to explain separation of concerns in React.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-some-common-pitfalls-when-doing-data-fetching-in-react--data-fetching--error-handling--intermediate\">40. What are some common pitfalls when doing data fetching in React?<\/strong> | Data Fetching \/ Error Handling | Intermediate<\/h3>\nData fetching can lead to various issues if not handled correctly, impacting performance, usability, or causing bugs.<\/p>\nExplanation:<\/strong><\/p>\nWhile fetching data in React is straightforward, developers often overlook edge cases like race conditions, memory leaks, or improper error handling. Recognizing and avoiding these pitfalls ensures robust and performant applications.<\/p>\nCommon pitfalls:<\/strong><\/p>\n<ol>\n<li>\nNot handling loading and error states:<\/strong> \nUsers might see incomplete or broken interfaces.<\/p>\n<\/li>\n<li>\nIgnoring cleanup of subscriptions:<\/strong> \nLeads to memory leaks when components unmount before the fetch completes.<\/p>\n<\/li>\n<li>\nInfinite loops in <code>useEffect<\/code>:<\/strong> \nCaused by missing dependency arrays or including unstable references.<\/p>\n<\/li>\n<li>\nDirectly mutating state:<\/strong> \nReact won\u2019t track changes if state is updated improperly.<\/p>\n<\/li>\n<li>\nUsing stale closures:<\/strong> \nFunctions capturing outdated state can lead to unexpected results.<\/p>\n<\/li>\n<\/ol>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse proper dependency arrays in <code>useEffect<\/code>.<\/p>\n<\/li>\n<li>\nUse <code>AbortController<\/code> to cancel fetch requests on unmount.<\/p>\n<\/li>\n<li>\nHandle loading and error states explicitly.<\/p>\n<\/li>\n<li>\nAvoid updating state after a component unmounts.<\/p>\n<\/li>\n<li>\nStructure data fetching logic using custom hooks.<\/p>\n<\/li>\n<\/ul>\nExample with cleanup:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">import<\/span> React,<\/span> {<\/span> useState,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> DataComponent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>data,<\/span> setData]<\/span> =<\/span> useState<\/span>(<\/span>null<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>loading,<\/span> setLoading]<\/span> =<\/span> useState<\/span>(<\/span>true<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n const<\/span> controller =<\/span> new<\/span> AbortController<\/span>(<\/span>)<\/span>;<\/span>\n\n fetch<\/span>(<\/span>'\/api\/data'<\/span>,<\/span> {<\/span> signal:<\/span> controller.<\/span>signal }<\/span>)<\/span>\n .<\/span>then<\/span>(<\/span>(<\/span>res)<\/span> =><\/span> res.<\/span>json<\/span>(<\/span>)<\/span>)<\/span>\n .<\/span>then<\/span>(<\/span>(<\/span>data)<\/span> =><\/span> {<\/span>\n setData<\/span>(<\/span>data)<\/span>;<\/span>\n setLoading<\/span>(<\/span>false<\/span>)<\/span>;<\/span>\n }<\/span>)<\/span>\n .<\/span>catch<\/span>(<\/span>(<\/span>err)<\/span> =><\/span> {<\/span>\n if<\/span> (<\/span>err.<\/span>name !==<\/span> 'AbortError'<\/span>)<\/span> {<\/span>\n console.<\/span>error<\/span>(<\/span>'Fetch error:'<\/span>,<\/span> err)<\/span>;<\/span>\n }<\/span>\n }<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>)<\/span> =><\/span> controller.<\/span>abort<\/span>(<\/span>)<\/span>;<\/span> \/\/ Cleanup on unmount<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n if<\/span> (<\/span>loading)<\/span> return<\/span> <<\/span>div><\/span>Loading...<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n return<\/span> <<\/span>div><\/span>{<\/span>JSON.<\/span>stringify<\/span>(<\/span>data)<\/span>}<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to prevent memory leaks.<\/p>\n<\/li>\n<li>\nAsked how to handle component unmounting during data fetches.<\/p>\n<\/li>\n<li>\nAsked to explain error handling strategies.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-role-of-keys-in-react-lists-and-why-are-they-important--rendering--lists--beginner\">41. What is the role of keys in React lists and why are they important?<\/strong> | Rendering \/ Lists | Beginner<\/h3>\nKeys help React identify which items have changed, been added, or removed when rendering lists.<\/p>\nExplanation:<\/strong><\/p>\nWhen rendering lists in React, each element needs a unique <code>key<\/code> so that React can efficiently update only the parts that have changed. Without keys, React will re-render the entire list unnecessarily, causing performance issues and potentially leading to UI bugs.<\/p>\nHow it works:<\/strong><\/p>\n<ul>\n<li>\nKeys are used by React\u2019s reconciliation algorithm to match elements between renders.<\/p>\n<\/li>\n<li>\nIf keys change or are missing, React may reuse incorrect elements, leading to unexpected behavior.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> items =<\/span> [<\/span>'Apple'<\/span>,<\/span> 'Banana'<\/span>,<\/span> 'Cherry'<\/span>]<\/span>;<\/span>\n\nfunction<\/span> ItemList<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>ul<\/span>><\/span><\/span>\n {<\/span>items.<\/span>map<\/span>(<\/span>(<\/span>item,<\/span> index)<\/span> =><\/span> (<\/span>\n <<\/span>li<\/span> key<\/span>=<\/span>{<\/span>item}<\/span><\/span>><\/span><\/span>{<\/span>item}<\/span><\/<\/span>li<\/span>><\/span><\/span>\n )<\/span>)<\/span>}<\/span>\n <\/<\/span>ul<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, <code>item<\/code> is used as the key because it\u2019s unique for each list element.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nRendering dynamic lists like menus, tables, or grids.<\/p>\n<\/li>\n<li>\nHandling updates where items are added or removed.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid<\/strong><\/p>\n<ul>\n<li>\nUsing array index as key in dynamic lists \u2014 this can cause incorrect updates.<\/p>\n<\/li>\n<li>\nNot using unique keys, leading to bugs in animations or state management.<\/p>\n<\/li>\n<li>\nChanging keys unnecessarily, causing components to unmount and remount.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse stable, unique IDs as keys.<\/p>\n<\/li>\n<li>\nAvoid using array indices if the list can change.<\/p>\n<\/li>\n<li>\nEnsure keys remain consistent between renders.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how React optimizes list rendering.<\/p>\n<\/li>\n<li>\nAsked why using index as a key can cause issues.<\/p>\n<\/li>\n<li>\nAsked how to handle updates in large lists.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-fragments-in-react-and-why-are-they-useful--rendering--jsx--beginner\">42. What are fragments in React and why are they useful?<\/strong> | Rendering \/ JSX | Beginner<\/h3>\nFragments let you group multiple elements without adding extra nodes to the DOM.<\/p>\nExplanation:<\/strong><\/p>\nIn React, a component must return a single element. Sometimes you need to group elements without introducing unnecessary markup, like extra <code><div><\/code>s that clutter the HTML structure. React fragments solve this by allowing you to wrap elements without adding new DOM nodes.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Table<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>><\/span>\n <<\/span>tr<\/span>><\/span><\/span>\n <<\/span>td<\/span>><\/span><\/span>Row 1<\/span>,<\/span> Cell 1<\/span><\/<\/span>td<\/span>><\/span><\/span>\n <<\/span>td<\/span>><\/span><\/span>Row 1<\/span>,<\/span> Cell 2<\/span><\/<\/span>td<\/span>><\/span><\/span>\n <\/<\/span>tr<\/span>><\/span><\/span>\n <<\/span>tr<\/span>><\/span><\/span>\n <<\/span>td<\/span>><\/span><\/span>Row 2<\/span>,<\/span> Cell 1<\/span><\/<\/span>td<\/span>><\/span><\/span>\n <<\/span>td<\/span>><\/span><\/span>Row 2<\/span>,<\/span> Cell 2<\/span><\/<\/span>td<\/span>><\/span><\/span>\n <\/<\/span>tr<\/span>><\/span><\/span>\n <<\/span>\/<\/span>><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nThis example groups multiple rows without adding an extra wrapper.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nReturning multiple elements from a component.<\/p>\n<\/li>\n<li>\nAvoiding unnecessary DOM nodes.<\/p>\n<\/li>\n<li>\nGrouping elements inside lists or table rows.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nAdding unnecessary wrapper elements and complicating styling.<\/p>\n<\/li>\n<li>\nForgetting that fragments don\u2019t create actual DOM elements, which might affect selectors or CSS.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse <code><>...<\/><\/code> syntax for simpler code.<\/p>\n<\/li>\n<li>\nUse <code><React.Fragment><\/code> when keys are needed for lists.<\/p>\n<\/li>\n<li>\nAvoid over-wrapping content unnecessarily.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to return multiple elements from a component.<\/p>\n<\/li>\n<li>\nAsked how to avoid unnecessary markup in the DOM.<\/p>\n<\/li>\n<li>\nAsked about performance implications of extra DOM nodes.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-controlled-and-uncontrolled-components-in-react--forms--state--intermediate\">43. What are controlled and uncontrolled components in React?<\/strong> | Forms \/ State | Intermediate<\/h3>\nControlled components have their state managed by React, while uncontrolled components manage their own state internally.<\/p>\nExplanation:<\/strong><\/p>\n<ul>\n<li>\nControlled components:<\/strong> The value of the input is controlled via React\u2019s state. The component\u2019s data is always in sync with the state.<\/p>\n<\/li>\n<li>\nUncontrolled components:<\/strong> The input\u2019s value is handled by the DOM itself, and React accesses it using refs when needed.<\/p>\n<\/li>\n<\/ul>\nExample of a controlled component:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> ControlledInput<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>value,<\/span> setValue]<\/span> =<\/span> React.<\/span>useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>input<\/span>\n type<\/span>=<\/span>\"<\/span>text\"<\/span><\/span>\n value<\/span>=<\/span>{<\/span>value}<\/span><\/span>\n onChange<\/span>=<\/span>{<\/span>(<\/span>e)<\/span> =><\/span> setValue<\/span>(<\/span>e.<\/span>target.<\/span>value)<\/span>}<\/span><\/span>\n \/><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nExample of an uncontrolled component:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> UncontrolledInput<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> inputRef =<\/span> React.<\/span>useRef<\/span>(<\/span>)<\/span>;<\/span>\n\n const<\/span> handleSubmit<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n alert<\/span>(<\/span>'Input value: '<\/span> +<\/span> inputRef.<\/span>current.<\/span>value)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>input<\/span> type<\/span>=<\/span>\"<\/span>text\"<\/span><\/span> ref<\/span>=<\/span>{<\/span>inputRef}<\/span><\/span> \/><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>handleSubmit}<\/span><\/span>><\/span><\/span>Submit<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nControlled: When you need to validate input, manage forms, or synchronize state.<\/p>\n<\/li>\n<li>\nUncontrolled: When simple forms or quick prototypes don\u2019t need state syncing.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nMixing controlled and uncontrolled logic in the same form.<\/p>\n<\/li>\n<li>\nForgetting to update state in controlled components, causing stale inputs.<\/p>\n<\/li>\n<li>\nOverusing uncontrolled components in complex forms.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse controlled components for forms with validation or interactions.<\/p>\n<\/li>\n<li>\nUse uncontrolled components for simpler cases.<\/p>\n<\/li>\n<li>\nKeep form logic centralized and testable.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to manage form inputs in React.<\/p>\n<\/li>\n<li>\nAsked when to use refs vs state.<\/p>\n<\/li>\n<li>\nAsked to explain the differences and trade-offs between the two.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-the-use-of-the-context-api-in-react--state-management--intermediate\">44. Explain the use of the Context API in React<\/strong> | State Management | Intermediate<\/h3>\nThe Context API provides a way to share state across the component tree without passing props through every level.<\/p>\nExplanation:<\/strong><\/p>\nReact\u2019s Context API allows data to be passed globally through the component hierarchy, making it useful for themes, user data, or settings that multiple components need to access.<\/p>\nIt helps avoid \u201cprop drilling,\u201d where props are passed through many intermediate components unnecessarily.<\/p>\nSteps to use Context:<\/strong><\/p>\n<ol>\n<li>\nCreate a context.<\/p>\n<\/li>\n<li>\nWrap components with a provider.<\/p>\n<\/li>\n<li>\nUse the context in child components via <code>useContext<\/code>.<\/p>\n<\/li>\n<\/ol>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> createContext,<\/span> useContext,<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> ThemeContext =<\/span> createContext<\/span>(<\/span>)<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>theme,<\/span> setTheme]<\/span> =<\/span> useState<\/span>(<\/span>'light'<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>ThemeContext.Provider<\/span> value<\/span>=<\/span>{<\/span>{<\/span> theme,<\/span> setTheme }<\/span>}<\/span><\/span>><\/span><\/span>\n <<\/span>Toolbar<\/span> \/><\/span><\/span>\n <\/<\/span>ThemeContext.Provider<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> Toolbar<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>ThemedButton<\/span> \/><\/span><\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> ThemedButton<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> {<\/span> theme }<\/span> =<\/span> useContext<\/span>(<\/span>ThemeContext)<\/span>;<\/span>\n return<\/span> <<\/span>button<\/span>><\/span><\/span>{<\/span>`Current theme: <\/span>${<\/span>theme}<\/span><\/span>`<\/span><\/span>}<\/span><\/<\/span>button<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nSharing data like themes, authentication, or settings.<\/p>\n<\/li>\n<li>\nAvoiding excessive prop passing.<\/p>\n<\/li>\n<li>\nManaging global state in smaller applications.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nUsing context for frequently changing data, causing unnecessary rerenders.<\/p>\n<\/li>\n<li>\nOverusing context when local state would suffice.<\/p>\n<\/li>\n<li>\nNot memoizing context values.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nSeparate concerns into multiple contexts if needed.<\/p>\n<\/li>\n<li>\nMemoize context values with <code>useMemo<\/code>.<\/p>\n<\/li>\n<li>\nAvoid heavy computations inside context providers.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to avoid prop drilling.<\/p>\n<\/li>\n<li>\nAsked how you would share data across unrelated components.<\/p>\n<\/li>\n<li>\nAsked to explain when to use context vs Redux.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-react-hooks-and-why-were-they-introduced--core-concepts--beginner\">45. What are React hooks and why were they introduced?<\/strong> | Core Concepts | Beginner<\/h3>\nHooks are functions that let you use React features like state and lifecycle methods in functional components.<\/p>\nExplanation:<\/strong><\/p>\nBefore hooks, state and lifecycle logic could only be used in class components. Hooks were introduced to enable functional components to manage state, side effects, and other behaviors without the complexity of classes.<\/p>\nThis simplified code, improved reuse, and aligned better with JavaScript functions.<\/p>\nPopular hooks:<\/strong><\/p>\n<ul>\n<li>\n<code>useState<\/code>: Manage state in functional components.<\/p>\n<\/li>\n<li>\n<code>useEffect<\/code>: Handle side effects like data fetching or subscriptions.<\/p>\n<\/li>\n<li>\n<code>useContext<\/code>: Access global data.<\/p>\n<\/li>\n<li>\n<code>useRef<\/code>: Persist mutable values or DOM references.<\/p>\n<\/li>\n<li>\n<code>useReducer<\/code>: Manage complex state logic.<\/p>\n<\/li>\n<\/ul>\nExample using <code>useState<\/code>:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Counter<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>p<\/span>><\/span><\/span>{<\/span>`Count: <\/span>${<\/span>count}<\/span><\/span>`<\/span><\/span>}<\/span><\/<\/span>p<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhy hooks were introduced:<\/strong><\/p>\n<ol>\n<li>\nAvoid class-based complexity.<\/p>\n<\/li>\n<li>\nReuse logic across components via custom hooks.<\/p>\n<\/li>\n<li>\nSimplify stateful logic in functional components.<\/p>\n<\/li>\n<li>\nImprove readability and testability.<\/p>\n<\/li>\n<\/ol>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nCalling hooks conditionally or inside loops.<\/p>\n<\/li>\n<li>\nForgetting to follow the rules of hooks.<\/p>\n<\/li>\n<li>\nNot understanding dependency arrays in <code>useEffect<\/code>.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nAlways call hooks at the top level of the component.<\/p>\n<\/li>\n<li>\nUse custom hooks to extract shared logic.<\/p>\n<\/li>\n<li>\nUse dependency arrays carefully and intentionally.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked why hooks are preferred over class components.<\/p>\n<\/li>\n<li>\nAsked how you would refactor class logic into hooks.<\/p>\n<\/li>\n<li>\nAsked to explain rules and restrictions when using hooks.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-does-the-virtual-dom-in-react-work-what-are-its-benefits-and-downsides--rendering--performance--intermediate\">46. How does the virtual DOM in React work? What are its benefits and downsides?<\/strong> | Rendering \/ Performance | Intermediate<\/h3>\nThe virtual DOM is a lightweight copy of the actual DOM that helps React efficiently update the UI by comparing changes before applying them to the real DOM.<\/p>\nExplanation:<\/strong><\/p>\nWhen the state or props of a component change, React doesn\u2019t update the actual DOM immediately. Instead, it creates a virtual representation of the DOM, compares it with the previous version, and identifies what\u2019s different. This process, known as \u201cdiffing\u201d or \u201creconciliation,\u201d allows React to update only the necessary parts, improving performance.<\/p>\nSteps in virtual DOM:<\/strong><\/p>\n<ol>\n<li>\nA state or prop change triggers a re-render.<\/p>\n<\/li>\n<li>\nA new virtual DOM tree is created based on the updated component.<\/p>\n<\/li>\n<li>\nThe new virtual DOM is compared with the previous version.<\/p>\n<\/li>\n<li>\nDifferences are calculated.<\/p>\n<\/li>\n<li>\nOnly the changed parts are updated in the actual DOM.<\/p>\n<\/li>\n<\/ol>\nBenefits:<\/strong><\/p>\n<ul>\n<li>\nImproved performance:<\/strong> Minimizes direct DOM manipulations which are expensive.<\/p>\n<\/li>\n<li>\nDeclarative UI:<\/strong> Developers only describe how the UI should look.<\/p>\n<\/li>\n<li>\nPredictability:<\/strong> Updates are applied systematically, reducing bugs.<\/p>\n<\/li>\n<\/ul>\nDownsides:<\/strong><\/p>\n<ul>\n<li>\nOverhead:<\/strong> Creating and comparing virtual DOM trees adds computational work.<\/p>\n<\/li>\n<li>\nNot always faster:<\/strong> For very simple or static applications, virtual DOM may not offer significant benefits.<\/p>\n<\/li>\n<li>\nRequires understanding:<\/strong> Misusing state updates or improper patterns can negate performance advantages.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> Counter<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> React.<\/span>useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>p<\/span>><\/span><\/span>{<\/span>`Count: <\/span>${<\/span>count}<\/span><\/span>`<\/span><\/span>}<\/span><\/<\/span>p<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, React compares the old and new virtual DOM before updating the count.<\/p>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nAssuming virtual DOM optimizations always make the app faster.<\/p>\n<\/li>\n<li>\nUpdating state too frequently without batching.<\/p>\n<\/li>\n<li>\nNot structuring components efficiently, causing unnecessary renders.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nBreak the UI into small, reusable components.<\/p>\n<\/li>\n<li>\nAvoid unnecessary state changes.<\/p>\n<\/li>\n<li>\nUse tools like React DevTools to inspect renders.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how React optimizes rendering.<\/p>\n<\/li>\n<li>\nAsked why manipulating the DOM directly is discouraged.<\/p>\n<\/li>\n<li>\nAsked about the difference between virtual DOM and real DOM updates.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach--architecture--performance--advanced\">47. What is React Fiber and how is it an improvement over the previous approach?<\/strong> | Architecture \/ Performance | Advanced<\/h3>\nReact Fiber is a reimplementation of React\u2019s core algorithm that improves rendering performance and flexibility by allowing incremental rendering and better prioritization.<\/p>\nExplanation:<\/strong><\/p>\nBefore React 16, React used a stack-based algorithm that couldn\u2019t pause or resume rendering tasks. React Fiber introduced a new approach that breaks rendering into small units of work, enabling React to handle animations, gestures, and large trees more efficiently.<\/p>\nKey improvements:<\/strong><\/p>\n<ul>\n<li>\nIncremental rendering:<\/strong> Large updates are split into smaller tasks that can be paused and resumed.<\/p>\n<\/li>\n<li>\nPrioritization:<\/strong> Updates like animations can be given higher priority, while less important tasks are deferred.<\/p>\n<\/li>\n<li>\nError boundaries and suspense:<\/strong> Fiber makes it possible to handle errors and load states gracefully.<\/p>\n<\/li>\n<li>\nTime slicing:<\/strong> React can now schedule work during idle time, improving responsiveness.<\/p>\n<\/li>\n<\/ul>\nExample use cases:<\/strong><\/p>\n<ul>\n<li>\nComplex animations with smooth transitions.<\/p>\n<\/li>\n<li>\nHandling asynchronous operations in large applications.<\/p>\n<\/li>\n<li>\nGraceful error recovery without crashing the entire app.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nAssuming Fiber changes how you write React code\u2014it\u2019s under the hood.<\/p>\n<\/li>\n<li>\nIgnoring performance implications when managing state updates.<\/p>\n<\/li>\n<li>\nNot optimizing component structure to take advantage of Fiber\u2019s scheduling.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse <code>React.Suspense<\/code> and <code>lazy<\/code> to manage code splitting.<\/p>\n<\/li>\n<li>\nAvoid blocking the main thread with heavy computations.<\/p>\n<\/li>\n<li>\nStructure components to minimize unnecessary re-rendering.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked why React 16 was a major upgrade.<\/p>\n<\/li>\n<li>\nAsked about performance optimizations and rendering interruptions.<\/p>\n<\/li>\n<li>\nAsked to explain how React handles animations and UI responsiveness.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-reconciliation-in-react--rendering--performance--intermediate\">48. What is reconciliation in React?<\/strong> | Rendering \/ Performance | Intermediate<\/h3>\nReconciliation is the process by which React compares two versions of the virtual DOM and updates the actual DOM efficiently.<\/p>\nExplanation:<\/strong><\/p>\nWhen state or props change, React generates a new virtual DOM. It then compares the new tree with the previous one and determines the minimal set of changes required to update the actual DOM. This comparison process is called reconciliation.<\/p>\nHow it works:<\/strong><\/p>\n<ol>\n<li>\nReact receives new state or props.<\/p>\n<\/li>\n<li>\nA new virtual DOM tree is created.<\/p>\n<\/li>\n<li>\nThe new tree is compared with the old one.<\/p>\n<\/li>\n<li>\nDifferences are identified.<\/p>\n<\/li>\n<li>\nOnly the changed elements are updated in the real DOM.<\/p>\n<\/li>\n<\/ol>\nExample scenario:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n<<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Click me<\/<\/span>button<\/span>><\/span><\/span>\n<\/code><\/pre>\nWhen <code>setCount<\/code> is triggered, React compares the previous count value and updates the text without re-rendering the entire tree.<\/p>\nBenefits:<\/strong><\/p>\n<ul>\n<li>\nAvoids unnecessary DOM updates.<\/p>\n<\/li>\n<li>\nImproves app performance.<\/p>\n<\/li>\n<li>\nMakes UI updates predictable.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nAssuming reconciliation always prevents performance issues.<\/p>\n<\/li>\n<li>\nUsing improper keys that confuse the algorithm.<\/p>\n<\/li>\n<li>\nNot understanding how deep component trees affect performance.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse keys correctly to guide reconciliation.<\/p>\n<\/li>\n<li>\nStructure components to localize state changes.<\/p>\n<\/li>\n<li>\nAvoid complex data structures that complicate diffing.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how React decides which elements to update.<\/p>\n<\/li>\n<li>\nAsked why keys are important during updates.<\/p>\n<\/li>\n<li>\nAsked about performance implications in dynamic lists.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-react-suspense-and-what-does-it-enable--async-handling--performance--advanced\">49. What is React Suspense and what does it enable?<\/strong> | Async Handling \/ Performance | Advanced<\/h3>\nReact Suspense is a feature that allows you to handle asynchronous operations like data fetching or code splitting by showing fallback content while waiting for a resource.<\/p>\nExplanation:<\/strong><\/p>\nSuspense helps manage asynchronous dependencies declaratively by letting React \u201cwait\u201d until the data or code is ready before rendering the component. This makes it easier to coordinate loading states across multiple components.<\/p>\nCore concepts:<\/strong><\/p>\n<ul>\n<li>\nWrap components with <code>React.Suspense<\/code>.<\/p>\n<\/li>\n<li>\nProvide a fallback UI while waiting.<\/p>\n<\/li>\n<li>\nCombine with <code>React.lazy<\/code> or data-fetching libraries.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> LazyComponent =<\/span> React.<\/span>lazy<\/span>(<\/span>(<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'.\/LazyComponent'<\/span>)<\/span>)<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>React.Suspense<\/span> fallback={<div<\/span>><\/span><\/span>Loading...<\/span><\/<\/span>div<\/span>><\/span><\/span>}<\/span>><\/span>\n <<\/span>LazyComponent<\/span> \/><\/span><\/span>\n <\/<\/span>React.Suspense<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, <code>LazyComponent<\/code> is loaded asynchronously, and \u201cLoading\u2026\u201d is displayed until it\u2019s ready.<\/p>\nUse cases:<\/strong><\/p>\n<ul>\n<li>\nCode splitting to load components on demand.<\/p>\n<\/li>\n<li>\nHandling slow data fetching in UI without showing blank states.<\/p>\n<\/li>\n<li>\nCoordinating multiple async operations in a unified way.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nNot wrapping lazy-loaded components inside <code>Suspense<\/code>.<\/p>\n<\/li>\n<li>\nProviding overly complex fallback UIs that confuse users.<\/p>\n<\/li>\n<li>\nMixing Suspense with non-compatible libraries.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse simple and user-friendly fallback UIs.<\/p>\n<\/li>\n<li>\nCombine with error boundaries to gracefully handle load failures.<\/p>\n<\/li>\n<li>\nApply Suspense only to parts of the UI that need it.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how you would improve user experience during data loading.<\/p>\n<\/li>\n<li>\nAsked to explain code splitting and how Suspense helps.<\/p>\n<\/li>\n<li>\nAsked how to handle fallback states without disrupting the main UI.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-what-happens-when-the-usestate-setter-function-is-called-in-react--state-management--hooks--intermediate\">50. Explain what happens when the <code>useState<\/code> setter function is called in React<\/strong> | State Management \/ Hooks | Intermediate<\/h3>\nThe <code>useState<\/code> setter schedules a state update, queues a re-render, and applies changes asynchronously.<\/p>\nExplanation:<\/strong><\/p>\nWhen you call the setter function returned by <code>useState<\/code>, React schedules the state change and triggers a re-render of the component with the updated state. React batches multiple state updates for better performance and applies them before the next paint.<\/p>\nDetailed process:<\/strong><\/p>\n<ol>\n<li>\nThe setter is called with a new state or function.<\/p>\n<\/li>\n<li>\nReact queues the update.<\/p>\n<\/li>\n<li>\nDuring the next render phase, React updates the component\u2019s state.<\/p>\n<\/li>\n<li>\nReact reconciles the virtual DOM and applies changes to the real DOM.<\/p>\n<\/li>\n<li>\nThe UI reflects the new state.<\/p>\n<\/li>\n<\/ol>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> Counter<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n const<\/span> increment<\/span> =<\/span> (<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>prev =><\/span> prev +<\/span> 1<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>p<\/span>><\/span><\/span>{<\/span>`Count: <\/span>${<\/span>count}<\/span><\/span>`<\/span><\/span>}<\/span><\/<\/span>p<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>increment}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, <code>setCount<\/code> schedules the state change based on the previous state.<\/p>\nWhy the functional form is important:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">setCount<\/span>(<\/span>prevCount =><\/span> prevCount +<\/span> 1<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nThis ensures that you always update the state based on the latest value, especially when multiple updates are batched together.<\/p>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nUpdating state with a stale value by directly referencing it.<\/p>\n<\/li>\n<li>\nCalling the setter in loops without considering batching.<\/p>\n<\/li>\n<li>\nMisunderstanding that state updates are asynchronous.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse the functional update form when new state depends on the previous state.<\/p>\n<\/li>\n<li>\nAvoid unnecessary state updates that cause performance bottlenecks.<\/p>\n<\/li>\n<li>\nLeverage batching for efficiency.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked what happens internally when state is updated.<\/p>\n<\/li>\n<li>\nAsked why state updates may not reflect immediately.<\/p>\n<\/li>\n<li>\nAsked how to manage state changes depending on previous values.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-react.memo-and-usememo-when-would-you-use-each--performance-optimization--hooks--advanced\">51. What is the difference between <code>React.memo<\/code> and <code>useMemo<\/code>? When would you use each?<\/strong> | Performance Optimization \/ Hooks | Advanced<\/h3>\n<ul>\n<li>\n<code>React.memo<\/code> is a higher-order component<\/strong> that memoizes a React component<\/strong>, preventing it from re-rendering unless its props change.<\/p>\n<\/li>\n<li>\n<code>useMemo<\/code> is a hook<\/strong> that memoizes a computed value<\/strong> inside a component, so the value is only recalculated when its dependencies change.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useMemo }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> ExpensiveComponent =<\/span> React.<\/span>memo<\/span>(<\/span>(<\/span>{<\/span> data }<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Rendering ExpensiveComponent'<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>div<\/span>><\/span><\/span>{<\/span>data.<\/span>value}<\/span><\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>{<\/span> items }<\/span>)<\/span> {<\/span>\n const<\/span> computedValue =<\/span> useMemo<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n return<\/span> items.<\/span>reduce<\/span>(<\/span>(<\/span>acc,<\/span> item)<\/span> =><\/span> acc +<\/span> item.<\/span>value,<\/span> 0<\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>items]<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>ExpensiveComponent<\/span> data<\/span>=<\/span>{<\/span>{<\/span> value:<\/span> computedValue }<\/span>}<\/span><\/span> \/><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nKey points:<\/strong><\/p>\n<ul>\n<li>\nUse <code>React.memo<\/code> to optimize component rendering<\/strong>.<\/p>\n<\/li>\n<li>\nUse <code>useMemo<\/code> to optimize expensive calculations<\/strong> inside a component.<\/p>\n<\/li>\n<\/ul>\nCommon pitfalls:<\/strong><\/p>\n<ul>\n<li>\nOverusing memoization can increase memory usage<\/strong> without noticeable performance gain.<\/p>\n<\/li>\n<li>\n<code>React.memo<\/code> only does shallow comparison by default. For deep props, use a custom comparison function.<\/p>\n<\/li>\n<\/ul>\nSample interview scenario:<\/strong><\/p>\n<ul>\n<li>A candidate is asked to optimize a dashboard component that re-renders unnecessarily when unrelated state updates occur.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-does-react-handle-events-differently-from-native-dom-events--event-handling--intermediate\">52. How does React handle events differently from native DOM events?<\/strong> | Event Handling | Intermediate<\/h3>\n<ul>\n<li>\nReact uses a synthetic event system<\/strong> to normalize events across browsers.<\/p>\n<\/li>\n<li>\nSynthetic events are pooled<\/strong>, meaning React reuses them for performance, so the event object may be nullified after the callback finishes.<\/p>\n<\/li>\n<li>\nEvent delegation: React attaches a single listener at the root and delegates events to components, improving performance.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> Button<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> handleClick<\/span> =<\/span> (<\/span>e)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>e.<\/span>type)<\/span>;<\/span> \/\/ \"click\"<\/span>\n setTimeout<\/span>(<\/span>(<\/span>)<\/span> =><\/span> console.<\/span>log<\/span>(<\/span>e.<\/span>type)<\/span>,<\/span> 1000<\/span>)<\/span>;<\/span> \/\/ e may be null due to pooling<\/span>\n }<\/span>;<\/span>\n return<\/span> <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>handleClick}<\/span><\/span>><\/span><\/span>Click Me<\/<\/span>button<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nBest practices:<\/strong><\/p>\n<ul>\n<li>If you need to use the event asynchronously, call <code>e.persist()<\/code> to retain the event object.<\/li>\n<\/ul>\nInterview scenario:<\/strong><\/p>\n<ul>\n<li>Explaining why React\u2019s synthetic event system prevents browser inconsistencies or how to handle async events in React.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-react-reconciliation-in-detail.-how-does-react-decide-which-components-to-update--virtual-dom--reconciliation--advanced\">53. Explain React reconciliation in detail. How does React decide which components to update?<\/strong> | Virtual DOM \/ Reconciliation | Advanced<\/h3>\n<ul>\n<li>\nReconciliation<\/strong> is the process React uses to update the DOM efficiently.<\/p>\n<\/li>\n<li>\nReact compares the new virtual DOM<\/strong> with the previous virtual DOM<\/strong> (diffing) to determine the minimal set of changes.<\/p>\n<\/li>\n<li>\nRules:<\/p>\n<ul>\n<li>\nElements with different types<\/strong> are destroyed and recreated.<\/p>\n<\/li>\n<li>\nElements with the same type<\/strong> are updated with new props and children.<\/p>\n<\/li>\n<li>\nLists require keys<\/strong> to track items; without unique keys, React may re-render unnecessarily.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> items =<\/span> [<\/span>'a'<\/span>,<\/span> 'b'<\/span>,<\/span> 'c'<\/span>]<\/span>.<\/span>map<\/span>(<\/span>(<\/span>item)<\/span> =><\/span> <<\/span>li<\/span> key<\/span>=<\/span>{<\/span>item}<\/span><\/span>><\/span><\/span>{<\/span>item}<\/span><\/<\/span>li<\/span>><\/span><\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nPitfalls:<\/strong><\/p>\n<ul>\n<li>Using array indices as keys can cause incorrect updates<\/strong> when the list changes.<\/li>\n<\/ul>\nSample interview scenario:<\/strong><\/p>\n<ul>\n<li>Asked to explain why a component re-renders unnecessarily and how keys affect list rendering.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-\u201ctime-slicing\u201d-in-react-fiber-how-does-it-improve-performance--react-fiber--performance--advanced\">54. What is \u201ctime slicing\u201d in React Fiber? How does it improve performance?<\/strong> | React Fiber \/ Performance | Advanced<\/h3>\nExplanation:<\/strong><\/p>\n<ul>\n<li>\nTime slicing allows React to split rendering work into small chunks<\/strong>, so the main thread isn\u2019t blocked for long periods.<\/p>\n<\/li>\n<li>\nImproves UI responsiveness<\/strong>, especially for complex components or large trees.<\/p>\n<\/li>\n<li>\nReact can pause, yield, and resume work<\/strong>, making animations and input more fluid.<\/p>\n<\/li>\n<\/ul>\nExample Scenario:<\/strong><\/p>\n<ul>\n<li>A component with a heavy loop or multiple nested children may freeze the UI. With time slicing, React updates the UI in increments and keeps the app responsive.<\/li>\n<\/ul>\nInterview scenario:<\/strong><\/p>\n<ul>\n<li>Asked to optimize a React dashboard where large data tables cause janky scrolling.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-custom-hooks-can-you-show-an-example-of-when-to-use-one--hooks--state-management--intermediate\">55. What are custom hooks? Can you show an example of when to use one?<\/strong> | Hooks \/ State Management | Intermediate<\/h3>\nExplanation:<\/strong><\/p>\n<ul>\n<li>\nCustom hooks are reusable functions<\/strong> that use React hooks internally.<\/p>\n<\/li>\n<li>\nThey encapsulate stateful logic<\/strong> and can be shared across multiple components.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> useState,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> useFetch<\/span>(<\/span>url)<\/span> {<\/span>\n const<\/span> [<\/span>data,<\/span> setData]<\/span> =<\/span> useState<\/span>(<\/span>null<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>loading,<\/span> setLoading]<\/span> =<\/span> useState<\/span>(<\/span>true<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n async<\/span> function<\/span> fetchData<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> res =<\/span> await<\/span> fetch<\/span>(<\/span>url)<\/span>;<\/span>\n const<\/span> result =<\/span> await<\/span> res.<\/span>json<\/span>(<\/span>)<\/span>;<\/span>\n setData<\/span>(<\/span>result)<\/span>;<\/span>\n setLoading<\/span>(<\/span>false<\/span>)<\/span>;<\/span>\n }<\/span>\n fetchData<\/span>(<\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>url]<\/span>)<\/span>;<\/span>\n\n return<\/span> {<\/span> data,<\/span> loading }<\/span>;<\/span>\n}<\/span>\n\n\/\/ Usage<\/span>\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> {<\/span> data,<\/span> loading }<\/span> =<\/span> useFetch<\/span>(<\/span>'https:\/\/api.example.com\/data'<\/span>)<\/span>;<\/span>\n return<\/span> loading ?<\/span> <<\/span>p<\/span>><\/span><\/span>Loading...<\/span><\/<\/span>p<\/span>><\/span><\/span> :<\/span> <<\/span>pre<\/span>><\/span><\/span>{<\/span>JSON.<\/span>stringify<\/span>(<\/span>data)<\/span>}<\/span><\/<\/span>pre<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n\n<\/code><\/pre>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nPrefix with <code>use<\/code> to follow React convention.<\/p>\n<\/li>\n<li>\nKeep hooks focused; each custom hook should handle a single responsibility.<\/p>\n<\/li>\n<\/ul>\nInterview scenario:<\/strong><\/p>\n<ul>\n<li>Asked to abstract repeated fetching logic across multiple components in an interview.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-would-you-optimize-a-large-react-application-for-performance--performance--optimization--advanced\">56. How would you optimize a large React application for performance?<\/strong> | Performance \/ Optimization | Advanced<\/h3>\nPerformance optimization in React focuses on minimizing unnecessary re-renders<\/strong>, efficient state management<\/strong>, and code splitting<\/strong>. Key techniques include:<\/p>\n<ol>\n<li>\nMemoization<\/strong><\/p>\n<ul>\n<li>Use <code>React.memo<\/code> for components and <code>useMemo<\/code> or <code>useCallback<\/code> for values\/functions.<\/li>\n<\/ul>\n<\/li>\n<li>\nCode splitting \/ lazy loading<\/strong><\/p>\n<ul>\n<li>Dynamically load components with <code>React.lazy<\/code> and <code>Suspense<\/code>.<\/li>\n<\/ul>\n<\/li>\n<li>\nAvoid anonymous functions in render<\/strong><\/p>\n<ul>\n<li>Functions inside JSX re-create on each render, causing child re-renders.<\/li>\n<\/ul>\n<\/li>\n<li>\nVirtualization<\/strong><\/p>\n<ul>\n<li>For large lists, use libraries like <code>react-window<\/code> to render only visible items.<\/li>\n<\/ul>\n<\/li>\n<li>\nBatch state updates<\/strong><\/p>\n<ul>\n<li>Use functional updates in <code>setState<\/code> to prevent multiple re-renders.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked to optimize a dashboard rendering thousands of rows or charts without lag.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-react-suspense-for-data-fetching.-how-is-it-different-from-useeffect--asynchronous-handling--suspense--advanced\">57. Explain React Suspense for Data Fetching. How is it different from <code>useEffect<\/code>?<\/strong> | Asynchronous Handling \/ Suspense | Advanced<\/h3>\n<ul>\n<li>\n<code>useEffect<\/code> fetches data after the component mounts; Suspense allows React to wait for data before rendering<\/strong>.<\/p>\n<\/li>\n<li>\nSuspense lets you show a fallback UI<\/strong> while the data is loading.<\/p>\n<\/li>\n<li>\nWorks with libraries like <code>react-query<\/code>, <code>relay<\/code>, or experimental <code>React.lazy<\/code> for data.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> Suspense }<\/span> from<\/span> 'react'<\/span>;<\/span>\nconst<\/span> Profile =<\/span> React.<\/span>lazy<\/span>(<\/span>(<\/span>)<\/span> =><\/span> fetchProfile<\/span>(<\/span>)<\/span>)<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>Suspense<\/span> fallback={<div<\/span>><\/span><\/span>Loading...<\/span><\/<\/span>div<\/span>><\/span><\/span>}<\/span>><\/span>\n <<\/span>Profile<\/span> \/><\/span><\/span>\n <\/<\/span>Suspense<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse Suspense primarily with data-fetching libraries or dynamic imports.<\/p>\n<\/li>\n<li>\nKeep fallback UI simple for a smooth user experience.<\/p>\n<\/li>\n<\/ul>\nSample Interview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked to implement a loading skeleton for a feed or dashboard.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-client-side-routing-and-server-side-routing-in-react--routing--react-router--intermediate\">58. What is the difference between client-side routing and server-side routing in React?<\/strong> | Routing \/ React Router | Intermediate<\/h3>\n<ul>\n<li>\nClient-side routing (CSR)<\/strong><\/p>\n<ul>\n<li>\nManaged in the browser using <code>react-router<\/code>.<\/p>\n<\/li>\n<li>\nFast transitions between pages; only the component updates.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\nServer-side routing (SSR)<\/strong><\/p>\n<ul>\n<li>\nEach URL request hits the server; server returns HTML.<\/p>\n<\/li>\n<li>\nBetter SEO and initial load time; slower navigation without caching.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> BrowserRouter as<\/span> Router,<\/span> Routes,<\/span> Route }<\/span> from<\/span> 'react-router-dom'<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>Router<\/span>><\/span><\/span>\n <<\/span>Routes<\/span>><\/span><\/span>\n <<\/span>Route<\/span> path<\/span>=<\/span>\"<\/span>\/\"<\/span><\/span> element={<Home<\/span> \/><\/span><\/span>}<\/span> \/<\/span>><\/span>\n <<\/span>Route<\/span> path<\/span>=<\/span>\"<\/span>\/about\"<\/span><\/span> element={<About<\/span> \/><\/span><\/span>}<\/span> \/<\/span>><\/span>\n <\/<\/span>Routes<\/span>><\/span><\/span>\n <\/<\/span>Router<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked why SEO is poor for a SPA and how SSR with Next.js solves it.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-does-react.strictmode-help-detect-unsafe-lifecycles-and-side-effects--debugging--strict-mode--intermediate\">59. How does <code>React.StrictMode<\/code> help detect unsafe lifecycles and side effects?<\/strong> | Debugging \/ Strict Mode | Intermediate<\/h3>\n<ul>\n<li>\n<code>StrictMode<\/code> activates additional checks and warnings<\/strong> in development.<\/p>\n<\/li>\n<li>\nIt does not render any visible UI<\/strong> or affect production build.<\/p>\n<\/li>\n<li>\nChecks include:<\/p>\n<ul>\n<li>\nDetecting unsafe lifecycle methods<\/strong> (<code>componentWillMount<\/code>, etc.).<\/p>\n<\/li>\n<li>\nDetecting unexpected side effects<\/strong> in <code>useEffect<\/code>.<\/p>\n<\/li>\n<li>\nWarning about legacy string ref API<\/strong>.<\/p>\n<\/li>\n<li>\nDetecting deprecated findDOMNode usage<\/strong>.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>React.StrictMode<\/span>><\/span><\/span>\n <<\/span>MyComponent<\/span> \/><\/span><\/span>\n <\/<\/span>React.StrictMode<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked how to identify potential bugs during development without affecting production.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-the-difference-between-reactdom.render-and-reactdom.hydrate.-when-do-you-use-each--ssr--hydration--advanced\">60. Explain the difference between <code>ReactDOM.render<\/code> and <code>ReactDOM.hydrate<\/code>. When do you use each?<\/strong> | SSR \/ Hydration | Advanced<\/h3>\n<ul>\n<li>\n<code>ReactDOM.render<\/code><\/p>\n<ul>\n<li>\nRenders React components into a blank container<\/strong>.<\/p>\n<\/li>\n<li>\nUsed for client-only applications.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<code>ReactDOM.hydrate<\/code><\/p>\n<ul>\n<li>\nUsed when the HTML is pre-rendered by the server (SSR)<\/strong>.<\/p>\n<\/li>\n<li>\nAttaches event listeners and makes HTML interactive without re-rendering it.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">\/\/ Client-side only<\/span>\nReactDOM.<\/span>render<\/span>(<\/span><<\/span>App<\/span> \/><\/span><\/span>,<\/span> document.<\/span>getElementById<\/span>(<\/span>'root'<\/span>)<\/span>)<\/span>;<\/span>\n\n\/\/ Server-side rendered<\/span>\nReactDOM.<\/span>hydrate<\/span>(<\/span><<\/span>App<\/span> \/><\/span><\/span>,<\/span> document.<\/span>getElementById<\/span>(<\/span>'root'<\/span>)<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse <code>hydrate<\/code> only with server-rendered HTML.<\/p>\n<\/li>\n<li>\nAvoid calling <code>render<\/code> on server-rendered content, as it may replace the HTML and lose SSR benefits.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked to explain how Next.js renders pages on the server and transitions to client-side interactivity.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-render-props-and-how-do-they-differ-from-higher-order-components-hocs--component-patterns--code-reuse--intermediate\">61. What are render props and how do they differ from higher-order components (HOCs)?<\/strong> | Component Patterns \/ Code Reuse | Intermediate<\/h3>\nRender props and HOCs are patterns used to share logic between components<\/strong>, but they approach it differently.<\/p>\n<h4 id=\"render-props\">Render Props<\/h4>\nA render prop is a function prop that a component uses to know what to render. It lets you pass data and behavior to children dynamically.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">class<\/span> MouseTracker<\/span> extends<\/span> React.<\/span>Component<\/span> {<\/span>\n state =<\/span> {<\/span> x:<\/span> 0<\/span>,<\/span> y:<\/span> 0<\/span> }<\/span>;<\/span>\n\n handleMouseMove<\/span> =<\/span> (<\/span>event)<\/span> =><\/span> {<\/span>\n this<\/span>.<\/span>setState<\/span>(<\/span>{<\/span> x:<\/span> event.<\/span>clientX,<\/span> y:<\/span> event.<\/span>clientY }<\/span>)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n render<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>div<\/span> onMouseMove<\/span>=<\/span>{<\/span>this<\/span>.<\/span>handleMouseMove}<\/span><\/span>><\/span><\/span>\n {<\/span>this<\/span>.<\/span>props.<\/span>render<\/span>(<\/span>this<\/span>.<\/span>state)<\/span>}<\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n }<\/span>\n}<\/span>\n\n\/\/ Usage<\/span>\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>MouseTracker render=<\/span>{<\/span>(<\/span>{<\/span> x,<\/span> y }<\/span>)<\/span> =><\/span> (<\/span>\n <<\/span>h1<\/span>><\/span><\/span>The mouse is at<\/span> (<\/span>{<\/span>x}<\/span>,<\/span> {<\/span>y}<\/span>)<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n )<\/span>}<\/span> \/<\/span>><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\n<h4 id=\"higher-order-components-hocs\">Higher-Order Components (HOCs)<\/h4>\nAn HOC is a function that takes a component and returns a new enhanced component.<\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> withMouse<\/span>(<\/span>WrappedComponent)<\/span> {<\/span>\n return<\/span> class<\/span> extends<\/span> React.<\/span>Component {<\/span>\n state =<\/span> {<\/span> x:<\/span> 0<\/span>,<\/span> y:<\/span> 0<\/span> }<\/span>;<\/span>\n\n handleMouseMove<\/span> =<\/span> (<\/span>event)<\/span> =><\/span> {<\/span>\n this<\/span>.<\/span>setState<\/span>(<\/span>{<\/span> x:<\/span> event.<\/span>clientX,<\/span> y:<\/span> event.<\/span>clientY }<\/span>)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n render<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>div<\/span> onMouseMove<\/span>=<\/span>{<\/span>this<\/span>.<\/span>handleMouseMove}<\/span><\/span>><\/span><\/span>\n <<\/span>WrappedComponent<\/span> {<\/span>...<\/span>this<\/span>.<\/span>props<\/span>}<\/span><\/span> mouse<\/span>=<\/span>{<\/span>this<\/span>.<\/span>state}<\/span><\/span> \/><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n }<\/span>\n }<\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> DisplayMouse<\/span>(<\/span>{<\/span> mouse }<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>h1<\/span>><\/span><\/span>The mouse is at<\/span> (<\/span>{<\/span>mouse.<\/span>x}<\/span>,<\/span> {<\/span>mouse.<\/span>y}<\/span>)<\/span><\/<\/span>h1<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n\nconst<\/span> EnhancedDisplay =<\/span> withMouse<\/span>(<\/span>DisplayMouse)<\/span>;<\/span>\n<\/code><\/pre>\nDifferences:<\/strong><\/p>\n\n<table>\n<thead>\n<tr>\n<th>Aspect<\/th>\n<th>Render Props<\/th>\n<th>HOC<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>How it works<\/td>\n<td>Passes a function as a prop<\/td>\n<td>Wraps a component<\/td>\n<\/tr>\n<tr>\n<td>Syntax complexity<\/td>\n<td>Slightly simpler and more composable<\/td>\n<td>Requires extra layers<\/td>\n<\/tr>\n<tr>\n<td>Debugging<\/td>\n<td>Easier due to explicit structure<\/td>\n<td>Can be harder with nested components<\/td>\n<\/tr>\n<\/tbody>\n<\/table>Interview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked to refactor shared logic between components without repeating code.<\/p>\n<\/li>\n<li>\nAsked about patterns for code reuse in React.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-the-difference-between-useeffect-cleanup-and-componentwillunmount-in-class-components.--lifecycle--hooks--intermediate\">62. Explain the difference between <code>useEffect<\/code> cleanup and <code>componentWillUnmount<\/code> in class components.<\/strong> | Lifecycle \/ Hooks | Intermediate<\/h3>\nBoth handle cleaning up resources<\/strong>, but they belong to different paradigms.<\/p>\n<ul>\n<li><code>componentWillUnmount<\/code> is a lifecycle method used in class components to clean up things like timers or subscriptions before the component is removed.<\/li>\n<\/ul>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">class<\/span> Timer<\/span> extends<\/span> React.<\/span>Component<\/span> {<\/span>\n componentDidMount<\/span>(<\/span>)<\/span> {<\/span>\n this<\/span>.<\/span>interval =<\/span> setInterval<\/span>(<\/span>(<\/span>)<\/span> =><\/span> console.<\/span>log<\/span>(<\/span>'tick'<\/span>)<\/span>,<\/span> 1000<\/span>)<\/span>;<\/span>\n }<\/span>\n\n componentWillUnmount<\/span>(<\/span>)<\/span> {<\/span>\n clearInterval<\/span>(<\/span>this<\/span>.<\/span>interval)<\/span>;<\/span>\n }<\/span>\n\n render<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>div<\/span>><\/span><\/span>Timer running<\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n }<\/span>\n}<\/span>\n<\/code><\/pre>\n<ul>\n<li><code>useEffect<\/code> with a return function acts similarly in functional components. The cleanup runs when the component unmounts or before the effect runs again.<\/li>\n<\/ul>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Timer<\/span>(<\/span>)<\/span> {<\/span>\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n const<\/span> interval =<\/span> setInterval<\/span>(<\/span>(<\/span>)<\/span> =><\/span> console.<\/span>log<\/span>(<\/span>'tick'<\/span>)<\/span>,<\/span> 1000<\/span>)<\/span>;<\/span>\n return<\/span> (<\/span>)<\/span> =><\/span> clearInterval<\/span>(<\/span>interval)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>div<\/span>><\/span><\/span>Timer running<\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nKey differences:<\/strong><\/p>\n<ul>\n<li>\n<code>componentWillUnmount<\/code> only runs when the component is about to be removed.<\/p>\n<\/li>\n<li>\n<code>useEffect<\/code> cleanup can run before the next effect, depending on dependencies.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to prevent memory leaks in React apps.<\/p>\n<\/li>\n<li>\nAsked to refactor class-based code to hooks while preserving cleanup logic.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-would-you-implement-a-react-component-that-subscribes-to-an-external-data-source-and-cleans-up-correctly--hooks--asynchronous-updates--intermediate\u2013advanced\">63. How would you implement a React component that subscribes to an external data source and cleans up correctly?<\/strong> | Hooks \/ Asynchronous Updates | Intermediate\u2013Advanced<\/h3>\nA component subscribing to an external service (e.g., WebSocket, API polling) must manage subscriptions and clean them up when the component unmounts.<\/p>\nExample: WebSocket Subscription<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> useState,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Chat<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>messages,<\/span> setMessages]<\/span> =<\/span> useState<\/span>(<\/span>[<\/span>]<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n const<\/span> socket =<\/span> new<\/span> WebSocket<\/span>(<\/span>'wss:\/\/chat.example.com'<\/span>)<\/span>;<\/span>\n\n socket.<\/span>onmessage<\/span> =<\/span> (<\/span>event)<\/span> =><\/span> {<\/span>\n setMessages<\/span>(<\/span>(<\/span>prev)<\/span> =><\/span> [<\/span>...<\/span>prev,<\/span> event.<\/span>data]<\/span>)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n return<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n socket.<\/span>close<\/span>(<\/span>)<\/span>;<\/span>\n }<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n {<\/span>messages.<\/span>map<\/span>(<\/span>(<\/span>msg,<\/span> index)<\/span> =><\/span> <<\/span>div<\/span> key<\/span>=<\/span>{<\/span>index}<\/span><\/span>><\/span><\/span>{<\/span>msg}<\/span><\/<\/span>div<\/span>><\/span><\/span>)<\/span>}<\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nAlways close subscriptions in the cleanup function.<\/p>\n<\/li>\n<li>\nAvoid stale closures by using functional updates when setting state.<\/p>\n<\/li>\n<li>\nUse dependency arrays carefully to prevent unwanted resubscriptions.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked to implement real-time data updates without introducing memory leaks or performance issues.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-react-server-components-and-client-components--react-18--ssr--advanced\">64. What is the difference between React server components and client components?<\/strong> | React 18 \/ SSR | Advanced<\/h3>\nReact Server Components (RSC) allow parts of the UI to be rendered on the server without sending unnecessary JavaScript to the client, improving performance.<\/p>\n\n<table>\n<thead>\n<tr>\n<th>Feature<\/th>\n<th align=\"right\">Server Components<\/th>\n<th align=\"right\">Client Components<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Render location<\/td>\n<td align=\"right\">Server-side<\/td>\n<td align=\"right\">Client-side<\/td>\n<\/tr>\n<tr>\n<td>State & hooks<\/td>\n<td align=\"right\">Limited (no local state\/hooks)<\/td>\n<td align=\"right\">Full support<\/td>\n<\/tr>\n<tr>\n<td>Bundle size<\/td>\n<td align=\"right\">Smaller for client<\/td>\n<td align=\"right\">Larger due to dependencies<\/td>\n<\/tr>\n<tr>\n<td>Use case<\/td>\n<td align=\"right\">Data fetching, static content<\/td>\n<td align=\"right\">Interactivity, event handlers<\/td>\n<\/tr>\n<\/tbody>\n<\/table>Example (conceptual):<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">\/\/ Server Component (no interactivity)<\/span>\nexport<\/span> default<\/span> function<\/span> UserList<\/span>(<\/span>{<\/span> users }<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>ul<\/span>><\/span><\/span>\n {<\/span>users.<\/span>map<\/span>(<\/span>user =><\/span> <<\/span>li<\/span> key<\/span>=<\/span>{<\/span>user.<\/span>id}<\/span><\/span>><\/span><\/span>{<\/span>user.<\/span>name}<\/span><\/<\/span>li<\/span>><\/span><\/span>)<\/span>}<\/span>\n <\/<\/span>ul<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\n\/\/ Client Component (interactive)<\/span>\n'use client'<\/span>;<\/span>\nimport<\/span> {<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nexport<\/span> default<\/span> function<\/span> AddUser<\/span>(<\/span>{<\/span> onAdd }<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>name,<\/span> setName]<\/span> =<\/span> useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span>\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>input<\/span> value<\/span>=<\/span>{<\/span>name}<\/span><\/span> onChange<\/span>=<\/span>{<\/span>(<\/span>e)<\/span> =><\/span> setName<\/span>(<\/span>e.<\/span>target.<\/span>value)<\/span>}<\/span><\/span> \/><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> onAdd<\/span>(<\/span>name)<\/span>}<\/span><\/span>><\/span><\/span>Add User<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked how to optimize initial page load or differentiate interactive vs static parts of the UI in Next.js or similar frameworks.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-do-you-prevent-unnecessary-re-renders-in-react-components--performance--optimization--advanced\">65. How do you prevent unnecessary re-renders in React components?<\/strong> | Performance \/ Optimization | Advanced<\/h3>\nUnnecessary re-renders can slow down applications. Key strategies include:<\/p>\n<ol>\n<li>\nUse <code>React.memo<\/code><\/strong><\/p>\n<ul>\n<li>Wrap components to skip re-rendering if props haven\u2019t changed.<\/li>\n<\/ul>\n<\/li>\n<li>\nUse <code>useMemo<\/code> and <code>useCallback<\/code><\/strong><\/p>\n<ul>\n<li>Memoize values and functions passed as props.<\/li>\n<\/ul>\n<\/li>\n<li>\nManage state wisely<\/strong><\/p>\n<ul>\n<li>Avoid storing unrelated data in a shared state that triggers re-renders.<\/li>\n<\/ul>\n<\/li>\n<li>\nSplit state into smaller parts<\/strong><\/p>\n<ul>\n<li>Localize state where possible to limit updates.<\/li>\n<\/ul>\n<\/li>\n<li>\nUse selectors or context wisely<\/strong><\/p>\n<ul>\n<li>Avoid passing large objects unnecessarily.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> Child =<\/span> React.<\/span>memo<\/span>(<\/span>(<\/span>{<\/span> value }<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Child rendered'<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>div<\/span>><\/span><\/span>{<\/span>value}<\/span><\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n\nfunction<\/span> Parent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>text,<\/span> setText]<\/span> =<\/span> useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>><\/span>\n <<\/span>Child<\/span> value<\/span>=<\/span>{<\/span>count}<\/span><\/span> \/><\/span><\/span>\n <<\/span>input<\/span> value<\/span>=<\/span>{<\/span>text}<\/span><\/span> onChange<\/span>=<\/span>{<\/span>(<\/span>e)<\/span> =><\/span> setText<\/span>(<\/span>e.<\/span>target.<\/span>value)<\/span>}<\/span><\/span> \/><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <<\/span>\/<\/span>><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked how to optimize a component that re-renders unnecessarily due to state changes elsewhere.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-react.memo-and-when-should-you-use-it--performance--optimization--intermediate\u2013advanced\">66. What is React.memo and when should you use it?<\/strong> | Performance \/ Optimization | Intermediate\u2013Advanced<\/h3>\n<code>React.memo<\/code> is a higher-order component (HOC) that helps prevent unnecessary re-renders by memoizing the result. It shallowly compares the previous and next props and only re-renders the component if the props have changed.<\/p>\nUsage Example:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> Child =<\/span> React.<\/span>memo<\/span>(<\/span>(<\/span>{<\/span> name }<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Child rendered'<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>div<\/span>><\/span><\/span>Hello,<\/span> {<\/span>name}<\/span>!<\/span><\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n\nfunction<\/span> Parent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>name,<\/span> setName]<\/span> =<\/span> useState<\/span>(<\/span>\"Alice\"<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>Child<\/span> name<\/span>=<\/span>{<\/span>name}<\/span><\/span> \/><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment Count<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nIn this example, clicking the \u201cIncrement Count\u201d button will not cause the <code>Child<\/code> component to re-render because the <code>name<\/code> prop hasn\u2019t changed.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nWhen a component receives props that don\u2019t change frequently.<\/p>\n<\/li>\n<li>\nFor functional components that are expensive to render.<\/p>\n<\/li>\n<\/ul>\nSample Interview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to optimize render performance in a large component tree.<\/p>\n<\/li>\n<li>\nAsked why a child component is re-rendering even though its props seem unchanged.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-react.memo-and-usememo--performance--optimization--intermediate\u2013advanced\">67. What is the difference between <code>React.memo<\/code> and <code>useMemo<\/code>?<\/strong> | Performance \/ Optimization | Intermediate\u2013Advanced<\/h3>\nBoth <code>React.memo<\/code> and <code>useMemo<\/code> are used for memoization but in different contexts:<\/p>\n\n<table>\n<thead>\n<tr>\n<th>Feature<\/th>\n<th align=\"right\">React.memo<\/th>\n<th align=\"right\">useMemo<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>What it memoizes<\/td>\n<td align=\"right\">Entire component\u2019s render output<\/td>\n<td align=\"right\">The result of a calculation or function<\/td>\n<\/tr>\n<tr>\n<td>Where used<\/td>\n<td align=\"right\">Wraps functional components<\/td>\n<td align=\"right\">Inside functional components<\/td>\n<\/tr>\n<tr>\n<td>Purpose<\/td>\n<td align=\"right\">Avoid unnecessary renders<\/td>\n<td align=\"right\">Avoid recalculations<\/td>\n<\/tr>\n<\/tbody>\n<\/table>Example using <code>useMemo<\/code>:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> Parent<\/span>(<\/span>{<\/span> count }<\/span>)<\/span> {<\/span>\n const<\/span> expensiveValue =<\/span> useMemo<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Calculating...'<\/span>)<\/span>;<\/span>\n return<\/span> count *<\/span> 2<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>count]<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>div<\/span>><\/span><\/span>Result:<\/span> {<\/span>expensiveValue}<\/span><\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nUse <code>React.memo<\/code> when you want to avoid unnecessary renders of child components.<\/p>\n<\/li>\n<li>\nUse <code>useMemo<\/code> when you have expensive computations inside a component.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to prevent redundant computations or renders in a performance-sensitive React app.<\/p>\n<\/li>\n<li>\nAsked to distinguish between component-level and value-level optimizations.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-react-event-system-and-how-is-it-different-from-native-dom-events--event-handling--intermediate\">68. What is the React event system and how is it different from native DOM events?<\/strong> | Event Handling | Intermediate<\/h3>\nReact uses a synthetic event system<\/strong> that wraps native DOM events to ensure consistent behavior across browsers.<\/p>\nKey differences:<\/strong><\/p>\n<ul>\n<li>\nCross-browser compatibility:<\/strong> React normalizes events to work the same in all browsers.<\/p>\n<\/li>\n<li>\nEvent delegation:<\/strong> Events are attached at the root of the document, reducing memory usage and improving performance.<\/p>\n<\/li>\n<li>\nConsistent event object:<\/strong> React\u2019s <code>SyntheticEvent<\/code> abstracts away browser-specific quirks.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> Button<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> handleClick<\/span> =<\/span> (<\/span>event)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Button clicked!'<\/span>,<\/span> event.<\/span>type)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n return<\/span> <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>handleClick}<\/span><\/span>><\/span><\/span>Click Me<\/<\/span>button<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nCommon pitfalls:<\/strong><\/p>\n<ul>\n<li>\nAssuming that React\u2019s event object persists after the handler is complete (it gets pooled).<\/p>\n<\/li>\n<li>\nUsing browser-specific event properties without checking compatibility.<\/p>\n<\/li>\n<\/ul>\nBest practice:<\/strong><\/p>\n<ul>\n<li>If you need to use the event asynchronously, call <code>event.persist()<\/code> or copy the properties you need.<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how React handles events differently from the DOM.<\/p>\n<\/li>\n<li>\nAsked how to implement event delegation or manage performance in event-heavy components.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-custom-hooks-and-why-should-you-use-them--hooks--code-reuse--intermediate\">69. What are custom hooks and why should you use them?<\/strong> | Hooks \/ Code Reuse | Intermediate<\/h3>\nCustom hooks are reusable functions built on top of React\u2019s built-in hooks (<code>useState<\/code>, <code>useEffect<\/code>, etc.). They allow you to encapsulate logic that can be shared across multiple components.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> useState,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> useWindowWidth<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>width,<\/span> setWidth]<\/span> =<\/span> useState<\/span>(<\/span>window.<\/span>innerWidth)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n const<\/span> handleResize<\/span> =<\/span> (<\/span>)<\/span> =><\/span> setWidth<\/span>(<\/span>window.<\/span>innerWidth)<\/span>;<\/span>\n window.<\/span>addEventListener<\/span>(<\/span>'resize'<\/span>,<\/span> handleResize)<\/span>;<\/span>\n return<\/span> (<\/span>)<\/span> =><\/span> window.<\/span>removeEventListener<\/span>(<\/span>'resize'<\/span>,<\/span> handleResize)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n return<\/span> width;<\/span>\n}<\/span>\n\nfunction<\/span> Component<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> width =<\/span> useWindowWidth<\/span>(<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>div<\/span>><\/span><\/span>Window width is {<\/span>width}<\/span>px<\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhy use custom hooks:<\/strong><\/p>\n<ul>\n<li>\nAvoid repeating logic across components.<\/p>\n<\/li>\n<li>\nImprove maintainability and readability.<\/p>\n<\/li>\n<li>\nKeep component code focused on UI rendering.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to share logic between components without duplicating code.<\/p>\n<\/li>\n<li>\nAsked to refactor a class component with repeated logic into hooks.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-time-slicing-in-react-and-why-is-it-important--react-internals--performance--advanced\">70. What is time slicing in React and why is it important?<\/strong> | React Internals \/ Performance | Advanced<\/h3>\nTime slicing is a feature introduced with React Fiber<\/strong> that allows rendering work to be split into small chunks and spread over multiple frames. This prevents the UI from blocking and keeps it responsive, especially for complex or long tasks.<\/p>\nHow it works:<\/strong><\/p>\n<ul>\n<li>\nReact prioritizes urgent tasks (like animations or user interactions).<\/p>\n<\/li>\n<li>\nNon-urgent tasks (like rendering large lists) are spread out to avoid blocking the main thread.<\/p>\n<\/li>\n<\/ul>\nExample use case:<\/strong> \nRendering thousands of items without freezing the UI by using Suspense and lazy loading.<\/p>\nBenefits:<\/strong><\/p>\n<ul>\n<li>\nSmoother animations and interactions.<\/p>\n<\/li>\n<li>\nAvoids freezing the main thread during heavy rendering.<\/p>\n<\/li>\n<\/ul>\nLimitations:<\/strong><\/p>\n<ul>\n<li>Not all work is automatically time sliced; developers need to structure components and use features like <code>Suspense<\/code> to take advantage of it.<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to handle rendering large datasets without impacting UI responsiveness.<\/p>\n<\/li>\n<li>\nAsked to explain improvements React Fiber brought over the previous architecture.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-would-you-implement-optimistic-ui-updates-in-react-applications--state-management--ux-patterns--advanced\">71. How would you implement optimistic UI updates in React applications?<\/strong> | State Management \/ UX Patterns | Advanced<\/h3>\nOptimistic UI updates refer to updating the UI immediately, assuming that the action (like a server request) will succeed, and rolling back if it fails. This improves perceived performance and responsiveness.<\/p>\nSteps to implement:<\/strong><\/p>\n<ol>\n<li>\nUpdate the UI state immediately upon user action.<\/p>\n<\/li>\n<li>\nSend the request to the server.<\/p>\n<\/li>\n<li>\nIf the request succeeds, confirm the update or fetch fresh data.<\/p>\n<\/li>\n<li>\nIf the request fails, revert the state and show an error.<\/p>\n<\/li>\n<\/ol>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> TodoApp<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>todos,<\/span> setTodos]<\/span> =<\/span> useState<\/span>(<\/span>[<\/span>{<\/span> id:<\/span> 1<\/span>,<\/span> text:<\/span> 'Learn React'<\/span> }<\/span>]<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>error,<\/span> setError]<\/span> =<\/span> useState<\/span>(<\/span>null<\/span>)<\/span>;<\/span>\n\n const<\/span> addTodo =<\/span> async<\/span> (<\/span>newTodo)<\/span> =><\/span> {<\/span>\n const<\/span> optimisticTodo =<\/span> {<\/span> id:<\/span> Date.<\/span>now<\/span>(<\/span>)<\/span>,<\/span> text:<\/span> newTodo }<\/span>;<\/span>\n setTodos<\/span>(<\/span>[<\/span>...<\/span>todos,<\/span> optimisticTodo]<\/span>)<\/span>;<\/span> \/\/ Step 1: Optimistic update<\/span>\n\n try<\/span> {<\/span>\n await<\/span> fetch<\/span>(<\/span>'\/api\/todos'<\/span>,<\/span> {<\/span>\n method:<\/span> 'POST'<\/span>,<\/span>\n body:<\/span> JSON.<\/span>stringify<\/span>(<\/span>optimisticTodo)<\/span>,<\/span>\n }<\/span>)<\/span>;<\/span>\n }<\/span> catch<\/span> (<\/span>err<\/span>)<\/span> {<\/span>\n setError<\/span>(<\/span>'Failed to add todo'<\/span>)<\/span>;<\/span>\n setTodos<\/span>(<\/span>todos)<\/span>;<\/span> \/\/ Rollback<\/span>\n }<\/span>\n }<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n {<\/span>error &&<\/span> <<\/span>p<\/span> style<\/span>=<\/span>{<\/span>{<\/span>color:<\/span> 'red'<\/span>}<\/span>}<\/span><\/span>><\/span><\/span>{<\/span>error}<\/span><\/<\/span>p<\/span>><\/span><\/span>}<\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> addTodo<\/span>(<\/span>'New Task'<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Add Todo<\/<\/span>button<\/span>><\/span><\/span>\n <<\/span>ul<\/span>><\/span><\/span>{<\/span>todos.<\/span>map<\/span>(<\/span>todo =><\/span> <<\/span>li<\/span> key<\/span>=<\/span>{<\/span>todo.<\/span>id}<\/span><\/span>><\/span><\/span>{<\/span>todo.<\/span>text}<\/span><\/<\/span>li<\/span>><\/span><\/span>)<\/span>}<\/span><\/<\/span>ul<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nWhen user experience is a priority and server latency can be unpredictable.<\/p>\n<\/li>\n<li>\nIn scenarios like form submissions, data updates, etc.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to make the UI feel snappy even if the backend is slow.<\/p>\n<\/li>\n<li>\nAsked to explain how to handle failure cases in real-time applications.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-do-you-handle-accessibility-a11y-in-a-react-application--ui--accessibility--intermediate\">72. How do you handle accessibility (a11y) in a React application?<\/strong> | UI \/ Accessibility | Intermediate<\/h3>\nAccessibility ensures that your application can be used by people with disabilities. React encourages semantic HTML and attributes like <code>aria-*<\/code> to improve accessibility.<\/p>\nKey techniques:<\/strong><\/p>\n<ul>\n<li>\nUse semantic elements like <code><button><\/code>, <code><nav><\/code>, <code><form><\/code>.<\/p>\n<\/li>\n<li>\nAdd <code>aria-label<\/code>, <code>aria-describedby<\/code>, and <code>aria-expanded<\/code> where needed.<\/p>\n<\/li>\n<li>\nEnsure proper keyboard navigation (using <code>tabIndex<\/code>, etc.).<\/p>\n<\/li>\n<li>\nManage focus for modals or dialogs.<\/p>\n<\/li>\n<li>\nUse libraries like <code>react-aria<\/code> or <code>react-axe<\/code> to audit accessibility.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> Modal<\/span>(<\/span>{<\/span> isOpen,<\/span> onClose }<\/span>)<\/span> {<\/span>\n return<\/span> isOpen ?<\/span> (<\/span>\n <<\/span>div<\/span> role<\/span>=<\/span>\"<\/span>dialog\"<\/span><\/span> aria-modal<\/span>=<\/span>\"<\/span>true\"<\/span><\/span> aria-labelledby<\/span>=<\/span>\"<\/span>dialog-title\"<\/span><\/span>><\/span><\/span>\n <<\/span>h2<\/span> id<\/span>=<\/span>\"<\/span>dialog-title\"<\/span><\/span>><\/span><\/span>Subscribe<\/<\/span>h2<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>onClose}<\/span><\/span>><\/span><\/span>Close<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span> :<\/span> null<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to make web applications inclusive.<\/p>\n<\/li>\n<li>\nAsked how to fix keyboard navigation issues.<\/p>\n<\/li>\n<li>\nAsked how to use <code>aria<\/code> attributes in forms or dialogs.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-react-portals-and-when-would-you-use-them-can-you-give-a-complex-example--ui--dom-manipulation--intermediate\">73. What are React Portals and when would you use them? Can you give a complex example?<\/strong> | UI \/ DOM Manipulation | Intermediate<\/h3>\nReact Portals allow rendering components outside of the parent DOM hierarchy while keeping React\u2019s state and context intact. This is useful for modals, tooltips, dropdowns, etc., that need to break out of layout constraints.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> ReactDOM from<\/span> 'react-dom'<\/span>;<\/span>\n\nfunction<\/span> Modal<\/span>(<\/span>{<\/span> children,<\/span> isOpen,<\/span> onClose }<\/span>)<\/span> {<\/span>\n if<\/span> (<\/span>!<\/span>isOpen)<\/span> return<\/span> null<\/span>;<\/span>\n\n return<\/span> ReactDOM.<\/span>createPortal<\/span>(<\/span>\n <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>modal-backdrop\"<\/span><\/span> onClick<\/span>=<\/span>{<\/span>onClose}<\/span><\/span>><\/span><\/span>\n <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>modal-content\"<\/span><\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>e)<\/span> =><\/span> e.<\/span>stopPropagation<\/span>(<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>\n {<\/span>children}<\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>,<\/span>\n document.<\/span>getElementById<\/span>(<\/span>'modal-root'<\/span>)<\/span>\n )<\/span>;<\/span>\n}<\/span>\n\n<\/code><\/pre>\nComplex example:<\/strong><\/p>\n<ul>\n<li>\nModal with focus trap and keyboard accessibility.<\/p>\n<\/li>\n<li>\nTooltips rendered relative to a button but outside overflow boundaries.<\/p>\n<\/li>\n<\/ul>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nUI elements that need to overlay other content.<\/p>\n<\/li>\n<li>\nAvoid issues with CSS stacking context, z-index, or overflow.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to implement modals or dropdowns without layout issues.<\/p>\n<\/li>\n<li>\nAsked how to separate overlay elements while maintaining state and props.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-the-difference-between-shallow-rendering-and-full-dom-rendering-in-react-testing.--testing--react-testing-library--intermediate\">74. Explain the difference between shallow rendering and full DOM rendering in React testing.<\/strong> | Testing \/ React Testing Library | Intermediate<\/h3>\nIn testing, shallow rendering and full DOM rendering are two different approaches to isolate component behavior.<\/p>\nShallow rendering:<\/strong><\/p>\n<ul>\n<li>\nRenders the component without rendering its child components.<\/p>\n<\/li>\n<li>\nUsed to test a component\u2019s output in isolation.<\/p>\n<\/li>\n<li>\nProvided by tools like <code>enzyme<\/code>.<\/p>\n<\/li>\n<\/ul>\nFull DOM rendering:<\/strong><\/p>\n<ul>\n<li>\nRenders the entire component tree.<\/p>\n<\/li>\n<li>\nSuitable for integration tests where you need to interact with nested components or lifecycle methods.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> shallow,<\/span> mount }<\/span> from<\/span> 'enzyme'<\/span>;<\/span>\nimport<\/span> MyComponent from<\/span> '.\/MyComponent'<\/span>;<\/span>\n\ntest<\/span>(<\/span>'shallow test'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n const<\/span> wrapper =<\/span> shallow<\/span>(<\/span><<\/span>MyComponent<\/span> \/><\/span><\/span>)<\/span>;<\/span>\n expect<\/span>(<\/span>wrapper.<\/span>find<\/span>(<\/span>'button'<\/span>)<\/span>.<\/span>exists<\/span>(<\/span>)<\/span>)<\/span>.<\/span>toBe<\/span>(<\/span>true<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n\ntest<\/span>(<\/span>'full render test'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n const<\/span> wrapper =<\/span> mount<\/span>(<\/span><<\/span>MyComponent<\/span> \/><\/span><\/span>)<\/span>;<\/span>\n expect<\/span>(<\/span>wrapper.<\/span>find<\/span>(<\/span>'ChildComponent'<\/span>)<\/span>.<\/span>length)<\/span>.<\/span>toBe<\/span>(<\/span>1<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nUse shallow rendering for unit tests.<\/p>\n<\/li>\n<li>\nUse full DOM rendering for complex interactions or state changes.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to write test cases that isolate logic versus testing full UI behavior.<\/p>\n<\/li>\n<li>\nAsked when to use enzyme vs React Testing Library.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-server-components-and-client-components-in-react--react-18--architecture--advanced\">75. What is the difference between server components and client components in React?<\/strong> | React 18+ \/ Architecture | Advanced<\/h3>\nReact 18 introduces server components<\/strong>, which are rendered on the server and streamed to the client, unlike client components that are fully loaded and executed on the browser.<\/p>\nKey differences:<\/strong><\/p>\n\n<table>\n<thead>\n<tr>\n<th>Feature<\/th>\n<th align=\"right\">Server Components<\/th>\n<th align=\"right\">Client Components<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Rendering location<\/td>\n<td align=\"right\">Server<\/td>\n<td align=\"right\">Browser<\/td>\n<\/tr>\n<tr>\n<td>JavaScript payload<\/td>\n<td align=\"right\">Minimal or none<\/td>\n<td align=\"right\">Full bundle<\/td>\n<\/tr>\n<tr>\n<td>Data fetching<\/td>\n<td align=\"right\">Direct from server-side APIs<\/td>\n<td align=\"right\">Needs client-side calls<\/td>\n<\/tr>\n<tr>\n<td>Use case<\/td>\n<td align=\"right\">Static content, SEO, performance<\/td>\n<td align=\"right\">Interactivity, event handling<\/td>\n<\/tr>\n<\/tbody>\n<\/table>Example:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">\/\/ Server Component (no hooks or browser-specific code)<\/span>\nexport<\/span> default<\/span> function<\/span> ProductList<\/span>(<\/span>{<\/span> products }<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n {<\/span>products.<\/span>map<\/span>(<\/span>product =><\/span> <<\/span>div<\/span> key<\/span>=<\/span>{<\/span>product.<\/span>id}<\/span><\/span>><\/span><\/span>{<\/span>product.<\/span>name}<\/span><\/<\/span>div<\/span>><\/span><\/span>)<\/span>}<\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\n\/\/ Client Component (with interactivity)<\/span>\n\"use client\"<\/span>;<\/span>\nimport<\/span> {<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nexport<\/span> default<\/span> function<\/span> CartButton<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Add {<\/span>count}<\/span><\/<\/span>button<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nServer components: for static or SEO-heavy pages.<\/p>\n<\/li>\n<li>\nClient components: for interactive or state-driven UI.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how React\u2019s architecture is evolving.<\/p>\n<\/li>\n<li>\nAsked how server-side rendering impacts performance and scalability.<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/body>\n\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"React Blind 75 This guide is a carefully curated collection of 75 React interview questions designed to help learners build a deep understanding of React and confidently crack technical interviews at product-based companies, startups, and top-tier organizations. The questions are structured progressively, starting from the fundamentals and moving toward advanced concepts, including state management, hooks,<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10074","post","type-post","status-publish","format-standard","category-uncategorized"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/10074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=10074"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/10074\/revisions"}],"predecessor-version":[{"id":10075,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/10074\/revisions\/10075"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=10074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=10074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=10074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":10074,"date":"2025-09-17T14:11:54","date_gmt":"2025-09-17T08:41:54","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=10074"},"modified":"2025-09-17T14:11:54","modified_gmt":"2025-09-17T08:41:54","slug":"top-react-interview-questions-2025","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/top-react-interview-questions-2025\/","title":{"rendered":"Top React Interview Questions (2025)"},"content":{"rendered":"\n\n\n\n\n \n \n React Blind 75<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/stackedit.io\/style.css\" \/>\n<\/head>\n\n<body class=\"stackedit\">\nThis guide is a carefully curated collection of 75 React interview questions<\/strong> designed to help learners build a deep understanding of React and confidently crack technical interviews at product-based companies, startups, and top-tier organizations.<\/p>\nThe questions are structured progressively, starting from the fundamentals and moving toward advanced concepts, including state management, hooks, performance optimization, server-side rendering, error handling, and more. Each question is accompanied by:<\/p>\n<ol>\n<li>The full question text.<\/li>\n<li>The topic it belongs to.<\/li>\n<li>Difficulty level (Easy \/ Intermediate \/ Advanced).<\/li>\n<li>A detailed explanation with code examples where applicable.<\/li>\n<li>Common interview scenarios where the question might arise.<\/li>\n<li>Additional best practices, pitfalls, and optimization tips where relevant.<\/li>\n<\/ol>\nWhether you\u2019re preparing for your first React interview or aiming for a senior frontend role, this guide covers everything you need to confidently discuss React concepts, debug problems, and architect scalable solutions.<\/p>\nHow to use this guide:<\/strong><\/p>\n<ul>\n<li>Study each question thoroughly.<\/li>\n<li>Write and practice coding examples yourself.<\/li>\n<li>Revise the best practices and pitfalls.<\/li>\n<li>Mock interviews using the sample scenarios provided.<\/li>\n<li>Reinforce learning by building small projects using the concepts covered.<\/li>\n<\/ul>\nWith consistent practice and understanding, you\u2019ll be well-equipped to answer React-related interview questions with clarity, confidence, and depth.<\/p>\nLet\u2019s begin this journey toward mastering React!<\/p>\n<hr>\n<h3 id=\"what-is-react-describe-the-benefits-of-react--react-basics--easy\">1. What is React? Describe the benefits of React<\/strong> | React Basics | Easy<\/h3>\nReact is a JavaScript library created by Facebook for building user interfaces, especially single-page applications (SPAs).<\/p>\nIt helps developers build reusable UI components that can manage their own state, which makes it easier to build complex applications.<\/p>\nKey features include:<\/p>\n<ul>\n<li>\nComponent-based architecture:<\/strong> Developers can break the UI into small, reusable components.<\/p>\n<\/li>\n<li>\nVirtual DOM:<\/strong> React updates the UI efficiently by calculating differences between the new and old DOM trees.<\/p>\n<\/li>\n<li>\nDeclarative UI:<\/strong> You describe how the UI should look for any given state, and React manages the rendering.<\/p>\n<\/li>\n<li>\nOne-way data binding:<\/strong> Data flows from parent to child components, making state management predictable.<\/p>\n<\/li>\n<li>\nJSX syntax:<\/strong> Allows mixing HTML and JavaScript, making component structure more readable.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Welcome<\/span>(<\/span>props)<\/span> {<\/span>\n return<\/span> <<\/span>h1<\/span>><\/span><\/span>Hello,<\/span> {<\/span>props.<\/span>name}<\/span>!<\/span><\/<\/span>h1<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>Welcome<\/span> name<\/span>=<\/span>\"<\/span>Alice\"<\/span><\/span> \/><\/span><\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span>\n\n<\/code><\/pre>\nIn this example, the <code>Welcome<\/code> component takes a <code>name<\/code> prop and renders it dynamically.<\/p>\nInterview Scenarios:<\/strong><\/p>\n<ul>\n<li>\nExplaining React\u2019s role in a web application during a technical round.<\/p>\n<\/li>\n<li>\nAnswering why React is preferred over other libraries\/frameworks for SPA development.<\/p>\n<\/li>\n<li>\nDiscussing how reusable components can help scale applications.<\/p>\n<\/li>\n<li>\nTalking about performance optimizations using Virtual DOM in a system design interview.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-react-node-react-element-and-a-react-component--react-core-concepts--easy\">2. What is the difference between React Node, React Element, and a React Component?<\/strong> | React Core Concepts | Easy<\/h3>\nIn React:<\/p>\n<ul>\n<li>\nA React Node<\/strong> is anything that can be rendered, such as a React element, string, number, array, or <code>null<\/code>.<\/p>\n<\/li>\n<li>\nA React Element<\/strong> is an immutable object that describes what should appear in the UI. It\u2019s created using JSX or <code>React.createElement()<\/code>.<\/p>\n<\/li>\n<li>\nA React Component<\/strong> is a function or class that returns a React element and encapsulates logic and UI behavior.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">\/\/ React Element<\/span>\nconst<\/span> element =<\/span> <<\/span>h1<\/span>><\/span><\/span>Hello,<\/span> world!<\/span><\/<\/span>h1<\/span>><\/span><\/span>;<\/span>\n\n\/\/ React Component<\/span>\nfunction<\/span> Greeting<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>h1<\/span>><\/span><\/span>Hello!<\/span><\/<\/span>h1<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n\n\/\/ Using the component<\/span>\nconst<\/span> node =<\/span> <<\/span>Greeting<\/span> \/><\/span><\/span>;<\/span>\n\n<\/code><\/pre>\nInterview Scenarios:<\/strong><\/p>\n<ul>\n<li>\nClarifying the difference between various React constructs during an entry-level interview.<\/p>\n<\/li>\n<li>\nAsking how React builds and renders components efficiently.<\/p>\n<\/li>\n<li>\nDiscussing the importance of immutability and declarative rendering.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-jsx-and-how-does-it-work--react-syntax--easy\">3. What is JSX and how does it work?<\/strong> | React Syntax | Easy<\/h3>\nJSX (JavaScript XML) is a syntax extension that allows writing HTML-like code inside JavaScript. It makes defining UI structures more intuitive.<\/p>\nJSX is not understood by browsers directly, so tools like Babel transpile it into <code>React.createElement()<\/code> calls.<\/p>\nExample:<\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> element =<\/span> <<\/span>div<\/span>><\/span><\/span>Hello,<\/span> world!<\/span><\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n<\/code><\/pre>\nIs transpiled to:<\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">const<\/span> element =<\/span> React.<\/span>createElement<\/span>(<\/span>'div'<\/span>,<\/span> null<\/span>,<\/span> 'Hello, world!'<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nInterview Scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsking how JSX simplifies component development.<\/p>\n<\/li>\n<li>\nExploring how transpilers work with React code.<\/p>\n<\/li>\n<li>\nUnderstanding how React internally manages element creation.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-state-and-props-in-react--state-management--easy\">4. What is the difference between state and props in React?<\/strong> | State Management | Easy<\/h3>\n<ul>\n<li>\nState:<\/strong> Internal data managed by the component, can change over time.<\/p>\n<\/li>\n<li>\nProps:<\/strong> External data passed from parent components, read-only within the component.<\/p>\n<\/li>\n<\/ul>\nExample:<\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> Counter<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> React.<\/span>useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span> \/\/ state<\/span>\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>p<\/span>><\/span><\/span>Count:<\/span> {<\/span>count}<\/span><\/<\/span>p<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>Counter<\/span> initialCount<\/span>=<\/span>{<\/span>0<\/span>}<\/span><\/span> \/><\/span><\/span>;<\/span> \/\/ props can be passed here if needed<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview Scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsking how data flows in a React component hierarchy.<\/p>\n<\/li>\n<li>\nExplaining why state and props serve different roles.<\/p>\n<\/li>\n<li>\nUnderstanding how changes in state affect rendering.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-purpose-of-the-key-prop-in-react--lists--rendering--easy\">5. What is the purpose of the <code>key<\/code> prop in React?<\/strong> | Lists & Rendering | Easy<\/h3>\nThe <code>key<\/code> prop helps React uniquely identify elements in a list. It optimizes rendering by tracking which items changed, were added, or removed.<\/p>\nExample:<\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> items =<\/span> [<\/span>\n {<\/span> id:<\/span> 1<\/span>,<\/span> value:<\/span> 'Apple'<\/span> }<\/span>,<\/span>\n {<\/span> id:<\/span> 2<\/span>,<\/span> value:<\/span> 'Banana'<\/span> }<\/span>\n]<\/span>;<\/span>\n\nfunction<\/span> ItemList<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>ul<\/span>><\/span><\/span>\n {<\/span>items.<\/span>map<\/span>(<\/span>item =><\/span> (<\/span>\n <<\/span>li<\/span> key<\/span>=<\/span>{<\/span>item.<\/span>id}<\/span><\/span>><\/span><\/span>{<\/span>item.<\/span>value}<\/span><\/<\/span>li<\/span>><\/span><\/span>\n )<\/span>)<\/span>}<\/span>\n <\/<\/span>ul<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview Scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsking how React improves performance when rendering lists.<\/p>\n<\/li>\n<li>\nDiscussing how improper key usage can cause bugs.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-consequence-of-using-array-indices-as-the-value-for-key-in-react--rendering--lists--intermediate\">6. What is the consequence of using array indices as the value for <code>key<\/code> in React?<\/strong> | Rendering \/ Lists | Intermediate<\/h3>\nUsing array indices as keys in React lists can lead to bugs and performance issues because React uses keys to identify which items have changed, been added, or removed.<\/p>\n<ul>\n<li>Keys should be stable, predictable, and unique.<\/li>\n<li>If array indices are used as keys, reordering, adding, or removing items can confuse React during reconciliation.<\/li>\n<li>This can cause components to unnecessarily re-render or preserve incorrect state.<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> items =<\/span> [<\/span>'Apple'<\/span>,<\/span> 'Banana'<\/span>,<\/span> 'Cherry'<\/span>]<\/span>;<\/span>\n\nitems.<\/span>map<\/span>(<\/span>(<\/span>item,<\/span> index)<\/span> =><\/span> <<\/span>div<\/span> key<\/span>=<\/span>{<\/span>index}<\/span><\/span>><\/span><\/span>{<\/span>item}<\/span><\/<\/span>div<\/span>><\/span><\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nIf items are reordered, React may reuse DOM nodes incorrectly, leading to UI inconsistencies.<\/p>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Use unique identifiers (like IDs) for keys.<\/li>\n<li>Avoid using indices unless the list is static and won\u2019t change order.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked to explain list rendering and key importance.<\/li>\n<li>Debugging a component that behaves incorrectly after array reordering.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-controlled-and-uncontrolled-react-components--forms--state--intermediate\">7. What is the difference between controlled and uncontrolled React Components?<\/strong> | Forms \/ State | Intermediate<\/h3>\nControlled components are form inputs whose values are managed by React state. Uncontrolled components maintain their own internal state and are accessed via refs.<\/p>\nExplanation:<\/strong><\/p>\n<ul>\n<li>\nControlled:<\/strong> The state is the single source of truth. Input value is tied to <code>state<\/code> and updated via <code>onChange<\/code>.<\/p>\n<\/li>\n<li>\nUncontrolled:<\/strong> Input value is stored in the DOM. Accessed using <code>ref<\/code> when needed.<\/p>\n<\/li>\n<\/ul>\nExample (Controlled):<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> ControlledInput<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>value,<\/span> setValue]<\/span> =<\/span> React.<\/span>useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>input<\/span> value<\/span>=<\/span>{<\/span>value}<\/span><\/span> onChange<\/span>=<\/span>{<\/span>(<\/span>e)<\/span> =><\/span> setValue<\/span>(<\/span>e.<\/span>target.<\/span>value)<\/span>}<\/span><\/span> \/><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nExample (Uncontrolled):<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> UncontrolledInput<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> inputRef =<\/span> React.<\/span>useRef<\/span>(<\/span>)<\/span>;<\/span>\n\n const<\/span> handleClick<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n alert<\/span>(<\/span>inputRef.<\/span>current.<\/span>value)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>><\/span>\n <<\/span>input<\/span> ref<\/span>=<\/span>{<\/span>inputRef}<\/span><\/span> \/><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>handleClick}<\/span><\/span>><\/span><\/span>Show Value<\/<\/span>button<\/span>><\/span><\/span>\n <<\/span>\/<\/span>><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Use controlled components for form validation, complex forms, or dynamic updates.<\/li>\n<li>Use uncontrolled components for simple forms or when integrating with third-party libraries.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked to explain differences between controlled vs uncontrolled components.<\/li>\n<li>Asked when to use <code>ref<\/code> for form inputs.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-some-pitfalls-about-using-context-in-react--state-management--context--intermediate\">8. What are some pitfalls about using context in React?<\/strong> | State Management \/ Context | Intermediate<\/h3>\nReact Context provides a way to share global state, but improper usage can lead to performance and maintainability issues.<\/p>\nExplanation:<\/strong><\/p>\n<ul>\n<li>Context updates propagate to all consuming components.<\/li>\n<li>Overuse can lead to unnecessary re-renders.<\/li>\n<li>Using large or frequently changing data in context may degrade performance.<\/li>\n<\/ul>\nCommon pitfalls:<\/strong><\/p>\n<ul>\n<li>Putting too much state in a single context.<\/li>\n<li>Passing non-memoized objects as context values.<\/li>\n<li>Relying solely on context instead of external state management for complex apps.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Memoize context values using <code>useMemo<\/code>.<\/li>\n<li>Split contexts to isolate frequently changing state.<\/li>\n<li>Use libraries like Redux or Zustand for complex scenarios.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked about performance issues with context.<\/li>\n<li>Asked to optimize a component consuming context for frequently updating data.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-the-benefits-of-using-hooks-in-react--hooks--functional-components--beginner\">9. What are the benefits of using hooks in React?<\/strong> | Hooks \/ Functional Components | Beginner<\/h3>\nHooks allow functional components to use state and other React features without writing classes.<\/p>\nExplanation:<\/strong><\/p>\n<ul>\n<li>\nSimpler code:<\/strong> Eliminates the need for class components and lifecycle methods.<\/p>\n<\/li>\n<li>\nReusable logic:<\/strong> Custom hooks allow encapsulating stateful logic.<\/p>\n<\/li>\n<li>\nBetter readability:<\/strong> Clear separation of state and effects.<\/p>\n<\/li>\n<li>\nFunctional approach:<\/strong> Encourages a functional programming style, making code easier to test and maintain.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> useState,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Counter<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>`Count is: <\/span>${<\/span>count}<\/span><\/span>`<\/span><\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>count]<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n\n<\/code><\/pre>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Use hooks only in functional components.<\/li>\n<li>Follow rules of hooks (top-level calls, no conditional calls).<\/li>\n<li>Extract reusable logic into custom hooks.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked why hooks replaced class components.<\/li>\n<li>Asked to refactor class component into functional component using hooks.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-the-rules-of-react-hooks--hooks--functional-components--intermediate\">10. What are the rules of React hooks?<\/strong> | Hooks \/ Functional Components | Intermediate<\/h3>\nHooks have rules to ensure predictable behavior and maintain component integrity.<\/p>\nExplanation:<\/strong><\/p>\n<ol>\n<li>\nCall hooks at the top level:<\/strong> Don\u2019t call inside loops, conditions, or nested functions.<\/p>\n<\/li>\n<li>\nCall hooks only in React functions:<\/strong> Functional components or custom hooks.<\/p>\n<\/li>\n<li>\nCustom hooks must start with \u201cuse\u201d:<\/strong> Helps React identify hook calls.<\/p>\n<\/li>\n<\/ol>\nWhy rules matter:<\/strong><\/p>\n<ul>\n<li>Maintaining the order of hook calls ensures React can correctly preserve state across renders.<\/li>\n<li>Violating rules can lead to unpredictable behavior or errors.<\/li>\n<\/ul>\nExample (Incorrect use):<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> MyComponent<\/span>(<\/span>)<\/span> {<\/span>\n if<\/span> (<\/span>someCondition)<\/span> {<\/span>\n const<\/span> [<\/span>value,<\/span> setValue]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span> \/\/ \u274c called conditionally<\/span>\n }<\/span>\n}<\/span>\n<\/code><\/pre>\nCorrect use:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> MyComponent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>value,<\/span> setValue]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span> \/\/always called<\/span>\n if<\/span> (<\/span>someCondition)<\/span> {<\/span>\n \/\/ logic<\/span>\n }<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked to explain why hooks must be top-level.<\/li>\n<li>Asked to identify why a component using hooks fails unexpectedly.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-useeffect-and-uselayouteffect-in-react--hooks---side-effects--intermediate\">11. What is the difference between <code>useEffect<\/code> and <code>useLayoutEffect<\/code> in React?<\/strong> | Hooks – Side Effects | Intermediate<\/h3>\n<code>useEffect<\/code> and <code>useLayoutEffect<\/code> are two hooks in React used to perform side effects, such as data fetching, subscriptions, or DOM manipulations. Although they are similar in API, they differ in when they execute during the component lifecycle.<\/p>\n<h4 id=\"key-differences\">Key Differences:<\/strong><\/h4>\n\n<table>\n<thead>\n<tr>\n<th align=\"left\">Aspect<\/th>\n<th align=\"right\"><code>useEffect<\/code><\/th>\n<th align=\"right\"><code>useLayoutEffect<\/code><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\">Execution timing<\/td>\n<td align=\"right\">Runs after the browser has painted the UI<\/td>\n<td align=\"right\">Runs after DOM updates but before paint<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">Suitable for<\/td>\n<td align=\"right\">Data fetching, subscriptions, event listeners<\/td>\n<td align=\"right\">Measuring or synchronizing DOM elements before user sees it<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">Blocking behavior<\/td>\n<td align=\"right\">Doesn\u2019t block rendering<\/td>\n<td align=\"right\">Blocks rendering until executed<\/td>\n<\/tr>\n<\/tbody>\n<\/table><h4 id=\"example\">Example:<\/h4>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useState,<\/span> useEffect,<\/span> useLayoutEffect,<\/span> useRef }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Example<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>width,<\/span> setWidth]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n const<\/span> divRef =<\/span> useRef<\/span>(<\/span>)<\/span>;<\/span>\n\n useLayoutEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n \/\/ Runs before paint, ideal for measuring layout<\/span>\n setWidth<\/span>(<\/span>divRef.<\/span>current.<\/span>offsetWidth)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>\"Rendered with width:\"<\/span>,<\/span> width)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>width]<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>div<\/span> ref<\/span>=<\/span>{<\/span>divRef}<\/span><\/span> style<\/span>=<\/span>{<\/span>{<\/span> width:<\/span> '50%'<\/span> }<\/span>}<\/span><\/span>><\/span><\/span>Resize me!<\/span><\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\n<h4 id=\"when-to-use-each\">When to use each:<\/strong><\/h4>\n<ul>\n<li>\n<code>useEffect<\/code>:<\/strong><\/p>\n<ul>\n<li>Fetching data after initial render<\/li>\n<li>Adding event listeners or subscriptions<\/li>\n<li>Performing actions that don\u2019t affect layout calculations<\/li>\n<\/ul>\n<\/li>\n<li>\n<code>useLayoutEffect<\/code>:<\/strong><\/p>\n<ul>\n<li>Measuring DOM elements before paint<\/li>\n<li>Synchronously updating DOM styles<\/li>\n<li>Adjusting scroll position or animations before user interaction<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4 id=\"mistakes-to-avoid\">Mistakes to avoid:<\/strong><\/h4>\n<ul>\n<li>\nUsing <code>useLayoutEffect<\/code> for data fetching unnecessarily blocks rendering, causing a poor user experience.<\/p>\n<\/li>\n<li>\nForgetting to clean up effects like event listeners, which can cause memory leaks.<\/p>\n<\/li>\n<li>\nAssuming both hooks behave the same – <code>useLayoutEffect<\/code> blocks paint, so it should be used carefully.<\/p>\n<\/li>\n<\/ul>\n<h4 id=\"best-practices\">Best practices:<\/strong><\/h4>\n<ul>\n<li>\nDefault to using <code>useEffect<\/code> unless layout measurements or synchronous DOM updates are required.<\/p>\n<\/li>\n<li>\nAlways clean up side effects in the return function to avoid resource leaks.<\/p>\n<\/li>\n<\/ul>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n const<\/span> handleResize<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span> \/* logic *\/<\/span> }<\/span>;<\/span>\n window.<\/span>addEventListener<\/span>(<\/span>'resize'<\/span>,<\/span> handleResize)<\/span>;<\/span>\n return<\/span> (<\/span>)<\/span> =><\/span> window.<\/span>removeEventListener<\/span>(<\/span>'resize'<\/span>,<\/span> handleResize)<\/span>;<\/span>\n}<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\n<h4 id=\"interview-scenarios\">Interview scenarios:<\/strong><\/h4>\n<ul>\n<li>\nYou are asked to explain how React manages updates and why <code>useLayoutEffect<\/code> might be necessary in animation-heavy applications.<\/p>\n<\/li>\n<li>\nYou are given a component that flickers when updated and asked to debug why the layout measurement might be happening too late.<\/p>\n<\/li>\n<li>\nYou are asked how to manage side effects in components and what the difference between synchronous and asynchronous updates is.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used--state-management--intermediate\">12. What is the purpose of callback function argument format of <code>setState()<\/code> in React and when should it be used?<\/strong> | State Management | Intermediate<\/h3>\nThe callback function format of <code>setState()<\/code> ensures that state updates are calculated based on the most recent state and props. It\u2019s important when the new state depends on the current state because React batches updates asynchronously.<\/p>\n<h4 id=\"explanation\">Explanation:<\/strong><\/h4>\nReact\u2019s <code>setState()<\/code> doesn\u2019t immediately update the state instead, it schedules an update. If you calculate the next state based on the current state directly, you may end up using a stale value.<\/p>\nThe callback format takes two arguments:<\/p>\n<ul>\n<li><code>prevState<\/code>: The state before the update<\/li>\n<li><code>props<\/code>: The latest props passed to the component<\/li>\n<\/ul>\nThis ensures your update logic always references the correct state.<\/p>\n<h4 id=\"example-1\">Example:<\/h4>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">class<\/span> Counter<\/span> extends<\/span> React.<\/span>Component<\/span> {<\/span>\n state =<\/span> {<\/span> count:<\/span> 0<\/span> }<\/span>;<\/span>\n\n increment<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n this<\/span>.<\/span>setState<\/span>(<\/span>(<\/span>prevState,<\/span> props)<\/span> =><\/span> (<\/span>{<\/span>\n count:<\/span> prevState.<\/span>count +<\/span> 1<\/span>\n }<\/span>)<\/span>)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n render<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>p<\/span>><\/span><\/span>Count:<\/span> {<\/span>this<\/span>.<\/span>state.<\/span>count}<\/span><\/<\/span>p<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>this<\/span>.<\/span>increment}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n }<\/span>\n}<\/span>\n<\/code><\/pre>\nIf you used this instead, it could cause bugs:<\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">this<\/span>.<\/span>setState<\/span>(<\/span>{<\/span>\n count:<\/span> this<\/span>.<\/span>state.<\/span>count +<\/span> 1<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nBecause multiple calls to <code>increment<\/code> might not correctly use the updated value of <code>count<\/code>.<\/p>\n<h4 id=\"when-should-it-be-used\">When should it be used:<\/strong><\/h4>\n<ul>\n<li>\nWhen updating state based on previous state, such as toggling values, counters, or accumulative calculations.<\/p>\n<\/li>\n<li>\nWhen updates need to ensure they are using the latest state, especially in event handlers or asynchronous operations.<\/p>\n<\/li>\n<\/ul>\n<h4 id=\"mistakes-to-avoid-1\">Mistakes to avoid:<\/strong><\/h4>\n<ul>\n<li>\nUpdating state directly using <code>this.state<\/code> instead of <code>prevState<\/code> may lead to inconsistent updates.<\/p>\n<\/li>\n<li>\nNot recognizing that state updates are batched and asynchronous, especially in concurrent rendering.<\/p>\n<\/li>\n<\/ul>\n<h4 id=\"best-practices-1\">Best practices:<\/strong><\/h4>\n<ul>\n<li>Always use the callback format when the new state depends on previous values.<\/li>\n<li>Avoid side effects within <code>setState()<\/code> callbacks keep logic pure and predictable.<\/li>\n<\/ul>\n<h4 id=\"interview-scenarios-1\">Interview scenarios:<\/strong><\/h4>\n<ul>\n<li>Asked to implement a counter where multiple increments happen quickly.<\/li>\n<li>Asked to explain how React manages asynchronous state updates.<\/li>\n<li>Asked why certain bugs happen when state is updated based on stale values.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-does-the-dependency-array-of-useeffect-affect--hooks-side-effects--intermediate\">13. What does the dependency array of <code>useEffect<\/code> affect?<\/strong> | Hooks Side Effects | Intermediate<\/h3>\nThe dependency array determines when the effect should be re-executed after renders. It\u2019s crucial to manage this correctly to avoid unnecessary reruns or stale data.<\/p>\nExplanation:<\/strong><\/p>\n<ul>\n<li>If the dependency array is empty (<code>[]<\/code>), the effect runs once after the initial render.<\/li>\n<li>If the array includes variables, the effect runs whenever one of them changes.<\/li>\n<li>If omitted, the effect runs after every render, which can lead to performance issues.<\/li>\n<\/ul>\n<h4 id=\"example-2\">Example:<\/h4>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useState,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Timer<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Effect runs'<\/span>)<\/span>;<\/span>\n const<\/span> interval =<\/span> setInterval<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n setCount<\/span>(<\/span>c =><\/span> c +<\/span> 1<\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> 1000<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>)<\/span> =><\/span> clearInterval<\/span>(<\/span>interval)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span> \/\/ Empty array: effect runs once on mount<\/span>\n\n return<\/span> <<\/span>div<\/span>><\/span><\/span>Count:<\/span> {<\/span>count}<\/span><\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nIf we used <code>[count]<\/code>, it would re-run the effect on every count update, unnecessarily creating new intervals.<\/p>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Forgetting to include all relevant dependencies, which can cause bugs due to stale closures.<\/li>\n<li>Adding too many dependencies, causing unnecessary rerenders.<\/li>\n<li>Omitting the array entirely, which makes effects run on every render.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Include all dependencies that are referenced inside the effect to avoid stale data.<\/li>\n<li>Use <code>useCallback<\/code> or <code>useMemo<\/code> to stabilize functions or values used as dependencies.<\/li>\n<li>Use ESLint\u2019s <code>react-hooks\/exhaustive-deps<\/code> rule to catch missing dependencies.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked how effects can cause bugs due to stale closures.<\/li>\n<li>Asked how to handle API calls inside <code>useEffect<\/code>.<\/li>\n<li>Asked why developers should not omit the dependency array.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-useref-hook-in-react-and-when-should-it-be-used--hooks-refs--intermediate\">14. What is the <code>useRef<\/code> hook in React and when should it be used?<\/strong> | Hooks Refs | Intermediate<\/h3>\n<code>useRef<\/code> creates a persistent reference that doesn\u2019t cause rerenders when updated. It\u2019s commonly used to access DOM elements or keep mutable state across renders.<\/p>\nExplanation:<\/strong><\/p>\n<ul>\n<li>Returns a mutable object <code>{ current: ... }<\/code>.<\/li>\n<li>Persists across renders, making it suitable for storing values without triggering updates.<\/li>\n<li>Useful for:\n<ul>\n<li>Accessing DOM nodes<\/li>\n<li>Storing previous state<\/li>\n<li>Holding intervals or timers<\/li>\n<li>Managing focus<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4 id=\"example-focus-input\">Example (Focus input):<\/h4>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useRef,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> FocusInput<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> inputRef =<\/span> useRef<\/span>(<\/span>null<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n inputRef.<\/span>current.<\/span>focus<\/span>(<\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>input<\/span> ref<\/span>=<\/span>{<\/span>inputRef}<\/span><\/span> type<\/span>=<\/span>\"<\/span>text\"<\/span><\/span> \/><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>Manipulating DOM directly (focus, scroll, measurements).<\/li>\n<li>Storing mutable values that should not cause rerenders.<\/li>\n<li>Keeping references to timers, WebSocket connections, or subscriptions.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Using <code>useRef<\/code> for state that should trigger UI updates use <code>useState<\/code> instead.<\/li>\n<li>Forgetting that <code>useRef<\/code> does not cause rerenders when its value changes.<\/li>\n<li>Overusing refs instead of proper state management.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Use <code>useRef<\/code> for non-render affecting data.<\/li>\n<li>Keep ref logic outside of component state to avoid unnecessary complexity.<\/li>\n<li>Avoid using it as a substitute for state management when state-driven UI changes are required.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked to manage form input focus.<\/li>\n<li>Asked how to store previous render values without triggering rerenders.<\/li>\n<li>Asked how to manipulate DOM directly within functional components.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-usecallback-hook-in-react-and-when-should-it-be-used--hooks-performance-optimization--intermediate\">15. What is the <code>useCallback<\/code> hook in React and when should it be used?<\/strong> | Hooks Performance Optimization | Intermediate<\/h3>\n<code>useCallback<\/code> memoizes functions so that they are only recreated when dependencies change. It\u2019s a performance optimization that prevents unnecessary rerenders, especially in child components.<\/p>\nExplanation:<\/strong><\/p>\nFunctions in JavaScript are recreated every time a component rerenders. If a function is passed as a prop to a child, the child may rerender unnecessarily. <code>useCallback<\/code> ensures that the function reference stays stable unless its dependencies change.<\/p>\n<h4 id=\"example-3\">Example:<\/h4>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useState,<\/span> useCallback }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Parent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n const<\/span> increment =<\/span> useCallback<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n setCount<\/span>(<\/span>c =><\/span> c +<\/span> 1<\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>Child<\/span> onIncrement<\/span>=<\/span>{<\/span>increment}<\/span><\/span> \/><\/span><\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> Child<\/span>(<\/span>{<\/span> onIncrement }<\/span>)<\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>\"Child rendered\"<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>onIncrement}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nIn this example, <code>Child<\/code> will not rerender unnecessarily because the <code>increment<\/code> function is memoized.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>Passing callbacks to optimized child components.<\/li>\n<li>Avoiding function recreation when dependencies are unchanged.<\/li>\n<li>Managing expensive event handlers.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Using <code>useCallback<\/code> indiscriminately it adds overhead and complexity without real benefits in simpler cases.<\/li>\n<li>Forgetting to include dependencies, leading to stale references.<\/li>\n<li>Overusing memoization without profiling.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Use <code>useCallback<\/code> when functions are passed as props and you want to prevent rerenders.<\/li>\n<li>Include all relevant dependencies in the dependency array.<\/li>\n<li>Profile performance before over-optimizing.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked how to avoid unnecessary renders in performance-critical applications.<\/li>\n<li>Asked to explain how closures and stale references occur in hooks.<\/li>\n<li>Asked why memoization is important in component hierarchies.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-usememo-hook-in-react-and-when-should-it-be-used--performance-optimization--intermediate\">16. What is the <code>useMemo<\/code> hook in React and when should it be used?<\/strong> | Performance Optimization | Intermediate<\/h3>\n<code>useMemo<\/code> is a React hook that memoizes the result of a function so that it is only recalculated when its dependencies change. This helps avoid expensive computations on every render and improves performance.<\/p>\nExplanation:<\/strong><\/p>\nIn React, computations or derived state that rely on props or state might be expensive. Without memoization, these computations would run every time the component rerenders. <code>useMemo<\/code> caches the result and recalculates only when dependencies change.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useState,<\/span> useMemo }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>text,<\/span> setText]<\/span> =<\/span> useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span>\n\n const<\/span> factorial =<\/span> useMemo<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Calculating factorial...'<\/span>)<\/span>;<\/span>\n return<\/span> computeFactorial<\/span>(<\/span>count)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>count]<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>h1<\/span>><\/span><\/span>Factorial of<\/span> {<\/span>count}<\/span> is {<\/span>factorial}<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <<\/span>input<\/span> value<\/span>=<\/span>{<\/span>text}<\/span><\/span> onChange<\/span>=<\/span>{<\/span>e =><\/span> setText<\/span>(<\/span>e.<\/span>target.<\/span>value)<\/span>}<\/span><\/span> placeholder<\/span>=<\/span>\"<\/span>Type here\"<\/span><\/span> \/><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> computeFactorial<\/span>(<\/span>n)<\/span> {<\/span>\n if<\/span> (<\/span>n <=<\/span> 0<\/span>)<\/span> return<\/span> 1<\/span>;<\/span>\n return<\/span> n *<\/span> computeFactorial<\/span>(<\/span>n -<\/span> 1<\/span>)<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nIn this example, changing <code>text<\/code> won\u2019t recalculate the factorial because the dependency array ensures it only recomputes when <code>count<\/code> changes.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>Avoid expensive computations on every render.<\/li>\n<li>Memoize derived data from props or state.<\/li>\n<li>Improve performance in large component trees.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Overusing <code>useMemo<\/code> for trivial computations where caching overhead outweighs the benefits.<\/li>\n<li>Not specifying the correct dependencies, which can lead to stale or incorrect results.<\/li>\n<li>Assuming <code>useMemo<\/code> always improves performance without profiling.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Use it when you have expensive computations.<\/li>\n<li>Always include all dependencies that affect the computation.<\/li>\n<li>Profile performance to justify memoization.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked how to optimize performance when components rerender frequently.<\/li>\n<li>Asked to explain how memoization avoids unnecessary computations.<\/li>\n<li>Asked to contrast <code>useMemo<\/code> and <code>useCallback<\/code>.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-usereducer-hook-in-react-and-when-should-it-be-used--state-management--intermediate\">17. What is the <code>useReducer<\/code> hook in React and when should it be used?<\/strong> | State Management | Intermediate<\/h3>\n<code>useReducer<\/code> is a hook that manages complex state logic by using a reducer function. It\u2019s an alternative to <code>useState<\/code>, suitable when state has multiple sub-values or when the next state depends on the previous state.<\/p>\nExplanation:<\/strong><\/p>\nA reducer is a function that takes the current state and an action, and returns a new state. <code>useReducer<\/code> provides a more structured way of updating state, especially when state transitions are complex or require multiple branches of logic.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useReducer }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> initialState =<\/span> {<\/span> count:<\/span> 0<\/span> }<\/span>;<\/span>\n\nfunction<\/span> reducer<\/span>(<\/span>state,<\/span> action)<\/span> {<\/span>\n switch<\/span>(<\/span>action.<\/span>type)<\/span> {<\/span>\n case<\/span> 'increment'<\/span>:<\/span>\n return<\/span> {<\/span> count:<\/span> state.<\/span>count +<\/span> 1<\/span> }<\/span>;<\/span>\n case<\/span> 'decrement'<\/span>:<\/span>\n return<\/span> {<\/span> count:<\/span> state.<\/span>count -<\/span> 1<\/span> }<\/span>;<\/span>\n default<\/span>:<\/span>\n throw<\/span> new<\/span> Error<\/span>(<\/span>'Unknown action'<\/span>)<\/span>;<\/span>\n }<\/span>\n}<\/span>\n\nfunction<\/span> Counter<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>state,<\/span> dispatch]<\/span> =<\/span> useReducer<\/span>(<\/span>reducer,<\/span> initialState)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>h1<\/span>><\/span><\/span>Count:<\/span> {<\/span>state.<\/span>count}<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n <<\/span>button onClick=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> dispatch<\/span>(<\/span>{<\/span> type:<\/span> 'increment'<\/span> }<\/span>)<\/span>}<\/span>><\/span>+<\/span><\/<\/span>button<\/span>><\/span><\/span>\n <<\/span>button onClick=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> dispatch<\/span>(<\/span>{<\/span> type:<\/span> 'decrement'<\/span> }<\/span>)<\/span>}<\/span>><\/span>-<\/span><\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> Counter;<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>When state is an object with multiple properties.<\/li>\n<li>When state updates depend on the current state.<\/li>\n<li>When managing forms, complex UI interactions, or nested state.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Using it when <code>useState<\/code> is sufficient, adding unnecessary complexity.<\/li>\n<li>Forgetting to handle unknown actions, which may cause errors.<\/li>\n<li>Not memoizing the reducer function when needed.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Define clear action types.<\/li>\n<li>Separate state logic from component logic for readability.<\/li>\n<li>Use context with <code>useReducer<\/code> to share state across components.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked to manage complex form states with multiple inputs.<\/li>\n<li>Asked to implement undo\/redo functionality using state history.<\/li>\n<li>Asked to refactor <code>useState<\/code> logic into <code>useReducer<\/code>.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-useid-hook-in-react-and-when-should-it-be-used--accessibility--forms--intermediate\">18. What is the <code>useId<\/code> hook in React and when should it be used?<\/strong> | Accessibility \/ Forms | Intermediate<\/h3>\n<code>useId<\/code> generates unique IDs that are stable across server and client renders. It is particularly useful for linking form elements, labels, and other accessibility-related attributes.<\/p>\nExplanation:<\/strong><\/p>\nGenerating unique IDs is important to prevent clashes when rendering forms or components multiple times. <code>useId<\/code> ensures IDs are unique even when server-side rendering (SSR) is used, which helps with hydration and accessibility.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useId }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> LoginForm<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> id =<\/span> useId<\/span>(<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>form<\/span>><\/span><\/span>\n <<\/span>label<\/span> htmlFor<\/span>=<\/span>{<\/span>id}<\/span><\/span>><\/span><\/span>Username:<\/span><\/<\/span>label<\/span>><\/span><\/span>\n <<\/span>input<\/span> id<\/span>=<\/span>{<\/span>id}<\/span><\/span> type<\/span>=<\/span>\"<\/span>text\"<\/span><\/span> \/><\/span><\/span>\n <\/<\/span>form<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, the <code>id<\/code> generated by <code>useId<\/code> ensures that the <code>label<\/code> is correctly associated with the <code>input<\/code>.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>Linking labels to form inputs.<\/li>\n<li>Generating unique IDs for accessibility attributes.<\/li>\n<li>Ensuring SSR compatibility with stable IDs.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Using random or incremental IDs that break during hydration.<\/li>\n<li>Forgetting to use <code>useId<\/code> when accessibility features require unique identifiers.<\/li>\n<li>Manually managing IDs in complex forms leading to duplication.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Always use <code>useId<\/code> for form-related accessibility.<\/li>\n<li>Avoid global counters for generating IDs.<\/li>\n<li>Ensure IDs remain consistent across renders.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked to improve form accessibility.<\/li>\n<li>Asked how server-side rendering affects unique identifiers.<\/li>\n<li>Asked to explain how hydration issues arise in React.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-does-re-rendering-mean-in-react--rendering-concepts--easy\">19. What does re-rendering mean in React?<\/strong> | Rendering Concepts | Easy<\/h3>\nRe-rendering refers to the process where React updates a component\u2019s output based on changes in its state or props. React recalculates the virtual DOM and updates the actual DOM to reflect those changes.<\/p>\nExplanation:<\/strong><\/p>\nWhenever a component\u2019s state or props change, React schedules a rerender. It creates a new virtual DOM tree, compares it to the previous one using the reconciliation process, and applies only the differences to the real DOM.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Counter<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n console.<\/span>log<\/span>(<\/span>\"Component rendered\"<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>h1<\/span>><\/span><\/span>Count:<\/span> {<\/span>count}<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nEach time you click the button, the state changes, causing React to rerender the component.<\/p>\nWhen re-rendering happens:<\/strong><\/p>\n<ul>\n<li>State updates using <code>useState<\/code> or <code>setState<\/code>.<\/li>\n<li>Props change from a parent component.<\/li>\n<li>Context value changes.<\/li>\n<li>Force updates triggered programmatically.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Causing unnecessary renders by not memoizing functions or objects passed as props.<\/li>\n<li>Deeply nesting state and causing complex rerenders.<\/li>\n<li>Forgetting that every state change triggers a rerender.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Lift state only when necessary.<\/li>\n<li>Use <code>React.memo<\/code> or <code>useCallback<\/code> to optimize rerenders.<\/li>\n<li>Keep state flat and minimal to reduce complexity.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked how React handles updates efficiently.<\/li>\n<li>Asked to explain why components rerender after state changes.<\/li>\n<li>Asked to debug performance issues related to unnecessary rerenders.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-react-fragments-used-for--jsx--rendering--easy\">20. What are React Fragments used for?<\/strong> | JSX \/ Rendering | Easy<\/h3>\nReact Fragments allow you to group multiple elements without adding extra nodes to the DOM. It\u2019s useful when you want to return multiple elements from a component without introducing unnecessary wrappers.<\/p>\nExplanation:<\/strong><\/p>\nNormally, JSX requires a single parent element. React Fragments let you group elements without rendering extra DOM nodes, which can interfere with layout or styling.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> List<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>><\/span>\n <<\/span>li<\/span>><\/span><\/span>Item 1<\/span><\/<\/span>li<\/span>><\/span><\/span>\n <<\/span>li<\/span>><\/span><\/span>Item 2<\/span><\/<\/span>li<\/span>><\/span><\/span>\n <<\/span>li<\/span>><\/span><\/span>Item 3<\/span><\/<\/span>li<\/span>><\/span><\/span>\n <<\/span>\/<\/span>><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nThis way, the component returns multiple list items without wrapping them in a <code><div><\/code> or other container.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>Grouping elements in a list without extra DOM nodes.<\/li>\n<li>Avoiding unnecessary wrappers that complicate styling or structure.<\/li>\n<li>Returning multiple elements from a component.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Forgetting to wrap elements when JSX expects a single parent.<\/li>\n<li>Using extra <code><div><\/code> containers that break CSS layouts.<\/li>\n<li>Overusing fragments where semantic HTML elements are better.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Use fragments when grouping elements that don\u2019t need a container.<\/li>\n<li>Keep your component tree clean and avoid unnecessary DOM nodes.<\/li>\n<li>Use <code>React.Fragment<\/code> if you need to attach keys in lists.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked how to return multiple elements from a component.<\/li>\n<li>Asked why unnecessary DOM nodes can cause styling issues.<\/li>\n<li>Asked to explain differences between fragments and regular containers.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-forwardref-in-react-used-for--refs--advanced-patterns--intermediate\">21. What is <code>forwardRef()<\/code> in React used for?<\/strong> | Refs \/ Advanced Patterns | Intermediate<\/h3>\n<code>forwardRef()<\/code> is a React API that allows a component to forward its ref to one of its child components. This is useful when the parent component needs direct access to a DOM element or a child component\u2019s instance.<\/p>\nExplanation:<\/strong><\/p>\nNormally, refs are used to directly access DOM elements or components. However, when you wrap a component, its ref doesn\u2019t automatically get passed down. <code>forwardRef()<\/code> lets you explicitly forward the ref to a specific child, enabling scenarios like focusing inputs or managing animations.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> forwardRef,<\/span> useRef }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> CustomInput =<\/span> forwardRef<\/span>(<\/span>(<\/span>props,<\/span> ref)<\/span> =><\/span> {<\/span>\n return<\/span> <<\/span>input<\/span> ref<\/span>=<\/span>{<\/span>ref}<\/span><\/span> {<\/span>...<\/span>props<\/span>}<\/span><\/span> \/><\/span><\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> inputRef =<\/span> useRef<\/span>(<\/span>)<\/span>;<\/span>\n\n const<\/span> focusInput<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n inputRef.<\/span>current.<\/span>focus<\/span>(<\/span>)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>CustomInput<\/span> ref<\/span>=<\/span>{<\/span>inputRef}<\/span><\/span> placeholder<\/span>=<\/span>\"<\/span>Type here\"<\/span><\/span> \/><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>focusInput}<\/span><\/span>><\/span><\/span>Focus Input<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span>\n<\/code><\/pre>\nHere, <code>CustomInput<\/code> forwards the ref to the <code><input><\/code> element, enabling <code>App<\/code> to call <code>focus()<\/code>.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nWhen you need to expose a DOM element or instance to a parent component.<\/p>\n<\/li>\n<li>\nFor building reusable input components that need focus or selection management.<\/p>\n<\/li>\n<li>\nWhen integrating with third-party libraries that require direct DOM manipulation.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nForgetting to forward the ref and expecting it to work automatically.<\/p>\n<\/li>\n<li>\nUsing <code>forwardRef()<\/code> when it\u2019s unnecessary, adding complexity.<\/p>\n<\/li>\n<li>\nNot handling the ref correctly in functional components.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse <code>forwardRef()<\/code> for wrapper components that need to expose internal elements.<\/p>\n<\/li>\n<li>\nDocument how the forwarded ref is used in the component\u2019s API.<\/p>\n<\/li>\n<li>\nCombine <code>forwardRef()<\/code> with <code>useImperativeHandle<\/code> when you need to expose custom instance methods.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked to explain how to control a child input from the parent.<\/p>\n<\/li>\n<li>\nAsked to implement reusable form fields with ref forwarding.<\/p>\n<\/li>\n<li>\nAsked to expose methods in functional components.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-do-you-reset-a-components-state-in-react--state-management--beginner\">22. How do you reset a component\u2019s state in React?<\/strong> | State Management | Beginner<\/h3>\nResetting a component\u2019s state means restoring it to its initial values, often used after form submissions or when navigating between views.<\/p>\nExplanation:<\/strong><\/p>\nState in React is mutable through <code>setState<\/code> or the <code>useState<\/code> hook. To reset it, you simply assign the initial state again. This ensures the component\u2019s UI reflects the reset state.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> initialState =<\/span> {<\/span> name:<\/span> ''<\/span>,<\/span> email:<\/span> ''<\/span> }<\/span>;<\/span>\n\nfunction<\/span> Form<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>formData,<\/span> setFormData]<\/span> =<\/span> useState<\/span>(<\/span>initialState)<\/span>;<\/span>\n\n const<\/span> handleReset<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n setFormData<\/span>(<\/span>initialState)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>input\n value=<\/span>{<\/span>formData.<\/span>name}<\/span>\n onChange=<\/span>{<\/span>(<\/span>e)<\/span> =><\/span> setFormData<\/span>(<\/span>{<\/span> ...<\/span>formData,<\/span> name:<\/span> e.<\/span>target.<\/span>value }<\/span>)<\/span>}<\/span>\n placeholder=<\/span>\"Name\"<\/span>\n \/<\/span>><\/span>\n <<\/span>input\n value=<\/span>{<\/span>formData.<\/span>email}<\/span>\n onChange=<\/span>{<\/span>(<\/span>e)<\/span> =><\/span> setFormData<\/span>(<\/span>{<\/span> ...<\/span>formData,<\/span> email:<\/span> e.<\/span>target.<\/span>value }<\/span>)<\/span>}<\/span>\n placeholder=<\/span>\"Email\"<\/span>\n \/<\/span>><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>handleReset}<\/span><\/span>><\/span><\/span>Reset<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> Form;<\/span>\n<\/code><\/pre>\nClicking the reset button clears the form fields.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nAfter submitting or canceling a form.<\/p>\n<\/li>\n<li>\nWhen switching between different data views.<\/p>\n<\/li>\n<li>\nFor clearing controlled inputs.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nMutating the state directly instead of using <code>setState<\/code>.<\/p>\n<\/li>\n<li>\nUsing stale state when resetting due to incorrect reference copying.<\/p>\n<\/li>\n<li>\nForgetting to reset nested objects properly.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nStore initial state in a constant and reuse it.<\/p>\n<\/li>\n<li>\nAvoid mutating state; always create a new object when resetting.<\/p>\n<\/li>\n<li>\nEnsure form fields are controlled with <code>value<\/code> and <code>onChange<\/code>.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked to implement a form that can be reset.<\/p>\n<\/li>\n<li>\nAsked how to manage controlled form inputs.<\/p>\n<\/li>\n<li>\nAsked about state immutability and how to ensure state is updated correctly.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"why-does-react-recommend-against-mutating-state--state-management--best-practices--intermediate\">23. Why does React recommend against mutating state?<\/strong> | State Management \/ Best Practices | Intermediate<\/h3>\nReact\u2019s rendering system relies on detecting changes in state. If state is mutated directly, React may not detect changes, causing rendering bugs and stale UI.<\/p>\nExplanation:<\/strong><\/p>\nReact uses shallow comparison to determine if state or props have changed. When you mutate state directly, you don\u2019t create a new reference, so React may not rerender the component even though data has changed.<\/p>\nExample of incorrect approach:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> [<\/span>items,<\/span> setItems]<\/span> =<\/span> useState<\/span>(<\/span>[<\/span>1<\/span>,<\/span> 2<\/span>,<\/span> 3<\/span>]<\/span>)<\/span>;<\/span>\n\nfunction<\/span> addItem<\/span>(<\/span>)<\/span> {<\/span>\n items.<\/span>push<\/span>(<\/span>4<\/span>)<\/span>;<\/span> \/\/ Direct mutation!<\/span>\n setItems<\/span>(<\/span>items)<\/span>;<\/span> \/\/ React might not rerender<\/span>\n}<\/span>\n<\/code><\/pre>\nCorrect approach:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> addItem<\/span>(<\/span>)<\/span> {<\/span>\n setItems<\/span>(<\/span>prevItems =><\/span> [<\/span>...<\/span>prevItems,<\/span> 4<\/span>]<\/span>)<\/span>;<\/span> \/\/ Create new array<\/span>\n}<\/span>\n<\/code><\/pre>\nWhy mutation causes issues:<\/strong><\/p>\n<ul>\n<li>\nReact compares old and new state by reference.<\/p>\n<\/li>\n<li>\nMutated state keeps the same reference, causing skipped renders.<\/p>\n<\/li>\n<li>\nMay lead to bugs where UI doesn\u2019t update correctly.<\/p>\n<\/li>\n<\/ul>\nWhen this becomes a problem:<\/strong><\/p>\n<ul>\n<li>\nComplex state objects or arrays.<\/p>\n<\/li>\n<li>\nNested state that\u2019s deeply updated.<\/p>\n<\/li>\n<li>\nOptimized components using <code>React.memo<\/code>.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nMutating arrays with <code>push<\/code> or <code>splice<\/code> instead of creating new arrays.<\/p>\n<\/li>\n<li>\nMutating objects by assigning properties directly.<\/p>\n<\/li>\n<li>\nMixing mutable and immutable patterns.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nAlways create a new object or array when updating state.<\/p>\n<\/li>\n<li>\nUse helper functions like <code>map<\/code>, <code>filter<\/code>, or <code>spread syntax<\/code>.<\/p>\n<\/li>\n<li>\nEmbrace immutability for predictable rendering and debugging.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked why state changes sometimes don\u2019t reflect in the UI.<\/p>\n<\/li>\n<li>\nAsked to identify why a component doesn\u2019t rerender after updating state.<\/p>\n<\/li>\n<li>\nAsked how immutability helps in debugging or optimizing performance.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-error-boundaries-in-react-for--error-handling--intermediate\">24. What are error boundaries in React for?<\/strong> | Error Handling | Intermediate<\/h3>\nError boundaries are special React components that catch errors in their child components during rendering, lifecycle methods, or constructors, preventing the entire app from crashing.<\/p>\nExplanation:<\/strong><\/p>\nReact\u2019s component tree doesn\u2019t handle errors by default. Error boundaries act as a safeguard by catching JavaScript errors and showing fallback UI instead of breaking the entire application.<\/p>\nHow they work:<\/strong><\/p>\n<ul>\n<li>\nImplemented using <code>componentDidCatch<\/code> and <code>getDerivedStateFromError<\/code>.<\/p>\n<\/li>\n<li>\nCatch errors in rendering, lifecycle methods, and constructors.<\/p>\n<\/li>\n<li>\nDon\u2019t catch errors in event handlers, asynchronous code, or server-side rendering.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React from<\/span> 'react'<\/span>;<\/span>\n\nclass<\/span> ErrorBoundary<\/span> extends<\/span> React.<\/span>Component<\/span> {<\/span>\n constructor<\/span>(<\/span>props)<\/span> {<\/span>\n super<\/span>(<\/span>props)<\/span>;<\/span>\n this<\/span>.<\/span>state =<\/span> {<\/span> hasError:<\/span> false<\/span> }<\/span>;<\/span>\n }<\/span>\n\n static<\/span> getDerivedStateFromError<\/span>(<\/span>error)<\/span> {<\/span>\n return<\/span> {<\/span> hasError:<\/span> true<\/span> }<\/span>;<\/span>\n }<\/span>\n\n componentDidCatch<\/span>(<\/span>error,<\/span> info)<\/span> {<\/span>\n console.<\/span>error<\/span>(<\/span>\"Error caught:\"<\/span>,<\/span> error,<\/span> info)<\/span>;<\/span>\n }<\/span>\n\n render<\/span>(<\/span>)<\/span> {<\/span>\n if<\/span> (<\/span>this<\/span>.<\/span>state.<\/span>hasError)<\/span> {<\/span>\n return<\/span> <<\/span>h2<\/span>><\/span><\/span>Something went wrong.<\/span><\/<\/span>h2<\/span>><\/span><\/span>;<\/span>\n }<\/span>\n return<\/span> this<\/span>.<\/span>props.<\/span>children;<\/span>\n }<\/span>\n}<\/span>\n\nfunction<\/span> BuggyComponent<\/span>(<\/span>)<\/span> {<\/span>\n throw<\/span> new<\/span> Error<\/span>(<\/span>\"Oops!\"<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>div<\/span>><\/span><\/span>Normal content<\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>ErrorBoundary<\/span>><\/span><\/span>\n <<\/span>BuggyComponent<\/span> \/><\/span><\/span>\n <\/<\/span>ErrorBoundary<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nCatch errors in UI rendering.<\/p>\n<\/li>\n<li>\nAvoid breaking the entire app due to a minor component failure.<\/p>\n<\/li>\n<li>\nProvide fallback UI to improve user experience.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nExpecting error boundaries to catch errors in event handlers.<\/p>\n<\/li>\n<li>\nForgetting to log or report the error for debugging.<\/p>\n<\/li>\n<li>\nWrapping too large portions of the app, making error isolation harder.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nWrap only critical parts of the UI.<\/p>\n<\/li>\n<li>\nUse multiple error boundaries to localize errors.<\/p>\n<\/li>\n<li>\nProvide meaningful fallback UI and logging.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to improve app resilience when parts of the UI fail.<\/p>\n<\/li>\n<li>\nAsked to explain how React handles exceptions in child components.<\/p>\n<\/li>\n<li>\nAsked about best practices in debugging production errors.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-do-you-test-react-applications--testing--quality-assurance--intermediate\">25. How do you test React applications?<\/strong> | Testing \/ Quality Assurance | Intermediate<\/h3>\nTesting ensures that React components behave as expected. You can use libraries like Jest and React Testing Library to write unit, integration, and end-to-end tests.<\/p>\nExplanation:<\/strong><\/p>\nTesting helps catch bugs early and ensures UI correctness. Jest is a test runner and assertion library, while React Testing Library simulates user interactions and verifies component behavior without relying on implementation details.<\/p>\nTypes of tests:<\/strong><\/p>\n<ol>\n<li>\nUnit tests:<\/strong> Test individual components or functions.<\/p>\n<\/li>\n<li>\nIntegration tests:<\/strong> Verify how components interact together.<\/p>\n<\/li>\n<li>\nEnd-to-end tests:<\/strong> Test full workflows, often using tools like Cypress.<\/p>\n<\/li>\n<\/ol>\nExample (Unit test with React Testing Library):<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> render,<\/span> screen,<\/span> fireEvent }<\/span> from<\/span> '@testing-library\/react'<\/span>;<\/span>\nimport<\/span> Counter from<\/span> '.\/Counter'<\/span>;<\/span>\n\ntest<\/span>(<\/span>'increments count on button click'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n render<\/span>(<\/span><<\/span>Counter<\/span> \/><\/span><\/span>)<\/span>;<\/span> \nconst<\/span> button =<\/span> screen.<\/span>getByText<\/span>(<\/span>'Increment'<\/span>)<\/span>;<\/span> \nfireEvent.<\/span>click<\/span>(<\/span>button)<\/span>;<\/span> \nexpect<\/span>(<\/span>screen.<\/span>getByText<\/span>(<\/span>'Count: 1'<\/span>)<\/span>)<\/span>.<\/span>toBeInTheDocument<\/span>(<\/span>)<\/span>;<\/span> \n}<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\n<hr>\nWhen to test:<\/strong><\/p>\n<ul>\n<li>Before releasing features.<\/li>\n<li>When fixing bugs.<\/li>\n<li>While refactoring code.<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>Testing implementation details instead of behavior.<\/li>\n<li>Writing brittle tests that break easily with minor refactoring.<\/li>\n<li>Not cleaning up mocks or listeners between tests.<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>Write tests that focus on what the user sees and interacts with.<\/li>\n<li>Use <code>beforeEach<\/code> and <code>afterEach<\/code> to reset state.<\/li>\n<li>Avoid over-mocking unless necessary.<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked how to test a form submission flow.<\/li>\n<li>Asked to explain the difference between unit and integration tests.<\/li>\n<li>Asked why testing UI components improves maintainability.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-what-react-hydration-is--rendering--ssr--intermediate\">26. Explain what React hydration is<\/strong> | Rendering \/ SSR | Intermediate<\/h3>\nHydration is the process where a server-rendered HTML page is \u201cwired up\u201d with JavaScript to make it interactive on the client side.<\/p>\nExplanation:<\/strong><\/p>\nWhen you use Server-Side Rendering (SSR), the server sends a fully rendered HTML page to the browser. This improves load time and SEO. However, the HTML alone isn\u2019t interactive event listeners and state management need to be attached once the JavaScript code is loaded on the client. This process of attaching event handlers and initializing state without replacing the existing markup is called hydration.<\/p>\nHow it works:<\/strong><\/p>\n<ol>\n<li>\nServer renders the page and sends HTML.<\/p>\n<\/li>\n<li>\nThe browser loads the HTML and displays it.<\/p>\n<\/li>\n<li>\nReact runs on the client, finds the matching DOM structure, and attaches event listeners without re-rendering.<\/p>\n<\/li>\n<\/ol>\nExample with Next.js:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">\/\/ pages\/index.js<\/span>\nfunction<\/span> Home<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>h1<\/span>><\/span><\/span>Welcome<\/<\/span>h1<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>\n Count:<\/span> {<\/span>count}<\/span>\n <\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> Home;<\/span>\n<\/code><\/pre>\nThis page can be server-rendered by Next.js and hydrated on the client to become interactive.<\/p>\nWhen hydration is important:<\/strong><\/p>\n<ul>\n<li>\nSEO-focused websites that benefit from server rendering.<\/p>\n<\/li>\n<li>\nApps where fast initial load is critical.<\/p>\n<\/li>\n<li>\nComplex UIs that need both pre-rendered content and interactivity.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nHydration mismatch errors when server and client render differently.<\/p>\n<\/li>\n<li>\nAdding dynamic data on the server that changes on the client without syncing.<\/p>\n<\/li>\n<li>\nNot using consistent props or markup between server and client.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nEnsure that server-rendered markup matches client-side rendering.<\/p>\n<\/li>\n<li>\nAvoid using non-deterministic data during initial render.<\/p>\n<\/li>\n<li>\nHandle loading and fallback states carefully during hydration.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked about the difference between SSR and CSR.<\/p>\n<\/li>\n<li>\nAsked how hydration improves performance.<\/p>\n<\/li>\n<li>\nAsked why hydration errors occur and how to debug them.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-react-portals-used-for--rendering--advanced-patterns--intermediate\">27. What are React Portals used for?<\/strong> | Rendering \/ Advanced Patterns | Intermediate<\/h3>\nPortals allow you to render a component\u2019s children into a DOM node that exists outside the parent component\u2019s hierarchy.<\/p>\nExplanation:<\/strong><\/p>\nSometimes you need UI elements like modals, tooltips, or dropdowns to break out of their parent container\u2019s styles, overflow, or z-index constraints. Portals let you render content elsewhere in the DOM tree while keeping the component\u2019s logic within its parent.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React from<\/span> 'react'<\/span>;<\/span>\nimport<\/span> ReactDOM from<\/span> 'react-dom'<\/span>;<\/span>\n\nfunction<\/span> Modal<\/span>(<\/span>{<\/span> children }<\/span>)<\/span> {<\/span>\n return<\/span> ReactDOM.<\/span>createPortal<\/span>(<\/span>\n <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>modal\"<\/span><\/span>><\/span><\/span>\n {<\/span>children}<\/span>\n <\/<\/span>div<\/span>><\/span><\/span>,<\/span>\n document.<\/span>getElementById<\/span>(<\/span>'modal-root'<\/span>)<\/span> \/\/ outside the main app container<\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>h1<\/span>><\/span><\/span>My App<\/<\/span>h1<\/span>><\/span><\/span>\n <<\/span>Modal<\/span>><\/span><\/span>\n <<\/span>h2<\/span>><\/span><\/span>I'm a modal!<\/span><\/<\/span>h2<\/span>><\/span><\/span>\n <\/<\/span>Modal<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span>\n<\/code><\/pre>\nHere, <code>Modal<\/code> is rendered into a separate <code>div<\/code> with ID <code>modal-root<\/code>, outside the main app tree.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nBuilding modals, popovers, or tooltips.<\/p>\n<\/li>\n<li>\nManaging z-index or overflow issues.<\/p>\n<\/li>\n<li>\nIsolating UI elements that require special handling.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nForgetting to create the target DOM node (<code>modal-root<\/code>).<\/p>\n<\/li>\n<li>\nRendering mismatched content between parent and portal.<\/p>\n<\/li>\n<li>\nNot handling accessibility concerns (like focus trapping).<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nEnsure the portal\u2019s target node exists before rendering.<\/p>\n<\/li>\n<li>\nManage focus and accessibility within portals.<\/p>\n<\/li>\n<li>\nAvoid passing complex state unless needed.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to build a modal component.<\/p>\n<\/li>\n<li>\nAsked how to solve overflow or styling issues in nested layouts.<\/p>\n<\/li>\n<li>\nAsked how to manage event bubbling with portals.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-do-you-debug-react-applications--debugging--tools--beginner\">28. How do you debug React applications?<\/strong> | Debugging \/ Tools | Beginner<\/h3>\nDebugging in React involves inspecting component trees, checking state and props, and identifying errors using browser tools and libraries.<\/p>\nExplanation:<\/strong><\/p>\nDebugging helps developers find and fix issues during development or in production. React apps can be debugged using both built-in browser tools and external libraries designed to inspect React-specific structures.<\/p>\nTools and methods:<\/strong><\/p>\n<ol>\n<li>\nReact Developer Tools:<\/strong> Inspect the component hierarchy, state, and props.<\/p>\n<\/li>\n<li>\nConsole logs:<\/strong> Use <code>console.log()<\/code> to trace state updates or errors.<\/p>\n<\/li>\n<li>\nBreakpoints:<\/strong> Set breakpoints in browser DevTools to step through code.<\/p>\n<\/li>\n<li>\nError boundaries:<\/strong> Catch rendering errors and inspect stack traces.<\/p>\n<\/li>\n<li>\nNetwork inspection:<\/strong> Check API requests and responses.<\/p>\n<\/li>\n<\/ol>\nExample use of React Developer Tools:<\/strong><\/p>\n<ul>\n<li>\nInspect a component\u2019s props.<\/p>\n<\/li>\n<li>\nSee which component caused an error.<\/p>\n<\/li>\n<li>\nTrace state changes and understand component rerenders.<\/p>\n<\/li>\n<\/ul>\nCommon debugging approaches:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">console.<\/span>log<\/span>(<\/span>\"Current state:\"<\/span>,<\/span> state)<\/span>;<\/span>\nconsole.<\/span>error<\/span>(<\/span>\"Something went wrong!\"<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nUse conditionals to debug state transitions or logic flow.<\/p>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nLogging too much data, making debugging harder.<\/p>\n<\/li>\n<li>\nRelying only on <code>console.log<\/code> instead of structured error handling.<\/p>\n<\/li>\n<li>\nForgetting to clean up event listeners or intervals during component unmount.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse React DevTools for structural inspection.<\/p>\n<\/li>\n<li>\nLeverage <code>useEffect<\/code> cleanup functions to manage side effects.<\/p>\n<\/li>\n<li>\nIntegrate monitoring tools like Sentry in production environments.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how you would identify why a component isn\u2019t updating.<\/p>\n<\/li>\n<li>\nAsked how you would debug API calls in a React app.<\/p>\n<\/li>\n<li>\nAsked how you would troubleshoot hydration issues.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-react-strict-mode-and-what-are-its-benefits--development-tools--best-practices--beginner\">29. What is React strict mode and what are its benefits?<\/strong> | Development Tools \/ Best Practices | Beginner<\/h3>\nReact Strict Mode is a tool that helps developers find potential issues by adding additional checks and warnings during development.<\/p>\nExplanation:<\/strong><\/p>\nStrict Mode doesn\u2019t render anything on the screen, but it activates extra checks in the background. It helps catch unsafe lifecycle methods, side effects, deprecated APIs, and other common issues early.<\/p>\nKey features:<\/strong><\/p>\n<ul>\n<li>\nDetects components with unsafe lifecycle methods.<\/p>\n<\/li>\n<li>\nIdentifies side effects and unexpected behaviors.<\/p>\n<\/li>\n<li>\nHighlights deprecated APIs.<\/p>\n<\/li>\n<li>\nHelps prepare code for future versions of React.<\/p>\n<\/li>\n<\/ul>\nExample usage:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>React.StrictMode<\/span>><\/span><\/span>\n <<\/span>MyComponent<\/span> \/><\/span><\/span>\n <\/<\/span>React.StrictMode<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nThis wraps the component and applies extra checks during development.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nDuring development to catch bugs early.<\/p>\n<\/li>\n<li>\nTo prepare for future React updates.<\/p>\n<\/li>\n<li>\nTo ensure best practices in component design.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nThinking it\u2019s meant for production performance optimization.<\/p>\n<\/li>\n<li>\nIgnoring warnings without fixing underlying issues.<\/p>\n<\/li>\n<li>\nConfusing it with error boundaries (they serve different purposes).<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nAlways enable it during development.<\/p>\n<\/li>\n<li>\nUse it alongside testing and code reviews.<\/p>\n<\/li>\n<li>\nAddress warnings to maintain code health.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to ensure code quality in a React app.<\/p>\n<\/li>\n<li>\nAsked how to find side effects or deprecated code.<\/p>\n<\/li>\n<li>\nAsked why a component behaves unexpectedly in strict mode.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-do-you-localize-react-applications--internationalization-i18n--intermediate\">30. How do you localize React applications?<\/strong> | Internationalization (i18n) | Intermediate<\/h3>\nLocalization is the process of adapting an application\u2019s content for different languages and regions, making it accessible to a broader audience.<\/p>\nExplanation:<\/strong><\/p>\nLocalization involves providing translations, date\/time formats, number formats, and culturally appropriate content. In React, libraries like <code>react-i18next<\/code> and <code>react-intl<\/code> make it easier to manage translations and switch languages dynamically.<\/p>\nSteps to localize an app:<\/strong><\/p>\n<ol>\n<li>\nCreate translation files for different languages.<\/p>\n<\/li>\n<li>\nUse an i18n library to load and switch translations.<\/p>\n<\/li>\n<li>\nReplace static text with translatable keys.<\/p>\n<\/li>\n<\/ol>\nExample using <code>react-i18next<\/code>:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">\/\/ i18n.js<\/span>\nimport<\/span> i18n from<\/span> 'i18next'<\/span>;<\/span>\nimport<\/span> {<\/span> initReactI18next }<\/span> from<\/span> 'react-i18next'<\/span>;<\/span>\n\ni18n.<\/span>use<\/span>(<\/span>initReactI18next)<\/span>.<\/span>init<\/span>(<\/span>{<\/span>\n resources:<\/span> {<\/span>\n en:<\/span> {<\/span>\n translation:<\/span> {<\/span>\n welcome_message:<\/span> \"Welcome!\"<\/span>,<\/span>\n }<\/span>,<\/span>\n }<\/span>,<\/span>\n fr:<\/span> {<\/span>\n translation:<\/span> {<\/span>\n welcome_message:<\/span> \"Bienvenue!\"<\/span>,<\/span>\n }<\/span>,<\/span>\n }<\/span>,<\/span>\n }<\/span>,<\/span>\n lng:<\/span> \"en\"<\/span>,<\/span>\n fallbackLng:<\/span> \"en\"<\/span>,<\/span>\n}<\/span>)<\/span>;<\/span>\n\n\/\/ Component<\/span>\nimport<\/span> {<\/span> useTranslation }<\/span> from<\/span> 'react-i18next'<\/span>;<\/span>\n\nfunction<\/span> MyComponent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> {<\/span> t }<\/span> =<\/span> useTranslation<\/span>(<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>p><\/span>{<\/span>t<\/span>(<\/span>'welcome_message'<\/span>)<\/span>}<\/span><<\/span>\/<\/span>p><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nApplications targeting global audiences.<\/p>\n<\/li>\n<li>\nApps with dynamic language switching.<\/p>\n<\/li>\n<li>\nApps needing support for multiple date, time, or currency formats.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nHardcoding text instead of using translation keys.<\/p>\n<\/li>\n<li>\nForgetting to handle fallback languages.<\/p>\n<\/li>\n<li>\nNot considering text direction or pluralization rules.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nStore translations in separate files for maintainability.<\/p>\n<\/li>\n<li>\nUse context-aware translations for complex sentences.<\/p>\n<\/li>\n<li>\nTest with multiple languages to ensure correct rendering.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>Asked how you would support multiple languages in a web app.<\/li>\n<li>Asked how to manage translations for dynamic content.<\/li>\n<li>Asked how to ensure fallback options when translations are missing.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-code-splitting-in-a-react-application--performance-optimization--intermediate\">31. What is code splitting in a React application?<\/strong> | Performance Optimization | Intermediate<\/h3>\nCode splitting is a technique that helps improve performance by breaking the application\u2019s code into smaller chunks and loading them on demand.<\/p>\nExplanation:<\/strong><\/p>\nIn large React applications, bundling everything into one file can slow down the initial load time. Code splitting allows you to split your code at logical points (such as routes or components) so that only the necessary code is loaded when required.<\/p>\nReact provides built-in support for code splitting through <code>React.lazy()<\/code> and <code>Suspense<\/code>, allowing developers to load components asynchronously.<\/p>\nHow it works:<\/strong><\/p>\n<ol>\n<li>\nDefine a component to be lazily loaded using <code>React.lazy<\/code>.<\/p>\n<\/li>\n<li>\nWrap the component with <code>React.Suspense<\/code>, specifying a fallback UI while the component loads.<\/p>\n<\/li>\n<\/ol>\nExample:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">import<\/span> React,<\/span> {<\/span> Suspense,<\/span> lazy }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> LazyComponent =<\/span> lazy<\/span>(<\/span>(<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'.\/LazyComponent'<\/span>)<\/span>)<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>div><\/span>\n <<\/span>h1><\/span>Main App<<\/span>\/<\/span>h1><\/span>\n <<\/span>Suspense fallback=<\/span>{<\/span><<\/span>div><\/span>Loading...<\/span><<\/span>\/<\/span>div><\/span>}<\/span>><\/span>\n <<\/span>LazyComponent \/<\/span>><\/span>\n <<\/span>\/<\/span>Suspense><\/span>\n <<\/span>\/<\/span>div><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span>\n<\/code><\/pre>\nHere, <code>LazyComponent<\/code> is loaded only when needed, improving the initial load time.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nLarge applications with multiple routes.<\/p>\n<\/li>\n<li>\nComponents not required at the initial render.<\/p>\n<\/li>\n<li>\nReducing the size of JavaScript bundles.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nNot wrapping lazy components with <code>Suspense<\/code>, leading to errors.<\/p>\n<\/li>\n<li>\nOverusing code splitting, causing excessive network requests.<\/p>\n<\/li>\n<li>\nNot handling errors during dynamic imports.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nCode split by route or feature rather than at arbitrary points.<\/p>\n<\/li>\n<li>\nUse fallback UI that provides useful loading feedback.<\/p>\n<\/li>\n<li>\nCombine with error boundaries to handle loading failures gracefully.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to optimize performance for large React apps.<\/p>\n<\/li>\n<li>\nAsked why code splitting is beneficial.<\/p>\n<\/li>\n<li>\nAsked how to handle lazy loading errors in production.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders--state-management--performance--advanced\">32. How would one optimize the performance of React contexts to reduce rerenders?<\/strong> | State Management \/ Performance | Advanced<\/h3>\nOptimizing React context involves ensuring that only the necessary components re-render when context values change.<\/p>\nExplanation:<\/strong><\/p>\nReact\u2019s context API provides a way to pass data through the component tree without prop drilling. However, when context values change, all components that consume the context re-render by default, even if they don\u2019t use the changed part of the context.<\/p>\nOptimizing context ensures better performance by minimizing unnecessary re-renders.<\/p>\nTechniques to optimize:<\/strong><\/p>\n<ol>\n<li>Memoize context values:<\/strong> \nUse <code>useMemo<\/code> to prevent context values from changing unnecessarily.<\/li>\n<\/ol>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">const<\/span> value =<\/span> useMemo<\/span>(<\/span>(<\/span>)<\/span> =><\/span> (<\/span>{<\/span> state,<\/span> dispatch }<\/span>)<\/span>,<\/span> [<\/span>state,<\/span> dispatch]<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\n<ol start=\"2\">\n<li>\nSplit contexts:<\/strong> \nCreate separate contexts for unrelated state slices.<\/p>\n<\/li>\n<li>\nUse selectors:<\/strong> \nLibraries like <code>use-context-selector<\/code> allow consumers to only listen to specific parts of the context.<\/p>\n<\/li>\n<\/ol>\nExample:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">const<\/span> AppContext =<\/span> React.<\/span>createContext<\/span>(<\/span>)<\/span>;<\/span>\n\nfunction<\/span> AppProvider<\/span>(<\/span>{<\/span> children }<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n const<\/span> value =<\/span> useMemo<\/span>(<\/span>(<\/span>)<\/span> =><\/span> (<\/span>{<\/span> count,<\/span> setCount }<\/span>)<\/span>,<\/span> [<\/span>count]<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>AppContext.<\/span>Provider value=<\/span>{<\/span>value}<\/span>><\/span>\n {<\/span>children}<\/span>\n <<\/span>\/<\/span>AppContext.<\/span>Provider><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to apply:<\/strong><\/p>\n<ul>\n<li>\nApplications with deep component trees.<\/p>\n<\/li>\n<li>\nState shared across unrelated components.<\/p>\n<\/li>\n<li>\nPerformance-critical apps where frequent state updates occur.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nPassing inline objects or functions as context values, triggering re-renders.<\/p>\n<\/li>\n<li>\nUsing a single context for all state, causing widespread updates.<\/p>\n<\/li>\n<li>\nForgetting to memoize or separate unrelated state.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nStructure contexts based on state usage patterns.<\/p>\n<\/li>\n<li>\nAlways memoize values that change over time.<\/p>\n<\/li>\n<li>\nAvoid unnecessary context usage when local state suffices.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked why your app\u2019s performance drops with global state.<\/p>\n<\/li>\n<li>\nAsked how to manage global state in a scalable way.<\/p>\n<\/li>\n<li>\nAsked about alternatives to Redux or MobX.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-higher-order-components-in-react--component-patterns--intermediate\">33. What are higher order components in React?<\/strong> | Component Patterns | Intermediate<\/h3>\nHigher-order components (HOCs) are functions that take a component as input and return a new component with added functionality or props.<\/p>\nExplanation:<\/strong><\/p>\nHOCs are a design pattern for reusing logic across components without duplicating code. Instead of inheritance, you wrap a component to enhance its behavior.<\/p>\nA typical HOC adds props, handles state, or injects logic into wrapped components.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">const<\/span> withLogger<\/span> =<\/span> (<\/span>WrappedComponent)<\/span> =><\/span> {<\/span>\n return<\/span> (<\/span>props)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Rendering with props:'<\/span>,<\/span> props)<\/span>;<\/span>\n return<\/span> <<\/span>WrappedComponent {<\/span>...<\/span>props}<\/span> \/<\/span>><\/span>;<\/span>\n }<\/span>;<\/span>\n}<\/span>;<\/span>\n\nconst<\/span> Hello<\/span> =<\/span> (<\/span>{<\/span> name }<\/span>)<\/span> =><\/span> <<\/span>div><\/span>Hello,<\/span> {<\/span>name}<\/span>!<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n\nconst<\/span> HelloWithLogger =<\/span> withLogger<\/span>(<\/span>Hello)<\/span>;<\/span>\n<\/code><\/pre>\nNow, <code>HelloWithLogger<\/code> logs props before rendering <code>Hello<\/code>.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nReusing component logic like authentication checks or data fetching.<\/p>\n<\/li>\n<li>\nInjecting props without modifying the original component.<\/p>\n<\/li>\n<li>\nEnhancing components for testing or logging.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nMutating props or state inside the HOC.<\/p>\n<\/li>\n<li>\nNot forwarding refs when needed.<\/p>\n<\/li>\n<li>\nUsing HOCs where hooks would suffice, complicating the component tree.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse HOCs for shared logic that applies to multiple components.<\/p>\n<\/li>\n<li>\nAvoid overusing them; prefer hooks where appropriate.<\/p>\n<\/li>\n<li>\nEnsure composability by properly handling props and refs.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked to explain patterns for code reuse.<\/p>\n<\/li>\n<li>\nAsked how you would share logic across multiple components.<\/p>\n<\/li>\n<li>\nAsked why inheritance is avoided in React.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-flux-pattern-and-what-are-its-benefits--state-management--intermediate\">34. What is the Flux pattern and what are its benefits?<\/strong> | State Management | Intermediate<\/h3>\nFlux is an architectural pattern for managing application state with a unidirectional data flow.<\/p>\nExplanation:<\/strong><\/p>\nIn traditional applications, data can flow in multiple directions, making it hard to track state changes. Flux enforces a single direction for data flow, making state management predictable and easier to debug.<\/p>\nCore components:<\/strong><\/p>\n<ol>\n<li>\nDispatcher:<\/strong> Sends actions to stores.<\/p>\n<\/li>\n<li>\nStores:<\/strong> Hold application state and logic.<\/p>\n<\/li>\n<li>\nActions:<\/strong> Define events that change the state.<\/p>\n<\/li>\n<li>\nViews (Components):<\/strong> React to changes in stores and update the UI.<\/p>\n<\/li>\n<\/ol>\nData flow sequence:<\/strong><\/p>\n<ol>\n<li>\nUser triggers an event.<\/p>\n<\/li>\n<li>\nAn action is created and dispatched.<\/p>\n<\/li>\n<li>\nStores update based on the action.<\/p>\n<\/li>\n<li>\nViews re-render with updated state.<\/p>\n<\/li>\n<\/ol>\nBenefits:<\/strong><\/p>\n<ul>\n<li>\nPredictable state transitions.<\/p>\n<\/li>\n<li>\nEasier debugging and tracing of state changes.<\/p>\n<\/li>\n<li>\nSeparation of concerns between data and UI logic.<\/p>\n<\/li>\n<\/ul>\nExample illustration:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">\/\/ Action<\/span>\nconst<\/span> incrementAction =<\/span> {<\/span> type:<\/span> 'INCREMENT'<\/span> }<\/span>;<\/span>\n\n\/\/ Store<\/span>\nlet<\/span> count =<\/span> 0<\/span>;<\/span>\nfunction<\/span> handleAction<\/span>(<\/span>action)<\/span> {<\/span>\n switch<\/span>(<\/span>action.<\/span>type)<\/span> {<\/span>\n case<\/span> 'INCREMENT'<\/span>:<\/span>\n count +=<\/span> 1<\/span>;<\/span>\n break<\/span>;<\/span>\n }<\/span>\n}<\/span>\n<\/code><\/pre>\nThis simplified model shows how actions modify state and trigger UI updates.<\/p>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nOvercomplicating the dispatcher or stores.<\/p>\n<\/li>\n<li>\nUsing it for trivial state instead of shared state.<\/p>\n<\/li>\n<li>\nMixing responsibilities across actions and stores.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nKeep actions descriptive and minimal.<\/p>\n<\/li>\n<li>\nEnsure stores only hold state logic.<\/p>\n<\/li>\n<li>\nUse libraries like Redux that implement Flux principles with added tools.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked why unidirectional data flow helps in complex apps.<\/p>\n<\/li>\n<li>\nAsked how Redux or MobX relate to Flux.<\/p>\n<\/li>\n<li>\nAsked to describe how state changes propagate in your app.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-one-way-data-flow-of-react-and-its-benefits--data-flow--core-concepts--beginner\">35. Explain one-way data flow of React and its benefits<\/strong> | Data Flow \/ Core Concepts | Beginner<\/h3>\nOne-way data flow means that data flows from parent components down to child components, making state management more predictable.<\/p>\nExplanation:<\/strong><\/p>\nIn React, data flows in a single direction\u2014from parent components to child components via props. This ensures that data dependencies are clear and that child components cannot directly modify data owned by parent components.<\/p>\nHow it works:<\/strong><\/p>\n<ul>\n<li>\nParent defines state and passes it to children.<\/p>\n<\/li>\n<li>\nChildren render UI based on props.<\/p>\n<\/li>\n<li>\nChildren communicate changes via callbacks passed from the parent.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">function<\/span> Parent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>Child count=<\/span>{<\/span>count}<\/span> increment=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span> \/<\/span>><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> Child<\/span>(<\/span>{<\/span> count,<\/span> increment }<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>div><\/span>\n <<\/span>p><\/span>Count:<\/span> {<\/span>count}<\/span><<\/span>\/<\/span>p><\/span>\n <<\/span>button onClick=<\/span>{<\/span>increment}<\/span>><\/span>Increment<<\/span>\/<\/span>button><\/span>\n <<\/span>\/<\/span>div><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, <code>Parent<\/code> manages state, and <code>Child<\/code> uses props to render and request updates.<\/p>\nBenefits:<\/strong><\/p>\n<ul>\n<li>\nPredictable UI updates.<\/p>\n<\/li>\n<li>\nEasier debugging since data flow is traceable.<\/p>\n<\/li>\n<li>\nReduces unexpected side effects.<\/p>\n<\/li>\n<li>\nEncourages better component design and separation of concerns.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nPassing unnecessary props that cause re-renders.<\/p>\n<\/li>\n<li>\nOverusing prop drilling instead of context for global state.<\/p>\n<\/li>\n<li>\nAllowing children to mutate parent data directly.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nKeep state where it logically belongs.<\/p>\n<\/li>\n<li>\nUse callbacks to notify parents of changes.<\/p>\n<\/li>\n<li>\nUse context or state managers when prop drilling gets cumbersome.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how state updates in React are managed.<\/p>\n<\/li>\n<li>\nAsked why data shouldn\u2019t be passed in multiple directions.<\/p>\n<\/li>\n<li>\nAsked how to handle shared state across components.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-do-you-handle-asynchronous-data-loading-in-react-applications--data-fetching--side-effects--intermediate\">36. How do you handle asynchronous data loading in React applications?<\/strong> | Data Fetching \/ Side Effects | Intermediate<\/h3>\nHandling asynchronous data loading in React involves fetching data from APIs or other sources and updating the component state accordingly while managing loading and error states.<\/p>\nExplanation:<\/strong><\/p>\nIn React, data fetching is typically done inside the <code>useEffect<\/code> hook, which allows you to run side effects after the component mounts or when dependencies change. You also use <code>useState<\/code> to store the data and track the loading or error status.<\/p>\nSteps to handle data fetching:<\/strong><\/p>\n<ol>\n<li>\nDefine state variables to store data, loading, and error.<\/p>\n<\/li>\n<li>\nUse <code>useEffect<\/code> to trigger the data fetch on component mount or when dependencies change.<\/p>\n<\/li>\n<li>\nUse <code>async\/await<\/code> or promises to fetch data.<\/p>\n<\/li>\n<li>\nUpdate state when data is successfully loaded or an error occurs.<\/p>\n<\/li>\n<\/ol>\nExample:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">import<\/span> React,<\/span> {<\/span> useState,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> DataFetchingComponent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>data,<\/span> setData]<\/span> =<\/span> useState<\/span>(<\/span>null<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>loading,<\/span> setLoading]<\/span> =<\/span> useState<\/span>(<\/span>true<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>error,<\/span> setError]<\/span> =<\/span> useState<\/span>(<\/span>null<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n async<\/span> function<\/span> fetchData<\/span>(<\/span>)<\/span> {<\/span>\n try<\/span> {<\/span>\n const<\/span> response =<\/span> await<\/span> fetch<\/span>(<\/span>'https:\/\/api.example.com\/data'<\/span>)<\/span>;<\/span>\n if<\/span> (<\/span>!<\/span>response.<\/span>ok)<\/span> {<\/span>\n throw<\/span> new<\/span> Error<\/span>(<\/span>'Network response was not ok'<\/span>)<\/span>;<\/span>\n }<\/span>\n const<\/span> result =<\/span> await<\/span> response.<\/span>json<\/span>(<\/span>)<\/span>;<\/span>\n setData<\/span>(<\/span>result)<\/span>;<\/span>\n }<\/span> catch<\/span> (<\/span>err<\/span>)<\/span> {<\/span>\n setError<\/span>(<\/span>err.<\/span>message)<\/span>;<\/span>\n }<\/span> finally<\/span> {<\/span>\n setLoading<\/span>(<\/span>false<\/span>)<\/span>;<\/span>\n }<\/span>\n }<\/span>\n\n fetchData<\/span>(<\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span> \/\/ Empty dependency array to run once on mount<\/span>\n\n if<\/span> (<\/span>loading)<\/span> return<\/span> <<\/span>div><\/span>Loading...<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n if<\/span> (<\/span>error)<\/span> return<\/span> <<\/span>div><\/span>Error:<\/span> {<\/span>error}<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n\n return<\/span> <<\/span>div><\/span>Data:<\/span> {<\/span>JSON.<\/span>stringify<\/span>(<\/span>data)<\/span>}<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to apply:<\/strong><\/p>\n<ul>\n<li>\nLoading data from REST APIs.<\/p>\n<\/li>\n<li>\nInteracting with backend services.<\/p>\n<\/li>\n<li>\nUpdating UI based on external data sources.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nForgetting the empty dependency array, causing infinite fetch loops.<\/p>\n<\/li>\n<li>\nNot handling error states, leading to broken UI.<\/p>\n<\/li>\n<li>\nUpdating state after the component has unmounted.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nAlways handle errors gracefully.<\/p>\n<\/li>\n<li>\nCancel or clean up requests when the component unmounts.<\/p>\n<\/li>\n<li>\nUse loading states to inform users while data is being fetched.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how you would fetch data in a functional component.<\/p>\n<\/li>\n<li>\nAsked how to avoid memory leaks in components.<\/p>\n<\/li>\n<li>\nAsked how to manage loading and error states.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-server-side-rendering-of-react-applications-and-its-benefits--rendering--performance--intermediate\">37. Explain server-side rendering of React applications and its benefits<\/strong> | Rendering \/ Performance | Intermediate<\/h3>\nServer-side rendering (SSR) refers to rendering React components on the server and sending fully rendered HTML to the client.<\/p>\nExplanation:<\/strong><\/p>\nNormally, React applications are client-rendered, where JavaScript loads and renders the UI after the page has loaded. With SSR, the server pre-renders the page into HTML, improving performance and SEO.<\/p>\nAfter the initial HTML is sent to the browser, React takes over with hydration, attaching event listeners and enabling interactivity.<\/p>\nBenefits:<\/strong><\/p>\n<ol>\n<li>\nImproved SEO:<\/strong> Search engines can index content from the initial HTML.<\/p>\n<\/li>\n<li>\nFaster load times:<\/strong> Users see content faster since it\u2019s rendered on the server.<\/p>\n<\/li>\n<li>\nBetter performance on slow devices:<\/strong> Less JavaScript processing is required on the client.<\/p>\n<\/li>\n<\/ol>\nHow SSR works:<\/strong><\/p>\n<ol>\n<li>\nServer renders components into static HTML.<\/p>\n<\/li>\n<li>\nHTML is sent to the client.<\/p>\n<\/li>\n<li>\nReact hydrates the page, making it interactive.<\/p>\n<\/li>\n<\/ol>\nExample using Next.js:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">\/\/ pages\/index.js<\/span>\nexport<\/span> async<\/span> function<\/span> getServerSideProps<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> res =<\/span> await<\/span> fetch<\/span>(<\/span>'https:\/\/api.example.com\/data'<\/span>)<\/span>;<\/span>\n const<\/span> data =<\/span> await<\/span> res.<\/span>json<\/span>(<\/span>)<\/span>;<\/span>\n return<\/span> {<\/span> props:<\/span> {<\/span> data }<\/span> }<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>{<\/span> data }<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>div><\/span>Data:<\/span> {<\/span>JSON.<\/span>stringify<\/span>(<\/span>data)<\/span>}<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, <code>getServerSideProps<\/code> fetches data during each request on the server.<\/p>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nFetching data incorrectly without server context.<\/p>\n<\/li>\n<li>\nRendering components that rely on browser-specific APIs without checks.<\/p>\n<\/li>\n<li>\nNot using caching strategies, causing slow responses.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nHandle browser-only code using feature detection or lifecycle checks.<\/p>\n<\/li>\n<li>\nCache frequently requested data where possible.<\/p>\n<\/li>\n<li>\nUse frameworks like Next.js that provide built-in SSR support.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked why SEO is a problem with client-side rendering.<\/p>\n<\/li>\n<li>\nAsked how you would implement SSR in your app.<\/p>\n<\/li>\n<li>\nAsked to compare SSR vs static generation.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-static-generation-of-react-applications-and-its-benefits--rendering--performance--intermediate\">38. Explain static generation of React applications and its benefits<\/strong> | Rendering \/ Performance | Intermediate<\/h3>\nStatic generation refers to pre-rendering pages at build time rather than on each request, delivering optimized HTML files.<\/p>\nExplanation:<\/strong><\/p>\nStatic generation builds the pages ahead of time into HTML files that can be served quickly, often from a CDN. It\u2019s suitable for pages that don\u2019t change frequently and helps achieve fast load times and better SEO.<\/p>\nFrameworks like Next.js allow developers to generate static pages easily with functions like <code>getStaticProps<\/code>.<\/p>\nBenefits:<\/strong><\/p>\n<ol>\n<li>\nBlazing fast load times:<\/strong> Pages are served without runtime data fetching.<\/p>\n<\/li>\n<li>\nSEO-friendly content:<\/strong> Search engines see the full content without JavaScript execution.<\/p>\n<\/li>\n<li>\nLower server load:<\/strong> Pages are generated at build time.<\/p>\n<\/li>\n<\/ol>\nHow it works:<\/strong><\/p>\n<ol>\n<li>\nAt build time, data is fetched and pages are pre-rendered.<\/p>\n<\/li>\n<li>\nThe static files are deployed to servers or CDNs.<\/p>\n<\/li>\n<li>\nClients receive ready-to-render HTML.<\/p>\n<\/li>\n<\/ol>\nExample with Next.js:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">\/\/ pages\/index.js<\/span>\nexport<\/span> async<\/span> function<\/span> getStaticProps<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> res =<\/span> await<\/span> fetch<\/span>(<\/span>'https:\/\/api.example.com\/data'<\/span>)<\/span>;<\/span>\n const<\/span> data =<\/span> await<\/span> res.<\/span>json<\/span>(<\/span>)<\/span>;<\/span>\n return<\/span> {<\/span> props:<\/span> {<\/span> data }<\/span> }<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>{<\/span> data }<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>div><\/span>Data:<\/span> {<\/span>JSON.<\/span>stringify<\/span>(<\/span>data)<\/span>}<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nThe data is fetched during the build process.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nMarketing pages, blogs, documentation sites.<\/p>\n<\/li>\n<li>\nPages with infrequent content updates.<\/p>\n<\/li>\n<li>\nSites aiming for performance and SEO improvements.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nUsing static generation for highly dynamic pages.<\/p>\n<\/li>\n<li>\nNot implementing incremental regeneration when needed.<\/p>\n<\/li>\n<li>\nFailing to handle API errors at build time.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse static generation where data rarely changes.<\/p>\n<\/li>\n<li>\nCombine with incremental static regeneration for freshness.<\/p>\n<\/li>\n<li>\nOptimize API calls to reduce build time.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to optimize page load times.<\/p>\n<\/li>\n<li>\nAsked the difference between SSR and static generation.<\/p>\n<\/li>\n<li>\nAsked when to prefer static generation over SSR.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-the-presentational-vs-container-component-pattern-in-react--component-architecture--intermediate\">39. Explain the presentational vs container component pattern in React<\/strong> | Component Architecture | Intermediate<\/h3>\nThis pattern helps separate concerns by distinguishing between components responsible for UI and those responsible for logic and state.<\/p>\nExplanation:<\/strong><\/p>\n<ul>\n<li>\nPresentational components:<\/strong> Focus on how the UI looks. They receive data and callbacks via props and have little to no state.<\/p>\n<\/li>\n<li>\nContainer components:<\/strong> Focus on how the application works. They manage state, data fetching, and logic, and pass props to presentational components.<\/p>\n<\/li>\n<\/ul>\nThis separation makes code more reusable, testable, and maintainable.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">\/\/ Presentational component<\/span>\nfunction<\/span> UserList<\/span>(<\/span>{<\/span> users }<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>ul><\/span>\n {<\/span>users.<\/span>map<\/span>(<\/span>(<\/span>user)<\/span> =><\/span> (<\/span>\n <<\/span>li key=<\/span>{<\/span>user.<\/span>id}<\/span>><\/span>{<\/span>user.<\/span>name}<\/span><<\/span>\/<\/span>li><\/span>\n )<\/span>)<\/span>}<\/span>\n <<\/span>\/<\/span>ul><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\n\/\/ Container component<\/span>\nfunction<\/span> UserContainer<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>users,<\/span> setUsers]<\/span> =<\/span> useState<\/span>(<\/span>[<\/span>]<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n fetch<\/span>(<\/span>'\/api\/users'<\/span>)<\/span>\n .<\/span>then<\/span>(<\/span>(<\/span>res)<\/span> =><\/span> res.<\/span>json<\/span>(<\/span>)<\/span>)<\/span>\n .<\/span>then<\/span>(<\/span>(<\/span>data)<\/span> =><\/span> setUsers<\/span>(<\/span>data)<\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>UserList users=<\/span>{<\/span>users}<\/span> \/<\/span>><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, <code>UserList<\/code> only renders the UI, while <code>UserContainer<\/code> handles fetching data.<\/p>\nBenefits:<\/strong><\/p>\n<ol>\n<li>\nClear separation of UI and logic.<\/p>\n<\/li>\n<li>\nReusable and easily testable components.<\/p>\n<\/li>\n<li>\nEncourages a modular and scalable architecture.<\/p>\n<\/li>\n<\/ol>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nMixing state logic into presentational components.<\/p>\n<\/li>\n<li>\nOverusing containers, making code harder to navigate.<\/p>\n<\/li>\n<li>\nIgnoring prop drilling when it\u2019s unnecessary.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nKeep presentational components stateless where possible.<\/p>\n<\/li>\n<li>\nMove logic to containers for better readability.<\/p>\n<\/li>\n<li>\nUse hooks to manage side effects in containers.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how you structure components in a large project.<\/p>\n<\/li>\n<li>\nAsked how you make components reusable.<\/p>\n<\/li>\n<li>\nAsked to explain separation of concerns in React.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-some-common-pitfalls-when-doing-data-fetching-in-react--data-fetching--error-handling--intermediate\">40. What are some common pitfalls when doing data fetching in React?<\/strong> | Data Fetching \/ Error Handling | Intermediate<\/h3>\nData fetching can lead to various issues if not handled correctly, impacting performance, usability, or causing bugs.<\/p>\nExplanation:<\/strong><\/p>\nWhile fetching data in React is straightforward, developers often overlook edge cases like race conditions, memory leaks, or improper error handling. Recognizing and avoiding these pitfalls ensures robust and performant applications.<\/p>\nCommon pitfalls:<\/strong><\/p>\n<ol>\n<li>\nNot handling loading and error states:<\/strong> \nUsers might see incomplete or broken interfaces.<\/p>\n<\/li>\n<li>\nIgnoring cleanup of subscriptions:<\/strong> \nLeads to memory leaks when components unmount before the fetch completes.<\/p>\n<\/li>\n<li>\nInfinite loops in <code>useEffect<\/code>:<\/strong> \nCaused by missing dependency arrays or including unstable references.<\/p>\n<\/li>\n<li>\nDirectly mutating state:<\/strong> \nReact won\u2019t track changes if state is updated improperly.<\/p>\n<\/li>\n<li>\nUsing stale closures:<\/strong> \nFunctions capturing outdated state can lead to unexpected results.<\/p>\n<\/li>\n<\/ol>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse proper dependency arrays in <code>useEffect<\/code>.<\/p>\n<\/li>\n<li>\nUse <code>AbortController<\/code> to cancel fetch requests on unmount.<\/p>\n<\/li>\n<li>\nHandle loading and error states explicitly.<\/p>\n<\/li>\n<li>\nAvoid updating state after a component unmounts.<\/p>\n<\/li>\n<li>\nStructure data fetching logic using custom hooks.<\/p>\n<\/li>\n<\/ul>\nExample with cleanup:<\/strong><\/p>\n<pre class=\" language-javascript\"><code class=\"prism language-javascript\">import<\/span> React,<\/span> {<\/span> useState,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> DataComponent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>data,<\/span> setData]<\/span> =<\/span> useState<\/span>(<\/span>null<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>loading,<\/span> setLoading]<\/span> =<\/span> useState<\/span>(<\/span>true<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n const<\/span> controller =<\/span> new<\/span> AbortController<\/span>(<\/span>)<\/span>;<\/span>\n\n fetch<\/span>(<\/span>'\/api\/data'<\/span>,<\/span> {<\/span> signal:<\/span> controller.<\/span>signal }<\/span>)<\/span>\n .<\/span>then<\/span>(<\/span>(<\/span>res)<\/span> =><\/span> res.<\/span>json<\/span>(<\/span>)<\/span>)<\/span>\n .<\/span>then<\/span>(<\/span>(<\/span>data)<\/span> =><\/span> {<\/span>\n setData<\/span>(<\/span>data)<\/span>;<\/span>\n setLoading<\/span>(<\/span>false<\/span>)<\/span>;<\/span>\n }<\/span>)<\/span>\n .<\/span>catch<\/span>(<\/span>(<\/span>err)<\/span> =><\/span> {<\/span>\n if<\/span> (<\/span>err.<\/span>name !==<\/span> 'AbortError'<\/span>)<\/span> {<\/span>\n console.<\/span>error<\/span>(<\/span>'Fetch error:'<\/span>,<\/span> err)<\/span>;<\/span>\n }<\/span>\n }<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>)<\/span> =><\/span> controller.<\/span>abort<\/span>(<\/span>)<\/span>;<\/span> \/\/ Cleanup on unmount<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n if<\/span> (<\/span>loading)<\/span> return<\/span> <<\/span>div><\/span>Loading...<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n return<\/span> <<\/span>div><\/span>{<\/span>JSON.<\/span>stringify<\/span>(<\/span>data)<\/span>}<\/span><<\/span>\/<\/span>div><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to prevent memory leaks.<\/p>\n<\/li>\n<li>\nAsked how to handle component unmounting during data fetches.<\/p>\n<\/li>\n<li>\nAsked to explain error handling strategies.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-role-of-keys-in-react-lists-and-why-are-they-important--rendering--lists--beginner\">41. What is the role of keys in React lists and why are they important?<\/strong> | Rendering \/ Lists | Beginner<\/h3>\nKeys help React identify which items have changed, been added, or removed when rendering lists.<\/p>\nExplanation:<\/strong><\/p>\nWhen rendering lists in React, each element needs a unique <code>key<\/code> so that React can efficiently update only the parts that have changed. Without keys, React will re-render the entire list unnecessarily, causing performance issues and potentially leading to UI bugs.<\/p>\nHow it works:<\/strong><\/p>\n<ul>\n<li>\nKeys are used by React\u2019s reconciliation algorithm to match elements between renders.<\/p>\n<\/li>\n<li>\nIf keys change or are missing, React may reuse incorrect elements, leading to unexpected behavior.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> items =<\/span> [<\/span>'Apple'<\/span>,<\/span> 'Banana'<\/span>,<\/span> 'Cherry'<\/span>]<\/span>;<\/span>\n\nfunction<\/span> ItemList<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>ul<\/span>><\/span><\/span>\n {<\/span>items.<\/span>map<\/span>(<\/span>(<\/span>item,<\/span> index)<\/span> =><\/span> (<\/span>\n <<\/span>li<\/span> key<\/span>=<\/span>{<\/span>item}<\/span><\/span>><\/span><\/span>{<\/span>item}<\/span><\/<\/span>li<\/span>><\/span><\/span>\n )<\/span>)<\/span>}<\/span>\n <\/<\/span>ul<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, <code>item<\/code> is used as the key because it\u2019s unique for each list element.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nRendering dynamic lists like menus, tables, or grids.<\/p>\n<\/li>\n<li>\nHandling updates where items are added or removed.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid<\/strong><\/p>\n<ul>\n<li>\nUsing array index as key in dynamic lists \u2014 this can cause incorrect updates.<\/p>\n<\/li>\n<li>\nNot using unique keys, leading to bugs in animations or state management.<\/p>\n<\/li>\n<li>\nChanging keys unnecessarily, causing components to unmount and remount.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse stable, unique IDs as keys.<\/p>\n<\/li>\n<li>\nAvoid using array indices if the list can change.<\/p>\n<\/li>\n<li>\nEnsure keys remain consistent between renders.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how React optimizes list rendering.<\/p>\n<\/li>\n<li>\nAsked why using index as a key can cause issues.<\/p>\n<\/li>\n<li>\nAsked how to handle updates in large lists.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-fragments-in-react-and-why-are-they-useful--rendering--jsx--beginner\">42. What are fragments in React and why are they useful?<\/strong> | Rendering \/ JSX | Beginner<\/h3>\nFragments let you group multiple elements without adding extra nodes to the DOM.<\/p>\nExplanation:<\/strong><\/p>\nIn React, a component must return a single element. Sometimes you need to group elements without introducing unnecessary markup, like extra <code><div><\/code>s that clutter the HTML structure. React fragments solve this by allowing you to wrap elements without adding new DOM nodes.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Table<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>><\/span>\n <<\/span>tr<\/span>><\/span><\/span>\n <<\/span>td<\/span>><\/span><\/span>Row 1<\/span>,<\/span> Cell 1<\/span><\/<\/span>td<\/span>><\/span><\/span>\n <<\/span>td<\/span>><\/span><\/span>Row 1<\/span>,<\/span> Cell 2<\/span><\/<\/span>td<\/span>><\/span><\/span>\n <\/<\/span>tr<\/span>><\/span><\/span>\n <<\/span>tr<\/span>><\/span><\/span>\n <<\/span>td<\/span>><\/span><\/span>Row 2<\/span>,<\/span> Cell 1<\/span><\/<\/span>td<\/span>><\/span><\/span>\n <<\/span>td<\/span>><\/span><\/span>Row 2<\/span>,<\/span> Cell 2<\/span><\/<\/span>td<\/span>><\/span><\/span>\n <\/<\/span>tr<\/span>><\/span><\/span>\n <<\/span>\/<\/span>><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nThis example groups multiple rows without adding an extra wrapper.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nReturning multiple elements from a component.<\/p>\n<\/li>\n<li>\nAvoiding unnecessary DOM nodes.<\/p>\n<\/li>\n<li>\nGrouping elements inside lists or table rows.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nAdding unnecessary wrapper elements and complicating styling.<\/p>\n<\/li>\n<li>\nForgetting that fragments don\u2019t create actual DOM elements, which might affect selectors or CSS.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse <code><>...<\/><\/code> syntax for simpler code.<\/p>\n<\/li>\n<li>\nUse <code><React.Fragment><\/code> when keys are needed for lists.<\/p>\n<\/li>\n<li>\nAvoid over-wrapping content unnecessarily.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to return multiple elements from a component.<\/p>\n<\/li>\n<li>\nAsked how to avoid unnecessary markup in the DOM.<\/p>\n<\/li>\n<li>\nAsked about performance implications of extra DOM nodes.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-controlled-and-uncontrolled-components-in-react--forms--state--intermediate\">43. What are controlled and uncontrolled components in React?<\/strong> | Forms \/ State | Intermediate<\/h3>\nControlled components have their state managed by React, while uncontrolled components manage their own state internally.<\/p>\nExplanation:<\/strong><\/p>\n<ul>\n<li>\nControlled components:<\/strong> The value of the input is controlled via React\u2019s state. The component\u2019s data is always in sync with the state.<\/p>\n<\/li>\n<li>\nUncontrolled components:<\/strong> The input\u2019s value is handled by the DOM itself, and React accesses it using refs when needed.<\/p>\n<\/li>\n<\/ul>\nExample of a controlled component:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> ControlledInput<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>value,<\/span> setValue]<\/span> =<\/span> React.<\/span>useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>input<\/span>\n type<\/span>=<\/span>\"<\/span>text\"<\/span><\/span>\n value<\/span>=<\/span>{<\/span>value}<\/span><\/span>\n onChange<\/span>=<\/span>{<\/span>(<\/span>e)<\/span> =><\/span> setValue<\/span>(<\/span>e.<\/span>target.<\/span>value)<\/span>}<\/span><\/span>\n \/><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nExample of an uncontrolled component:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> UncontrolledInput<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> inputRef =<\/span> React.<\/span>useRef<\/span>(<\/span>)<\/span>;<\/span>\n\n const<\/span> handleSubmit<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n alert<\/span>(<\/span>'Input value: '<\/span> +<\/span> inputRef.<\/span>current.<\/span>value)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>input<\/span> type<\/span>=<\/span>\"<\/span>text\"<\/span><\/span> ref<\/span>=<\/span>{<\/span>inputRef}<\/span><\/span> \/><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>handleSubmit}<\/span><\/span>><\/span><\/span>Submit<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nControlled: When you need to validate input, manage forms, or synchronize state.<\/p>\n<\/li>\n<li>\nUncontrolled: When simple forms or quick prototypes don\u2019t need state syncing.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nMixing controlled and uncontrolled logic in the same form.<\/p>\n<\/li>\n<li>\nForgetting to update state in controlled components, causing stale inputs.<\/p>\n<\/li>\n<li>\nOverusing uncontrolled components in complex forms.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse controlled components for forms with validation or interactions.<\/p>\n<\/li>\n<li>\nUse uncontrolled components for simpler cases.<\/p>\n<\/li>\n<li>\nKeep form logic centralized and testable.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to manage form inputs in React.<\/p>\n<\/li>\n<li>\nAsked when to use refs vs state.<\/p>\n<\/li>\n<li>\nAsked to explain the differences and trade-offs between the two.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-the-use-of-the-context-api-in-react--state-management--intermediate\">44. Explain the use of the Context API in React<\/strong> | State Management | Intermediate<\/h3>\nThe Context API provides a way to share state across the component tree without passing props through every level.<\/p>\nExplanation:<\/strong><\/p>\nReact\u2019s Context API allows data to be passed globally through the component hierarchy, making it useful for themes, user data, or settings that multiple components need to access.<\/p>\nIt helps avoid \u201cprop drilling,\u201d where props are passed through many intermediate components unnecessarily.<\/p>\nSteps to use Context:<\/strong><\/p>\n<ol>\n<li>\nCreate a context.<\/p>\n<\/li>\n<li>\nWrap components with a provider.<\/p>\n<\/li>\n<li>\nUse the context in child components via <code>useContext<\/code>.<\/p>\n<\/li>\n<\/ol>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> createContext,<\/span> useContext,<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> ThemeContext =<\/span> createContext<\/span>(<\/span>)<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>theme,<\/span> setTheme]<\/span> =<\/span> useState<\/span>(<\/span>'light'<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>ThemeContext.Provider<\/span> value<\/span>=<\/span>{<\/span>{<\/span> theme,<\/span> setTheme }<\/span>}<\/span><\/span>><\/span><\/span>\n <<\/span>Toolbar<\/span> \/><\/span><\/span>\n <\/<\/span>ThemeContext.Provider<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> Toolbar<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>ThemedButton<\/span> \/><\/span><\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> ThemedButton<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> {<\/span> theme }<\/span> =<\/span> useContext<\/span>(<\/span>ThemeContext)<\/span>;<\/span>\n return<\/span> <<\/span>button<\/span>><\/span><\/span>{<\/span>`Current theme: <\/span>${<\/span>theme}<\/span><\/span>`<\/span><\/span>}<\/span><\/<\/span>button<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nSharing data like themes, authentication, or settings.<\/p>\n<\/li>\n<li>\nAvoiding excessive prop passing.<\/p>\n<\/li>\n<li>\nManaging global state in smaller applications.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nUsing context for frequently changing data, causing unnecessary rerenders.<\/p>\n<\/li>\n<li>\nOverusing context when local state would suffice.<\/p>\n<\/li>\n<li>\nNot memoizing context values.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nSeparate concerns into multiple contexts if needed.<\/p>\n<\/li>\n<li>\nMemoize context values with <code>useMemo<\/code>.<\/p>\n<\/li>\n<li>\nAvoid heavy computations inside context providers.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how to avoid prop drilling.<\/p>\n<\/li>\n<li>\nAsked how you would share data across unrelated components.<\/p>\n<\/li>\n<li>\nAsked to explain when to use context vs Redux.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-react-hooks-and-why-were-they-introduced--core-concepts--beginner\">45. What are React hooks and why were they introduced?<\/strong> | Core Concepts | Beginner<\/h3>\nHooks are functions that let you use React features like state and lifecycle methods in functional components.<\/p>\nExplanation:<\/strong><\/p>\nBefore hooks, state and lifecycle logic could only be used in class components. Hooks were introduced to enable functional components to manage state, side effects, and other behaviors without the complexity of classes.<\/p>\nThis simplified code, improved reuse, and aligned better with JavaScript functions.<\/p>\nPopular hooks:<\/strong><\/p>\n<ul>\n<li>\n<code>useState<\/code>: Manage state in functional components.<\/p>\n<\/li>\n<li>\n<code>useEffect<\/code>: Handle side effects like data fetching or subscriptions.<\/p>\n<\/li>\n<li>\n<code>useContext<\/code>: Access global data.<\/p>\n<\/li>\n<li>\n<code>useRef<\/code>: Persist mutable values or DOM references.<\/p>\n<\/li>\n<li>\n<code>useReducer<\/code>: Manage complex state logic.<\/p>\n<\/li>\n<\/ul>\nExample using <code>useState<\/code>:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Counter<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>p<\/span>><\/span><\/span>{<\/span>`Count: <\/span>${<\/span>count}<\/span><\/span>`<\/span><\/span>}<\/span><\/<\/span>p<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhy hooks were introduced:<\/strong><\/p>\n<ol>\n<li>\nAvoid class-based complexity.<\/p>\n<\/li>\n<li>\nReuse logic across components via custom hooks.<\/p>\n<\/li>\n<li>\nSimplify stateful logic in functional components.<\/p>\n<\/li>\n<li>\nImprove readability and testability.<\/p>\n<\/li>\n<\/ol>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nCalling hooks conditionally or inside loops.<\/p>\n<\/li>\n<li>\nForgetting to follow the rules of hooks.<\/p>\n<\/li>\n<li>\nNot understanding dependency arrays in <code>useEffect<\/code>.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nAlways call hooks at the top level of the component.<\/p>\n<\/li>\n<li>\nUse custom hooks to extract shared logic.<\/p>\n<\/li>\n<li>\nUse dependency arrays carefully and intentionally.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked why hooks are preferred over class components.<\/p>\n<\/li>\n<li>\nAsked how you would refactor class logic into hooks.<\/p>\n<\/li>\n<li>\nAsked to explain rules and restrictions when using hooks.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-does-the-virtual-dom-in-react-work-what-are-its-benefits-and-downsides--rendering--performance--intermediate\">46. How does the virtual DOM in React work? What are its benefits and downsides?<\/strong> | Rendering \/ Performance | Intermediate<\/h3>\nThe virtual DOM is a lightweight copy of the actual DOM that helps React efficiently update the UI by comparing changes before applying them to the real DOM.<\/p>\nExplanation:<\/strong><\/p>\nWhen the state or props of a component change, React doesn\u2019t update the actual DOM immediately. Instead, it creates a virtual representation of the DOM, compares it with the previous version, and identifies what\u2019s different. This process, known as \u201cdiffing\u201d or \u201creconciliation,\u201d allows React to update only the necessary parts, improving performance.<\/p>\nSteps in virtual DOM:<\/strong><\/p>\n<ol>\n<li>\nA state or prop change triggers a re-render.<\/p>\n<\/li>\n<li>\nA new virtual DOM tree is created based on the updated component.<\/p>\n<\/li>\n<li>\nThe new virtual DOM is compared with the previous version.<\/p>\n<\/li>\n<li>\nDifferences are calculated.<\/p>\n<\/li>\n<li>\nOnly the changed parts are updated in the actual DOM.<\/p>\n<\/li>\n<\/ol>\nBenefits:<\/strong><\/p>\n<ul>\n<li>\nImproved performance:<\/strong> Minimizes direct DOM manipulations which are expensive.<\/p>\n<\/li>\n<li>\nDeclarative UI:<\/strong> Developers only describe how the UI should look.<\/p>\n<\/li>\n<li>\nPredictability:<\/strong> Updates are applied systematically, reducing bugs.<\/p>\n<\/li>\n<\/ul>\nDownsides:<\/strong><\/p>\n<ul>\n<li>\nOverhead:<\/strong> Creating and comparing virtual DOM trees adds computational work.<\/p>\n<\/li>\n<li>\nNot always faster:<\/strong> For very simple or static applications, virtual DOM may not offer significant benefits.<\/p>\n<\/li>\n<li>\nRequires understanding:<\/strong> Misusing state updates or improper patterns can negate performance advantages.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> Counter<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> React.<\/span>useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>p<\/span>><\/span><\/span>{<\/span>`Count: <\/span>${<\/span>count}<\/span><\/span>`<\/span><\/span>}<\/span><\/<\/span>p<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, React compares the old and new virtual DOM before updating the count.<\/p>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nAssuming virtual DOM optimizations always make the app faster.<\/p>\n<\/li>\n<li>\nUpdating state too frequently without batching.<\/p>\n<\/li>\n<li>\nNot structuring components efficiently, causing unnecessary renders.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nBreak the UI into small, reusable components.<\/p>\n<\/li>\n<li>\nAvoid unnecessary state changes.<\/p>\n<\/li>\n<li>\nUse tools like React DevTools to inspect renders.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how React optimizes rendering.<\/p>\n<\/li>\n<li>\nAsked why manipulating the DOM directly is discouraged.<\/p>\n<\/li>\n<li>\nAsked about the difference between virtual DOM and real DOM updates.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach--architecture--performance--advanced\">47. What is React Fiber and how is it an improvement over the previous approach?<\/strong> | Architecture \/ Performance | Advanced<\/h3>\nReact Fiber is a reimplementation of React\u2019s core algorithm that improves rendering performance and flexibility by allowing incremental rendering and better prioritization.<\/p>\nExplanation:<\/strong><\/p>\nBefore React 16, React used a stack-based algorithm that couldn\u2019t pause or resume rendering tasks. React Fiber introduced a new approach that breaks rendering into small units of work, enabling React to handle animations, gestures, and large trees more efficiently.<\/p>\nKey improvements:<\/strong><\/p>\n<ul>\n<li>\nIncremental rendering:<\/strong> Large updates are split into smaller tasks that can be paused and resumed.<\/p>\n<\/li>\n<li>\nPrioritization:<\/strong> Updates like animations can be given higher priority, while less important tasks are deferred.<\/p>\n<\/li>\n<li>\nError boundaries and suspense:<\/strong> Fiber makes it possible to handle errors and load states gracefully.<\/p>\n<\/li>\n<li>\nTime slicing:<\/strong> React can now schedule work during idle time, improving responsiveness.<\/p>\n<\/li>\n<\/ul>\nExample use cases:<\/strong><\/p>\n<ul>\n<li>\nComplex animations with smooth transitions.<\/p>\n<\/li>\n<li>\nHandling asynchronous operations in large applications.<\/p>\n<\/li>\n<li>\nGraceful error recovery without crashing the entire app.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nAssuming Fiber changes how you write React code\u2014it\u2019s under the hood.<\/p>\n<\/li>\n<li>\nIgnoring performance implications when managing state updates.<\/p>\n<\/li>\n<li>\nNot optimizing component structure to take advantage of Fiber\u2019s scheduling.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse <code>React.Suspense<\/code> and <code>lazy<\/code> to manage code splitting.<\/p>\n<\/li>\n<li>\nAvoid blocking the main thread with heavy computations.<\/p>\n<\/li>\n<li>\nStructure components to minimize unnecessary re-rendering.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked why React 16 was a major upgrade.<\/p>\n<\/li>\n<li>\nAsked about performance optimizations and rendering interruptions.<\/p>\n<\/li>\n<li>\nAsked to explain how React handles animations and UI responsiveness.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-reconciliation-in-react--rendering--performance--intermediate\">48. What is reconciliation in React?<\/strong> | Rendering \/ Performance | Intermediate<\/h3>\nReconciliation is the process by which React compares two versions of the virtual DOM and updates the actual DOM efficiently.<\/p>\nExplanation:<\/strong><\/p>\nWhen state or props change, React generates a new virtual DOM. It then compares the new tree with the previous one and determines the minimal set of changes required to update the actual DOM. This comparison process is called reconciliation.<\/p>\nHow it works:<\/strong><\/p>\n<ol>\n<li>\nReact receives new state or props.<\/p>\n<\/li>\n<li>\nA new virtual DOM tree is created.<\/p>\n<\/li>\n<li>\nThe new tree is compared with the old one.<\/p>\n<\/li>\n<li>\nDifferences are identified.<\/p>\n<\/li>\n<li>\nOnly the changed elements are updated in the real DOM.<\/p>\n<\/li>\n<\/ol>\nExample scenario:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n<<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Click me<\/<\/span>button<\/span>><\/span><\/span>\n<\/code><\/pre>\nWhen <code>setCount<\/code> is triggered, React compares the previous count value and updates the text without re-rendering the entire tree.<\/p>\nBenefits:<\/strong><\/p>\n<ul>\n<li>\nAvoids unnecessary DOM updates.<\/p>\n<\/li>\n<li>\nImproves app performance.<\/p>\n<\/li>\n<li>\nMakes UI updates predictable.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nAssuming reconciliation always prevents performance issues.<\/p>\n<\/li>\n<li>\nUsing improper keys that confuse the algorithm.<\/p>\n<\/li>\n<li>\nNot understanding how deep component trees affect performance.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse keys correctly to guide reconciliation.<\/p>\n<\/li>\n<li>\nStructure components to localize state changes.<\/p>\n<\/li>\n<li>\nAvoid complex data structures that complicate diffing.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how React decides which elements to update.<\/p>\n<\/li>\n<li>\nAsked why keys are important during updates.<\/p>\n<\/li>\n<li>\nAsked about performance implications in dynamic lists.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-react-suspense-and-what-does-it-enable--async-handling--performance--advanced\">49. What is React Suspense and what does it enable?<\/strong> | Async Handling \/ Performance | Advanced<\/h3>\nReact Suspense is a feature that allows you to handle asynchronous operations like data fetching or code splitting by showing fallback content while waiting for a resource.<\/p>\nExplanation:<\/strong><\/p>\nSuspense helps manage asynchronous dependencies declaratively by letting React \u201cwait\u201d until the data or code is ready before rendering the component. This makes it easier to coordinate loading states across multiple components.<\/p>\nCore concepts:<\/strong><\/p>\n<ul>\n<li>\nWrap components with <code>React.Suspense<\/code>.<\/p>\n<\/li>\n<li>\nProvide a fallback UI while waiting.<\/p>\n<\/li>\n<li>\nCombine with <code>React.lazy<\/code> or data-fetching libraries.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> LazyComponent =<\/span> React.<\/span>lazy<\/span>(<\/span>(<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'.\/LazyComponent'<\/span>)<\/span>)<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>React.Suspense<\/span> fallback={<div<\/span>><\/span><\/span>Loading...<\/span><\/<\/span>div<\/span>><\/span><\/span>}<\/span>><\/span>\n <<\/span>LazyComponent<\/span> \/><\/span><\/span>\n <\/<\/span>React.Suspense<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, <code>LazyComponent<\/code> is loaded asynchronously, and \u201cLoading\u2026\u201d is displayed until it\u2019s ready.<\/p>\nUse cases:<\/strong><\/p>\n<ul>\n<li>\nCode splitting to load components on demand.<\/p>\n<\/li>\n<li>\nHandling slow data fetching in UI without showing blank states.<\/p>\n<\/li>\n<li>\nCoordinating multiple async operations in a unified way.<\/p>\n<\/li>\n<\/ul>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nNot wrapping lazy-loaded components inside <code>Suspense<\/code>.<\/p>\n<\/li>\n<li>\nProviding overly complex fallback UIs that confuse users.<\/p>\n<\/li>\n<li>\nMixing Suspense with non-compatible libraries.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse simple and user-friendly fallback UIs.<\/p>\n<\/li>\n<li>\nCombine with error boundaries to gracefully handle load failures.<\/p>\n<\/li>\n<li>\nApply Suspense only to parts of the UI that need it.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked how you would improve user experience during data loading.<\/p>\n<\/li>\n<li>\nAsked to explain code splitting and how Suspense helps.<\/p>\n<\/li>\n<li>\nAsked how to handle fallback states without disrupting the main UI.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-what-happens-when-the-usestate-setter-function-is-called-in-react--state-management--hooks--intermediate\">50. Explain what happens when the <code>useState<\/code> setter function is called in React<\/strong> | State Management \/ Hooks | Intermediate<\/h3>\nThe <code>useState<\/code> setter schedules a state update, queues a re-render, and applies changes asynchronously.<\/p>\nExplanation:<\/strong><\/p>\nWhen you call the setter function returned by <code>useState<\/code>, React schedules the state change and triggers a re-render of the component with the updated state. React batches multiple state updates for better performance and applies them before the next paint.<\/p>\nDetailed process:<\/strong><\/p>\n<ol>\n<li>\nThe setter is called with a new state or function.<\/p>\n<\/li>\n<li>\nReact queues the update.<\/p>\n<\/li>\n<li>\nDuring the next render phase, React updates the component\u2019s state.<\/p>\n<\/li>\n<li>\nReact reconciles the virtual DOM and applies changes to the real DOM.<\/p>\n<\/li>\n<li>\nThe UI reflects the new state.<\/p>\n<\/li>\n<\/ol>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> Counter<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n const<\/span> increment<\/span> =<\/span> (<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>prev =><\/span> prev +<\/span> 1<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>p<\/span>><\/span><\/span>{<\/span>`Count: <\/span>${<\/span>count}<\/span><\/span>`<\/span><\/span>}<\/span><\/<\/span>p<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>increment}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nHere, <code>setCount<\/code> schedules the state change based on the previous state.<\/p>\nWhy the functional form is important:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">setCount<\/span>(<\/span>prevCount =><\/span> prevCount +<\/span> 1<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nThis ensures that you always update the state based on the latest value, especially when multiple updates are batched together.<\/p>\nMistakes to avoid:<\/strong><\/p>\n<ul>\n<li>\nUpdating state with a stale value by directly referencing it.<\/p>\n<\/li>\n<li>\nCalling the setter in loops without considering batching.<\/p>\n<\/li>\n<li>\nMisunderstanding that state updates are asynchronous.<\/p>\n<\/li>\n<\/ul>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse the functional update form when new state depends on the previous state.<\/p>\n<\/li>\n<li>\nAvoid unnecessary state updates that cause performance bottlenecks.<\/p>\n<\/li>\n<li>\nLeverage batching for efficiency.<\/p>\n<\/li>\n<\/ul>\nInterview scenarios:<\/strong><\/p>\n<ul>\n<li>\nAsked what happens internally when state is updated.<\/p>\n<\/li>\n<li>\nAsked why state updates may not reflect immediately.<\/p>\n<\/li>\n<li>\nAsked how to manage state changes depending on previous values.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-react.memo-and-usememo-when-would-you-use-each--performance-optimization--hooks--advanced\">51. What is the difference between <code>React.memo<\/code> and <code>useMemo<\/code>? When would you use each?<\/strong> | Performance Optimization \/ Hooks | Advanced<\/h3>\n<ul>\n<li>\n<code>React.memo<\/code> is a higher-order component<\/strong> that memoizes a React component<\/strong>, preventing it from re-rendering unless its props change.<\/p>\n<\/li>\n<li>\n<code>useMemo<\/code> is a hook<\/strong> that memoizes a computed value<\/strong> inside a component, so the value is only recalculated when its dependencies change.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> useMemo }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> ExpensiveComponent =<\/span> React.<\/span>memo<\/span>(<\/span>(<\/span>{<\/span> data }<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Rendering ExpensiveComponent'<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>div<\/span>><\/span><\/span>{<\/span>data.<\/span>value}<\/span><\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>{<\/span> items }<\/span>)<\/span> {<\/span>\n const<\/span> computedValue =<\/span> useMemo<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n return<\/span> items.<\/span>reduce<\/span>(<\/span>(<\/span>acc,<\/span> item)<\/span> =><\/span> acc +<\/span> item.<\/span>value,<\/span> 0<\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>items]<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>ExpensiveComponent<\/span> data<\/span>=<\/span>{<\/span>{<\/span> value:<\/span> computedValue }<\/span>}<\/span><\/span> \/><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nKey points:<\/strong><\/p>\n<ul>\n<li>\nUse <code>React.memo<\/code> to optimize component rendering<\/strong>.<\/p>\n<\/li>\n<li>\nUse <code>useMemo<\/code> to optimize expensive calculations<\/strong> inside a component.<\/p>\n<\/li>\n<\/ul>\nCommon pitfalls:<\/strong><\/p>\n<ul>\n<li>\nOverusing memoization can increase memory usage<\/strong> without noticeable performance gain.<\/p>\n<\/li>\n<li>\n<code>React.memo<\/code> only does shallow comparison by default. For deep props, use a custom comparison function.<\/p>\n<\/li>\n<\/ul>\nSample interview scenario:<\/strong><\/p>\n<ul>\n<li>A candidate is asked to optimize a dashboard component that re-renders unnecessarily when unrelated state updates occur.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-does-react-handle-events-differently-from-native-dom-events--event-handling--intermediate\">52. How does React handle events differently from native DOM events?<\/strong> | Event Handling | Intermediate<\/h3>\n<ul>\n<li>\nReact uses a synthetic event system<\/strong> to normalize events across browsers.<\/p>\n<\/li>\n<li>\nSynthetic events are pooled<\/strong>, meaning React reuses them for performance, so the event object may be nullified after the callback finishes.<\/p>\n<\/li>\n<li>\nEvent delegation: React attaches a single listener at the root and delegates events to components, improving performance.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> Button<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> handleClick<\/span> =<\/span> (<\/span>e)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>e.<\/span>type)<\/span>;<\/span> \/\/ \"click\"<\/span>\n setTimeout<\/span>(<\/span>(<\/span>)<\/span> =><\/span> console.<\/span>log<\/span>(<\/span>e.<\/span>type)<\/span>,<\/span> 1000<\/span>)<\/span>;<\/span> \/\/ e may be null due to pooling<\/span>\n }<\/span>;<\/span>\n return<\/span> <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>handleClick}<\/span><\/span>><\/span><\/span>Click Me<\/<\/span>button<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nBest practices:<\/strong><\/p>\n<ul>\n<li>If you need to use the event asynchronously, call <code>e.persist()<\/code> to retain the event object.<\/li>\n<\/ul>\nInterview scenario:<\/strong><\/p>\n<ul>\n<li>Explaining why React\u2019s synthetic event system prevents browser inconsistencies or how to handle async events in React.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-react-reconciliation-in-detail.-how-does-react-decide-which-components-to-update--virtual-dom--reconciliation--advanced\">53. Explain React reconciliation in detail. How does React decide which components to update?<\/strong> | Virtual DOM \/ Reconciliation | Advanced<\/h3>\n<ul>\n<li>\nReconciliation<\/strong> is the process React uses to update the DOM efficiently.<\/p>\n<\/li>\n<li>\nReact compares the new virtual DOM<\/strong> with the previous virtual DOM<\/strong> (diffing) to determine the minimal set of changes.<\/p>\n<\/li>\n<li>\nRules:<\/p>\n<ul>\n<li>\nElements with different types<\/strong> are destroyed and recreated.<\/p>\n<\/li>\n<li>\nElements with the same type<\/strong> are updated with new props and children.<\/p>\n<\/li>\n<li>\nLists require keys<\/strong> to track items; without unique keys, React may re-render unnecessarily.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> items =<\/span> [<\/span>'a'<\/span>,<\/span> 'b'<\/span>,<\/span> 'c'<\/span>]<\/span>.<\/span>map<\/span>(<\/span>(<\/span>item)<\/span> =><\/span> <<\/span>li<\/span> key<\/span>=<\/span>{<\/span>item}<\/span><\/span>><\/span><\/span>{<\/span>item}<\/span><\/<\/span>li<\/span>><\/span><\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nPitfalls:<\/strong><\/p>\n<ul>\n<li>Using array indices as keys can cause incorrect updates<\/strong> when the list changes.<\/li>\n<\/ul>\nSample interview scenario:<\/strong><\/p>\n<ul>\n<li>Asked to explain why a component re-renders unnecessarily and how keys affect list rendering.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-\u201ctime-slicing\u201d-in-react-fiber-how-does-it-improve-performance--react-fiber--performance--advanced\">54. What is \u201ctime slicing\u201d in React Fiber? How does it improve performance?<\/strong> | React Fiber \/ Performance | Advanced<\/h3>\nExplanation:<\/strong><\/p>\n<ul>\n<li>\nTime slicing allows React to split rendering work into small chunks<\/strong>, so the main thread isn\u2019t blocked for long periods.<\/p>\n<\/li>\n<li>\nImproves UI responsiveness<\/strong>, especially for complex components or large trees.<\/p>\n<\/li>\n<li>\nReact can pause, yield, and resume work<\/strong>, making animations and input more fluid.<\/p>\n<\/li>\n<\/ul>\nExample Scenario:<\/strong><\/p>\n<ul>\n<li>A component with a heavy loop or multiple nested children may freeze the UI. With time slicing, React updates the UI in increments and keeps the app responsive.<\/li>\n<\/ul>\nInterview scenario:<\/strong><\/p>\n<ul>\n<li>Asked to optimize a React dashboard where large data tables cause janky scrolling.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-custom-hooks-can-you-show-an-example-of-when-to-use-one--hooks--state-management--intermediate\">55. What are custom hooks? Can you show an example of when to use one?<\/strong> | Hooks \/ State Management | Intermediate<\/h3>\nExplanation:<\/strong><\/p>\n<ul>\n<li>\nCustom hooks are reusable functions<\/strong> that use React hooks internally.<\/p>\n<\/li>\n<li>\nThey encapsulate stateful logic<\/strong> and can be shared across multiple components.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> useState,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> useFetch<\/span>(<\/span>url)<\/span> {<\/span>\n const<\/span> [<\/span>data,<\/span> setData]<\/span> =<\/span> useState<\/span>(<\/span>null<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>loading,<\/span> setLoading]<\/span> =<\/span> useState<\/span>(<\/span>true<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n async<\/span> function<\/span> fetchData<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> res =<\/span> await<\/span> fetch<\/span>(<\/span>url)<\/span>;<\/span>\n const<\/span> result =<\/span> await<\/span> res.<\/span>json<\/span>(<\/span>)<\/span>;<\/span>\n setData<\/span>(<\/span>result)<\/span>;<\/span>\n setLoading<\/span>(<\/span>false<\/span>)<\/span>;<\/span>\n }<\/span>\n fetchData<\/span>(<\/span>)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>url]<\/span>)<\/span>;<\/span>\n\n return<\/span> {<\/span> data,<\/span> loading }<\/span>;<\/span>\n}<\/span>\n\n\/\/ Usage<\/span>\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> {<\/span> data,<\/span> loading }<\/span> =<\/span> useFetch<\/span>(<\/span>'https:\/\/api.example.com\/data'<\/span>)<\/span>;<\/span>\n return<\/span> loading ?<\/span> <<\/span>p<\/span>><\/span><\/span>Loading...<\/span><\/<\/span>p<\/span>><\/span><\/span> :<\/span> <<\/span>pre<\/span>><\/span><\/span>{<\/span>JSON.<\/span>stringify<\/span>(<\/span>data)<\/span>}<\/span><\/<\/span>pre<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n\n<\/code><\/pre>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nPrefix with <code>use<\/code> to follow React convention.<\/p>\n<\/li>\n<li>\nKeep hooks focused; each custom hook should handle a single responsibility.<\/p>\n<\/li>\n<\/ul>\nInterview scenario:<\/strong><\/p>\n<ul>\n<li>Asked to abstract repeated fetching logic across multiple components in an interview.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-would-you-optimize-a-large-react-application-for-performance--performance--optimization--advanced\">56. How would you optimize a large React application for performance?<\/strong> | Performance \/ Optimization | Advanced<\/h3>\nPerformance optimization in React focuses on minimizing unnecessary re-renders<\/strong>, efficient state management<\/strong>, and code splitting<\/strong>. Key techniques include:<\/p>\n<ol>\n<li>\nMemoization<\/strong><\/p>\n<ul>\n<li>Use <code>React.memo<\/code> for components and <code>useMemo<\/code> or <code>useCallback<\/code> for values\/functions.<\/li>\n<\/ul>\n<\/li>\n<li>\nCode splitting \/ lazy loading<\/strong><\/p>\n<ul>\n<li>Dynamically load components with <code>React.lazy<\/code> and <code>Suspense<\/code>.<\/li>\n<\/ul>\n<\/li>\n<li>\nAvoid anonymous functions in render<\/strong><\/p>\n<ul>\n<li>Functions inside JSX re-create on each render, causing child re-renders.<\/li>\n<\/ul>\n<\/li>\n<li>\nVirtualization<\/strong><\/p>\n<ul>\n<li>For large lists, use libraries like <code>react-window<\/code> to render only visible items.<\/li>\n<\/ul>\n<\/li>\n<li>\nBatch state updates<\/strong><\/p>\n<ul>\n<li>Use functional updates in <code>setState<\/code> to prevent multiple re-renders.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked to optimize a dashboard rendering thousands of rows or charts without lag.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-react-suspense-for-data-fetching.-how-is-it-different-from-useeffect--asynchronous-handling--suspense--advanced\">57. Explain React Suspense for Data Fetching. How is it different from <code>useEffect<\/code>?<\/strong> | Asynchronous Handling \/ Suspense | Advanced<\/h3>\n<ul>\n<li>\n<code>useEffect<\/code> fetches data after the component mounts; Suspense allows React to wait for data before rendering<\/strong>.<\/p>\n<\/li>\n<li>\nSuspense lets you show a fallback UI<\/strong> while the data is loading.<\/p>\n<\/li>\n<li>\nWorks with libraries like <code>react-query<\/code>, <code>relay<\/code>, or experimental <code>React.lazy<\/code> for data.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React,<\/span> {<\/span> Suspense }<\/span> from<\/span> 'react'<\/span>;<\/span>\nconst<\/span> Profile =<\/span> React.<\/span>lazy<\/span>(<\/span>(<\/span>)<\/span> =><\/span> fetchProfile<\/span>(<\/span>)<\/span>)<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>Suspense<\/span> fallback={<div<\/span>><\/span><\/span>Loading...<\/span><\/<\/span>div<\/span>><\/span><\/span>}<\/span>><\/span>\n <<\/span>Profile<\/span> \/><\/span><\/span>\n <\/<\/span>Suspense<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse Suspense primarily with data-fetching libraries or dynamic imports.<\/p>\n<\/li>\n<li>\nKeep fallback UI simple for a smooth user experience.<\/p>\n<\/li>\n<\/ul>\nSample Interview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked to implement a loading skeleton for a feed or dashboard.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-client-side-routing-and-server-side-routing-in-react--routing--react-router--intermediate\">58. What is the difference between client-side routing and server-side routing in React?<\/strong> | Routing \/ React Router | Intermediate<\/h3>\n<ul>\n<li>\nClient-side routing (CSR)<\/strong><\/p>\n<ul>\n<li>\nManaged in the browser using <code>react-router<\/code>.<\/p>\n<\/li>\n<li>\nFast transitions between pages; only the component updates.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\nServer-side routing (SSR)<\/strong><\/p>\n<ul>\n<li>\nEach URL request hits the server; server returns HTML.<\/p>\n<\/li>\n<li>\nBetter SEO and initial load time; slower navigation without caching.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> BrowserRouter as<\/span> Router,<\/span> Routes,<\/span> Route }<\/span> from<\/span> 'react-router-dom'<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>Router<\/span>><\/span><\/span>\n <<\/span>Routes<\/span>><\/span><\/span>\n <<\/span>Route<\/span> path<\/span>=<\/span>\"<\/span>\/\"<\/span><\/span> element={<Home<\/span> \/><\/span><\/span>}<\/span> \/<\/span>><\/span>\n <<\/span>Route<\/span> path<\/span>=<\/span>\"<\/span>\/about\"<\/span><\/span> element={<About<\/span> \/><\/span><\/span>}<\/span> \/<\/span>><\/span>\n <\/<\/span>Routes<\/span>><\/span><\/span>\n <\/<\/span>Router<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked why SEO is poor for a SPA and how SSR with Next.js solves it.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-does-react.strictmode-help-detect-unsafe-lifecycles-and-side-effects--debugging--strict-mode--intermediate\">59. How does <code>React.StrictMode<\/code> help detect unsafe lifecycles and side effects?<\/strong> | Debugging \/ Strict Mode | Intermediate<\/h3>\n<ul>\n<li>\n<code>StrictMode<\/code> activates additional checks and warnings<\/strong> in development.<\/p>\n<\/li>\n<li>\nIt does not render any visible UI<\/strong> or affect production build.<\/p>\n<\/li>\n<li>\nChecks include:<\/p>\n<ul>\n<li>\nDetecting unsafe lifecycle methods<\/strong> (<code>componentWillMount<\/code>, etc.).<\/p>\n<\/li>\n<li>\nDetecting unexpected side effects<\/strong> in <code>useEffect<\/code>.<\/p>\n<\/li>\n<li>\nWarning about legacy string ref API<\/strong>.<\/p>\n<\/li>\n<li>\nDetecting deprecated findDOMNode usage<\/strong>.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> React from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>React.StrictMode<\/span>><\/span><\/span>\n <<\/span>MyComponent<\/span> \/><\/span><\/span>\n <\/<\/span>React.StrictMode<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked how to identify potential bugs during development without affecting production.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-the-difference-between-reactdom.render-and-reactdom.hydrate.-when-do-you-use-each--ssr--hydration--advanced\">60. Explain the difference between <code>ReactDOM.render<\/code> and <code>ReactDOM.hydrate<\/code>. When do you use each?<\/strong> | SSR \/ Hydration | Advanced<\/h3>\n<ul>\n<li>\n<code>ReactDOM.render<\/code><\/p>\n<ul>\n<li>\nRenders React components into a blank container<\/strong>.<\/p>\n<\/li>\n<li>\nUsed for client-only applications.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<code>ReactDOM.hydrate<\/code><\/p>\n<ul>\n<li>\nUsed when the HTML is pre-rendered by the server (SSR)<\/strong>.<\/p>\n<\/li>\n<li>\nAttaches event listeners and makes HTML interactive without re-rendering it.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">\/\/ Client-side only<\/span>\nReactDOM.<\/span>render<\/span>(<\/span><<\/span>App<\/span> \/><\/span><\/span>,<\/span> document.<\/span>getElementById<\/span>(<\/span>'root'<\/span>)<\/span>)<\/span>;<\/span>\n\n\/\/ Server-side rendered<\/span>\nReactDOM.<\/span>hydrate<\/span>(<\/span><<\/span>App<\/span> \/><\/span><\/span>,<\/span> document.<\/span>getElementById<\/span>(<\/span>'root'<\/span>)<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nUse <code>hydrate<\/code> only with server-rendered HTML.<\/p>\n<\/li>\n<li>\nAvoid calling <code>render<\/code> on server-rendered content, as it may replace the HTML and lose SSR benefits.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked to explain how Next.js renders pages on the server and transitions to client-side interactivity.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-render-props-and-how-do-they-differ-from-higher-order-components-hocs--component-patterns--code-reuse--intermediate\">61. What are render props and how do they differ from higher-order components (HOCs)?<\/strong> | Component Patterns \/ Code Reuse | Intermediate<\/h3>\nRender props and HOCs are patterns used to share logic between components<\/strong>, but they approach it differently.<\/p>\n<h4 id=\"render-props\">Render Props<\/h4>\nA render prop is a function prop that a component uses to know what to render. It lets you pass data and behavior to children dynamically.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">class<\/span> MouseTracker<\/span> extends<\/span> React.<\/span>Component<\/span> {<\/span>\n state =<\/span> {<\/span> x:<\/span> 0<\/span>,<\/span> y:<\/span> 0<\/span> }<\/span>;<\/span>\n\n handleMouseMove<\/span> =<\/span> (<\/span>event)<\/span> =><\/span> {<\/span>\n this<\/span>.<\/span>setState<\/span>(<\/span>{<\/span> x:<\/span> event.<\/span>clientX,<\/span> y:<\/span> event.<\/span>clientY }<\/span>)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n render<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>div<\/span> onMouseMove<\/span>=<\/span>{<\/span>this<\/span>.<\/span>handleMouseMove}<\/span><\/span>><\/span><\/span>\n {<\/span>this<\/span>.<\/span>props.<\/span>render<\/span>(<\/span>this<\/span>.<\/span>state)<\/span>}<\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n }<\/span>\n}<\/span>\n\n\/\/ Usage<\/span>\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>MouseTracker render=<\/span>{<\/span>(<\/span>{<\/span> x,<\/span> y }<\/span>)<\/span> =><\/span> (<\/span>\n <<\/span>h1<\/span>><\/span><\/span>The mouse is at<\/span> (<\/span>{<\/span>x}<\/span>,<\/span> {<\/span>y}<\/span>)<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n )<\/span>}<\/span> \/<\/span>><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\n<h4 id=\"higher-order-components-hocs\">Higher-Order Components (HOCs)<\/h4>\nAn HOC is a function that takes a component and returns a new enhanced component.<\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> withMouse<\/span>(<\/span>WrappedComponent)<\/span> {<\/span>\n return<\/span> class<\/span> extends<\/span> React.<\/span>Component {<\/span>\n state =<\/span> {<\/span> x:<\/span> 0<\/span>,<\/span> y:<\/span> 0<\/span> }<\/span>;<\/span>\n\n handleMouseMove<\/span> =<\/span> (<\/span>event)<\/span> =><\/span> {<\/span>\n this<\/span>.<\/span>setState<\/span>(<\/span>{<\/span> x:<\/span> event.<\/span>clientX,<\/span> y:<\/span> event.<\/span>clientY }<\/span>)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n render<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>div<\/span> onMouseMove<\/span>=<\/span>{<\/span>this<\/span>.<\/span>handleMouseMove}<\/span><\/span>><\/span><\/span>\n <<\/span>WrappedComponent<\/span> {<\/span>...<\/span>this<\/span>.<\/span>props<\/span>}<\/span><\/span> mouse<\/span>=<\/span>{<\/span>this<\/span>.<\/span>state}<\/span><\/span> \/><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n }<\/span>\n }<\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> DisplayMouse<\/span>(<\/span>{<\/span> mouse }<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>h1<\/span>><\/span><\/span>The mouse is at<\/span> (<\/span>{<\/span>mouse.<\/span>x}<\/span>,<\/span> {<\/span>mouse.<\/span>y}<\/span>)<\/span><\/<\/span>h1<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n\nconst<\/span> EnhancedDisplay =<\/span> withMouse<\/span>(<\/span>DisplayMouse)<\/span>;<\/span>\n<\/code><\/pre>\nDifferences:<\/strong><\/p>\n\n<table>\n<thead>\n<tr>\n<th>Aspect<\/th>\n<th>Render Props<\/th>\n<th>HOC<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>How it works<\/td>\n<td>Passes a function as a prop<\/td>\n<td>Wraps a component<\/td>\n<\/tr>\n<tr>\n<td>Syntax complexity<\/td>\n<td>Slightly simpler and more composable<\/td>\n<td>Requires extra layers<\/td>\n<\/tr>\n<tr>\n<td>Debugging<\/td>\n<td>Easier due to explicit structure<\/td>\n<td>Can be harder with nested components<\/td>\n<\/tr>\n<\/tbody>\n<\/table>Interview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked to refactor shared logic between components without repeating code.<\/p>\n<\/li>\n<li>\nAsked about patterns for code reuse in React.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-the-difference-between-useeffect-cleanup-and-componentwillunmount-in-class-components.--lifecycle--hooks--intermediate\">62. Explain the difference between <code>useEffect<\/code> cleanup and <code>componentWillUnmount<\/code> in class components.<\/strong> | Lifecycle \/ Hooks | Intermediate<\/h3>\nBoth handle cleaning up resources<\/strong>, but they belong to different paradigms.<\/p>\n<ul>\n<li><code>componentWillUnmount<\/code> is a lifecycle method used in class components to clean up things like timers or subscriptions before the component is removed.<\/li>\n<\/ul>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">class<\/span> Timer<\/span> extends<\/span> React.<\/span>Component<\/span> {<\/span>\n componentDidMount<\/span>(<\/span>)<\/span> {<\/span>\n this<\/span>.<\/span>interval =<\/span> setInterval<\/span>(<\/span>(<\/span>)<\/span> =><\/span> console.<\/span>log<\/span>(<\/span>'tick'<\/span>)<\/span>,<\/span> 1000<\/span>)<\/span>;<\/span>\n }<\/span>\n\n componentWillUnmount<\/span>(<\/span>)<\/span> {<\/span>\n clearInterval<\/span>(<\/span>this<\/span>.<\/span>interval)<\/span>;<\/span>\n }<\/span>\n\n render<\/span>(<\/span>)<\/span> {<\/span>\n return<\/span> <<\/span>div<\/span>><\/span><\/span>Timer running<\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n }<\/span>\n}<\/span>\n<\/code><\/pre>\n<ul>\n<li><code>useEffect<\/code> with a return function acts similarly in functional components. The cleanup runs when the component unmounts or before the effect runs again.<\/li>\n<\/ul>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Timer<\/span>(<\/span>)<\/span> {<\/span>\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n const<\/span> interval =<\/span> setInterval<\/span>(<\/span>(<\/span>)<\/span> =><\/span> console.<\/span>log<\/span>(<\/span>'tick'<\/span>)<\/span>,<\/span> 1000<\/span>)<\/span>;<\/span>\n return<\/span> (<\/span>)<\/span> =><\/span> clearInterval<\/span>(<\/span>interval)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>div<\/span>><\/span><\/span>Timer running<\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nKey differences:<\/strong><\/p>\n<ul>\n<li>\n<code>componentWillUnmount<\/code> only runs when the component is about to be removed.<\/p>\n<\/li>\n<li>\n<code>useEffect<\/code> cleanup can run before the next effect, depending on dependencies.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to prevent memory leaks in React apps.<\/p>\n<\/li>\n<li>\nAsked to refactor class-based code to hooks while preserving cleanup logic.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-would-you-implement-a-react-component-that-subscribes-to-an-external-data-source-and-cleans-up-correctly--hooks--asynchronous-updates--intermediate\u2013advanced\">63. How would you implement a React component that subscribes to an external data source and cleans up correctly?<\/strong> | Hooks \/ Asynchronous Updates | Intermediate\u2013Advanced<\/h3>\nA component subscribing to an external service (e.g., WebSocket, API polling) must manage subscriptions and clean them up when the component unmounts.<\/p>\nExample: WebSocket Subscription<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> useState,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> Chat<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>messages,<\/span> setMessages]<\/span> =<\/span> useState<\/span>(<\/span>[<\/span>]<\/span>)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n const<\/span> socket =<\/span> new<\/span> WebSocket<\/span>(<\/span>'wss:\/\/chat.example.com'<\/span>)<\/span>;<\/span>\n\n socket.<\/span>onmessage<\/span> =<\/span> (<\/span>event)<\/span> =><\/span> {<\/span>\n setMessages<\/span>(<\/span>(<\/span>prev)<\/span> =><\/span> [<\/span>...<\/span>prev,<\/span> event.<\/span>data]<\/span>)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n return<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n socket.<\/span>close<\/span>(<\/span>)<\/span>;<\/span>\n }<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n {<\/span>messages.<\/span>map<\/span>(<\/span>(<\/span>msg,<\/span> index)<\/span> =><\/span> <<\/span>div<\/span> key<\/span>=<\/span>{<\/span>index}<\/span><\/span>><\/span><\/span>{<\/span>msg}<\/span><\/<\/span>div<\/span>><\/span><\/span>)<\/span>}<\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nBest practices:<\/strong><\/p>\n<ul>\n<li>\nAlways close subscriptions in the cleanup function.<\/p>\n<\/li>\n<li>\nAvoid stale closures by using functional updates when setting state.<\/p>\n<\/li>\n<li>\nUse dependency arrays carefully to prevent unwanted resubscriptions.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked to implement real-time data updates without introducing memory leaks or performance issues.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-react-server-components-and-client-components--react-18--ssr--advanced\">64. What is the difference between React server components and client components?<\/strong> | React 18 \/ SSR | Advanced<\/h3>\nReact Server Components (RSC) allow parts of the UI to be rendered on the server without sending unnecessary JavaScript to the client, improving performance.<\/p>\n\n<table>\n<thead>\n<tr>\n<th>Feature<\/th>\n<th align=\"right\">Server Components<\/th>\n<th align=\"right\">Client Components<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Render location<\/td>\n<td align=\"right\">Server-side<\/td>\n<td align=\"right\">Client-side<\/td>\n<\/tr>\n<tr>\n<td>State & hooks<\/td>\n<td align=\"right\">Limited (no local state\/hooks)<\/td>\n<td align=\"right\">Full support<\/td>\n<\/tr>\n<tr>\n<td>Bundle size<\/td>\n<td align=\"right\">Smaller for client<\/td>\n<td align=\"right\">Larger due to dependencies<\/td>\n<\/tr>\n<tr>\n<td>Use case<\/td>\n<td align=\"right\">Data fetching, static content<\/td>\n<td align=\"right\">Interactivity, event handlers<\/td>\n<\/tr>\n<\/tbody>\n<\/table>Example (conceptual):<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">\/\/ Server Component (no interactivity)<\/span>\nexport<\/span> default<\/span> function<\/span> UserList<\/span>(<\/span>{<\/span> users }<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>ul<\/span>><\/span><\/span>\n {<\/span>users.<\/span>map<\/span>(<\/span>user =><\/span> <<\/span>li<\/span> key<\/span>=<\/span>{<\/span>user.<\/span>id}<\/span><\/span>><\/span><\/span>{<\/span>user.<\/span>name}<\/span><\/<\/span>li<\/span>><\/span><\/span>)<\/span>}<\/span>\n <\/<\/span>ul<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\n\/\/ Client Component (interactive)<\/span>\n'use client'<\/span>;<\/span>\nimport<\/span> {<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nexport<\/span> default<\/span> function<\/span> AddUser<\/span>(<\/span>{<\/span> onAdd }<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>name,<\/span> setName]<\/span> =<\/span> useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span>\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>input<\/span> value<\/span>=<\/span>{<\/span>name}<\/span><\/span> onChange<\/span>=<\/span>{<\/span>(<\/span>e)<\/span> =><\/span> setName<\/span>(<\/span>e.<\/span>target.<\/span>value)<\/span>}<\/span><\/span> \/><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> onAdd<\/span>(<\/span>name)<\/span>}<\/span><\/span>><\/span><\/span>Add User<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked how to optimize initial page load or differentiate interactive vs static parts of the UI in Next.js or similar frameworks.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-do-you-prevent-unnecessary-re-renders-in-react-components--performance--optimization--advanced\">65. How do you prevent unnecessary re-renders in React components?<\/strong> | Performance \/ Optimization | Advanced<\/h3>\nUnnecessary re-renders can slow down applications. Key strategies include:<\/p>\n<ol>\n<li>\nUse <code>React.memo<\/code><\/strong><\/p>\n<ul>\n<li>Wrap components to skip re-rendering if props haven\u2019t changed.<\/li>\n<\/ul>\n<\/li>\n<li>\nUse <code>useMemo<\/code> and <code>useCallback<\/code><\/strong><\/p>\n<ul>\n<li>Memoize values and functions passed as props.<\/li>\n<\/ul>\n<\/li>\n<li>\nManage state wisely<\/strong><\/p>\n<ul>\n<li>Avoid storing unrelated data in a shared state that triggers re-renders.<\/li>\n<\/ul>\n<\/li>\n<li>\nSplit state into smaller parts<\/strong><\/p>\n<ul>\n<li>Localize state where possible to limit updates.<\/li>\n<\/ul>\n<\/li>\n<li>\nUse selectors or context wisely<\/strong><\/p>\n<ul>\n<li>Avoid passing large objects unnecessarily.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> Child =<\/span> React.<\/span>memo<\/span>(<\/span>(<\/span>{<\/span> value }<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Child rendered'<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>div<\/span>><\/span><\/span>{<\/span>value}<\/span><\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n\nfunction<\/span> Parent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>text,<\/span> setText]<\/span> =<\/span> useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>><\/span>\n <<\/span>Child<\/span> value<\/span>=<\/span>{<\/span>count}<\/span><\/span> \/><\/span><\/span>\n <<\/span>input<\/span> value<\/span>=<\/span>{<\/span>text}<\/span><\/span> onChange<\/span>=<\/span>{<\/span>(<\/span>e)<\/span> =><\/span> setText<\/span>(<\/span>e.<\/span>target.<\/span>value)<\/span>}<\/span><\/span> \/><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment<\/<\/span>button<\/span>><\/span><\/span>\n <<\/span>\/<\/span>><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>Asked how to optimize a component that re-renders unnecessarily due to state changes elsewhere.<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-react.memo-and-when-should-you-use-it--performance--optimization--intermediate\u2013advanced\">66. What is React.memo and when should you use it?<\/strong> | Performance \/ Optimization | Intermediate\u2013Advanced<\/h3>\n<code>React.memo<\/code> is a higher-order component (HOC) that helps prevent unnecessary re-renders by memoizing the result. It shallowly compares the previous and next props and only re-renders the component if the props have changed.<\/p>\nUsage Example:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">const<\/span> Child =<\/span> React.<\/span>memo<\/span>(<\/span>(<\/span>{<\/span> name }<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Child rendered'<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>div<\/span>><\/span><\/span>Hello,<\/span> {<\/span>name}<\/span>!<\/span><\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n\nfunction<\/span> Parent<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>name,<\/span> setName]<\/span> =<\/span> useState<\/span>(<\/span>\"Alice\"<\/span>)<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n <<\/span>Child<\/span> name<\/span>=<\/span>{<\/span>name}<\/span><\/span> \/><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Increment Count<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nIn this example, clicking the \u201cIncrement Count\u201d button will not cause the <code>Child<\/code> component to re-render because the <code>name<\/code> prop hasn\u2019t changed.<\/p>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nWhen a component receives props that don\u2019t change frequently.<\/p>\n<\/li>\n<li>\nFor functional components that are expensive to render.<\/p>\n<\/li>\n<\/ul>\nSample Interview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to optimize render performance in a large component tree.<\/p>\n<\/li>\n<li>\nAsked why a child component is re-rendering even though its props seem unchanged.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-react.memo-and-usememo--performance--optimization--intermediate\u2013advanced\">67. What is the difference between <code>React.memo<\/code> and <code>useMemo<\/code>?<\/strong> | Performance \/ Optimization | Intermediate\u2013Advanced<\/h3>\nBoth <code>React.memo<\/code> and <code>useMemo<\/code> are used for memoization but in different contexts:<\/p>\n\n<table>\n<thead>\n<tr>\n<th>Feature<\/th>\n<th align=\"right\">React.memo<\/th>\n<th align=\"right\">useMemo<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>What it memoizes<\/td>\n<td align=\"right\">Entire component\u2019s render output<\/td>\n<td align=\"right\">The result of a calculation or function<\/td>\n<\/tr>\n<tr>\n<td>Where used<\/td>\n<td align=\"right\">Wraps functional components<\/td>\n<td align=\"right\">Inside functional components<\/td>\n<\/tr>\n<tr>\n<td>Purpose<\/td>\n<td align=\"right\">Avoid unnecessary renders<\/td>\n<td align=\"right\">Avoid recalculations<\/td>\n<\/tr>\n<\/tbody>\n<\/table>Example using <code>useMemo<\/code>:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> Parent<\/span>(<\/span>{<\/span> count }<\/span>)<\/span> {<\/span>\n const<\/span> expensiveValue =<\/span> useMemo<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Calculating...'<\/span>)<\/span>;<\/span>\n return<\/span> count *<\/span> 2<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>count]<\/span>)<\/span>;<\/span>\n\n return<\/span> <<\/span>div<\/span>><\/span><\/span>Result:<\/span> {<\/span>expensiveValue}<\/span><\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nUse <code>React.memo<\/code> when you want to avoid unnecessary renders of child components.<\/p>\n<\/li>\n<li>\nUse <code>useMemo<\/code> when you have expensive computations inside a component.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to prevent redundant computations or renders in a performance-sensitive React app.<\/p>\n<\/li>\n<li>\nAsked to distinguish between component-level and value-level optimizations.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-react-event-system-and-how-is-it-different-from-native-dom-events--event-handling--intermediate\">68. What is the React event system and how is it different from native DOM events?<\/strong> | Event Handling | Intermediate<\/h3>\nReact uses a synthetic event system<\/strong> that wraps native DOM events to ensure consistent behavior across browsers.<\/p>\nKey differences:<\/strong><\/p>\n<ul>\n<li>\nCross-browser compatibility:<\/strong> React normalizes events to work the same in all browsers.<\/p>\n<\/li>\n<li>\nEvent delegation:<\/strong> Events are attached at the root of the document, reducing memory usage and improving performance.<\/p>\n<\/li>\n<li>\nConsistent event object:<\/strong> React\u2019s <code>SyntheticEvent<\/code> abstracts away browser-specific quirks.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> Button<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> handleClick<\/span> =<\/span> (<\/span>event)<\/span> =><\/span> {<\/span>\n console.<\/span>log<\/span>(<\/span>'Button clicked!'<\/span>,<\/span> event.<\/span>type)<\/span>;<\/span>\n }<\/span>;<\/span>\n\n return<\/span> <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>handleClick}<\/span><\/span>><\/span><\/span>Click Me<\/<\/span>button<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nCommon pitfalls:<\/strong><\/p>\n<ul>\n<li>\nAssuming that React\u2019s event object persists after the handler is complete (it gets pooled).<\/p>\n<\/li>\n<li>\nUsing browser-specific event properties without checking compatibility.<\/p>\n<\/li>\n<\/ul>\nBest practice:<\/strong><\/p>\n<ul>\n<li>If you need to use the event asynchronously, call <code>event.persist()<\/code> or copy the properties you need.<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how React handles events differently from the DOM.<\/p>\n<\/li>\n<li>\nAsked how to implement event delegation or manage performance in event-heavy components.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-custom-hooks-and-why-should-you-use-them--hooks--code-reuse--intermediate\">69. What are custom hooks and why should you use them?<\/strong> | Hooks \/ Code Reuse | Intermediate<\/h3>\nCustom hooks are reusable functions built on top of React\u2019s built-in hooks (<code>useState<\/code>, <code>useEffect<\/code>, etc.). They allow you to encapsulate logic that can be shared across multiple components.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> useState,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nfunction<\/span> useWindowWidth<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>width,<\/span> setWidth]<\/span> =<\/span> useState<\/span>(<\/span>window.<\/span>innerWidth)<\/span>;<\/span>\n\n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n const<\/span> handleResize<\/span> =<\/span> (<\/span>)<\/span> =><\/span> setWidth<\/span>(<\/span>window.<\/span>innerWidth)<\/span>;<\/span>\n window.<\/span>addEventListener<\/span>(<\/span>'resize'<\/span>,<\/span> handleResize)<\/span>;<\/span>\n return<\/span> (<\/span>)<\/span> =><\/span> window.<\/span>removeEventListener<\/span>(<\/span>'resize'<\/span>,<\/span> handleResize)<\/span>;<\/span>\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n return<\/span> width;<\/span>\n}<\/span>\n\nfunction<\/span> Component<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> width =<\/span> useWindowWidth<\/span>(<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>div<\/span>><\/span><\/span>Window width is {<\/span>width}<\/span>px<\/<\/span>div<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhy use custom hooks:<\/strong><\/p>\n<ul>\n<li>\nAvoid repeating logic across components.<\/p>\n<\/li>\n<li>\nImprove maintainability and readability.<\/p>\n<\/li>\n<li>\nKeep component code focused on UI rendering.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to share logic between components without duplicating code.<\/p>\n<\/li>\n<li>\nAsked to refactor a class component with repeated logic into hooks.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-time-slicing-in-react-and-why-is-it-important--react-internals--performance--advanced\">70. What is time slicing in React and why is it important?<\/strong> | React Internals \/ Performance | Advanced<\/h3>\nTime slicing is a feature introduced with React Fiber<\/strong> that allows rendering work to be split into small chunks and spread over multiple frames. This prevents the UI from blocking and keeps it responsive, especially for complex or long tasks.<\/p>\nHow it works:<\/strong><\/p>\n<ul>\n<li>\nReact prioritizes urgent tasks (like animations or user interactions).<\/p>\n<\/li>\n<li>\nNon-urgent tasks (like rendering large lists) are spread out to avoid blocking the main thread.<\/p>\n<\/li>\n<\/ul>\nExample use case:<\/strong> \nRendering thousands of items without freezing the UI by using Suspense and lazy loading.<\/p>\nBenefits:<\/strong><\/p>\n<ul>\n<li>\nSmoother animations and interactions.<\/p>\n<\/li>\n<li>\nAvoids freezing the main thread during heavy rendering.<\/p>\n<\/li>\n<\/ul>\nLimitations:<\/strong><\/p>\n<ul>\n<li>Not all work is automatically time sliced; developers need to structure components and use features like <code>Suspense<\/code> to take advantage of it.<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to handle rendering large datasets without impacting UI responsiveness.<\/p>\n<\/li>\n<li>\nAsked to explain improvements React Fiber brought over the previous architecture.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-would-you-implement-optimistic-ui-updates-in-react-applications--state-management--ux-patterns--advanced\">71. How would you implement optimistic UI updates in React applications?<\/strong> | State Management \/ UX Patterns | Advanced<\/h3>\nOptimistic UI updates refer to updating the UI immediately, assuming that the action (like a server request) will succeed, and rolling back if it fails. This improves perceived performance and responsiveness.<\/p>\nSteps to implement:<\/strong><\/p>\n<ol>\n<li>\nUpdate the UI state immediately upon user action.<\/p>\n<\/li>\n<li>\nSend the request to the server.<\/p>\n<\/li>\n<li>\nIf the request succeeds, confirm the update or fetch fresh data.<\/p>\n<\/li>\n<li>\nIf the request fails, revert the state and show an error.<\/p>\n<\/li>\n<\/ol>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> TodoApp<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>todos,<\/span> setTodos]<\/span> =<\/span> useState<\/span>(<\/span>[<\/span>{<\/span> id:<\/span> 1<\/span>,<\/span> text:<\/span> 'Learn React'<\/span> }<\/span>]<\/span>)<\/span>;<\/span>\n const<\/span> [<\/span>error,<\/span> setError]<\/span> =<\/span> useState<\/span>(<\/span>null<\/span>)<\/span>;<\/span>\n\n const<\/span> addTodo =<\/span> async<\/span> (<\/span>newTodo)<\/span> =><\/span> {<\/span>\n const<\/span> optimisticTodo =<\/span> {<\/span> id:<\/span> Date.<\/span>now<\/span>(<\/span>)<\/span>,<\/span> text:<\/span> newTodo }<\/span>;<\/span>\n setTodos<\/span>(<\/span>[<\/span>...<\/span>todos,<\/span> optimisticTodo]<\/span>)<\/span>;<\/span> \/\/ Step 1: Optimistic update<\/span>\n\n try<\/span> {<\/span>\n await<\/span> fetch<\/span>(<\/span>'\/api\/todos'<\/span>,<\/span> {<\/span>\n method:<\/span> 'POST'<\/span>,<\/span>\n body:<\/span> JSON.<\/span>stringify<\/span>(<\/span>optimisticTodo)<\/span>,<\/span>\n }<\/span>)<\/span>;<\/span>\n }<\/span> catch<\/span> (<\/span>err<\/span>)<\/span> {<\/span>\n setError<\/span>(<\/span>'Failed to add todo'<\/span>)<\/span>;<\/span>\n setTodos<\/span>(<\/span>todos)<\/span>;<\/span> \/\/ Rollback<\/span>\n }<\/span>\n }<\/span>;<\/span>\n\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n {<\/span>error &&<\/span> <<\/span>p<\/span> style<\/span>=<\/span>{<\/span>{<\/span>color:<\/span> 'red'<\/span>}<\/span>}<\/span><\/span>><\/span><\/span>{<\/span>error}<\/span><\/<\/span>p<\/span>><\/span><\/span>}<\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> addTodo<\/span>(<\/span>'New Task'<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Add Todo<\/<\/span>button<\/span>><\/span><\/span>\n <<\/span>ul<\/span>><\/span><\/span>{<\/span>todos.<\/span>map<\/span>(<\/span>todo =><\/span> <<\/span>li<\/span> key<\/span>=<\/span>{<\/span>todo.<\/span>id}<\/span><\/span>><\/span><\/span>{<\/span>todo.<\/span>text}<\/span><\/<\/span>li<\/span>><\/span><\/span>)<\/span>}<\/span><\/<\/span>ul<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nWhen user experience is a priority and server latency can be unpredictable.<\/p>\n<\/li>\n<li>\nIn scenarios like form submissions, data updates, etc.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to make the UI feel snappy even if the backend is slow.<\/p>\n<\/li>\n<li>\nAsked to explain how to handle failure cases in real-time applications.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"how-do-you-handle-accessibility-a11y-in-a-react-application--ui--accessibility--intermediate\">72. How do you handle accessibility (a11y) in a React application?<\/strong> | UI \/ Accessibility | Intermediate<\/h3>\nAccessibility ensures that your application can be used by people with disabilities. React encourages semantic HTML and attributes like <code>aria-*<\/code> to improve accessibility.<\/p>\nKey techniques:<\/strong><\/p>\n<ul>\n<li>\nUse semantic elements like <code><button><\/code>, <code><nav><\/code>, <code><form><\/code>.<\/p>\n<\/li>\n<li>\nAdd <code>aria-label<\/code>, <code>aria-describedby<\/code>, and <code>aria-expanded<\/code> where needed.<\/p>\n<\/li>\n<li>\nEnsure proper keyboard navigation (using <code>tabIndex<\/code>, etc.).<\/p>\n<\/li>\n<li>\nManage focus for modals or dialogs.<\/p>\n<\/li>\n<li>\nUse libraries like <code>react-aria<\/code> or <code>react-axe<\/code> to audit accessibility.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">function<\/span> Modal<\/span>(<\/span>{<\/span> isOpen,<\/span> onClose }<\/span>)<\/span> {<\/span>\n return<\/span> isOpen ?<\/span> (<\/span>\n <<\/span>div<\/span> role<\/span>=<\/span>\"<\/span>dialog\"<\/span><\/span> aria-modal<\/span>=<\/span>\"<\/span>true\"<\/span><\/span> aria-labelledby<\/span>=<\/span>\"<\/span>dialog-title\"<\/span><\/span>><\/span><\/span>\n <<\/span>h2<\/span> id<\/span>=<\/span>\"<\/span>dialog-title\"<\/span><\/span>><\/span><\/span>Subscribe<\/<\/span>h2<\/span>><\/span><\/span>\n <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>onClose}<\/span><\/span>><\/span><\/span>Close<\/<\/span>button<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span> :<\/span> null<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to make web applications inclusive.<\/p>\n<\/li>\n<li>\nAsked how to fix keyboard navigation issues.<\/p>\n<\/li>\n<li>\nAsked how to use <code>aria<\/code> attributes in forms or dialogs.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-are-react-portals-and-when-would-you-use-them-can-you-give-a-complex-example--ui--dom-manipulation--intermediate\">73. What are React Portals and when would you use them? Can you give a complex example?<\/strong> | UI \/ DOM Manipulation | Intermediate<\/h3>\nReact Portals allow rendering components outside of the parent DOM hierarchy while keeping React\u2019s state and context intact. This is useful for modals, tooltips, dropdowns, etc., that need to break out of layout constraints.<\/p>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> ReactDOM from<\/span> 'react-dom'<\/span>;<\/span>\n\nfunction<\/span> Modal<\/span>(<\/span>{<\/span> children,<\/span> isOpen,<\/span> onClose }<\/span>)<\/span> {<\/span>\n if<\/span> (<\/span>!<\/span>isOpen)<\/span> return<\/span> null<\/span>;<\/span>\n\n return<\/span> ReactDOM.<\/span>createPortal<\/span>(<\/span>\n <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>modal-backdrop\"<\/span><\/span> onClick<\/span>=<\/span>{<\/span>onClose}<\/span><\/span>><\/span><\/span>\n <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>modal-content\"<\/span><\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>e)<\/span> =><\/span> e.<\/span>stopPropagation<\/span>(<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>\n {<\/span>children}<\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n <\/<\/span>div<\/span>><\/span><\/span>,<\/span>\n document.<\/span>getElementById<\/span>(<\/span>'modal-root'<\/span>)<\/span>\n )<\/span>;<\/span>\n}<\/span>\n\n<\/code><\/pre>\nComplex example:<\/strong><\/p>\n<ul>\n<li>\nModal with focus trap and keyboard accessibility.<\/p>\n<\/li>\n<li>\nTooltips rendered relative to a button but outside overflow boundaries.<\/p>\n<\/li>\n<\/ul>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nUI elements that need to overlay other content.<\/p>\n<\/li>\n<li>\nAvoid issues with CSS stacking context, z-index, or overflow.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to implement modals or dropdowns without layout issues.<\/p>\n<\/li>\n<li>\nAsked how to separate overlay elements while maintaining state and props.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"explain-the-difference-between-shallow-rendering-and-full-dom-rendering-in-react-testing.--testing--react-testing-library--intermediate\">74. Explain the difference between shallow rendering and full DOM rendering in React testing.<\/strong> | Testing \/ React Testing Library | Intermediate<\/h3>\nIn testing, shallow rendering and full DOM rendering are two different approaches to isolate component behavior.<\/p>\nShallow rendering:<\/strong><\/p>\n<ul>\n<li>\nRenders the component without rendering its child components.<\/p>\n<\/li>\n<li>\nUsed to test a component\u2019s output in isolation.<\/p>\n<\/li>\n<li>\nProvided by tools like <code>enzyme<\/code>.<\/p>\n<\/li>\n<\/ul>\nFull DOM rendering:<\/strong><\/p>\n<ul>\n<li>\nRenders the entire component tree.<\/p>\n<\/li>\n<li>\nSuitable for integration tests where you need to interact with nested components or lifecycle methods.<\/p>\n<\/li>\n<\/ul>\nExample:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">import<\/span> {<\/span> shallow,<\/span> mount }<\/span> from<\/span> 'enzyme'<\/span>;<\/span>\nimport<\/span> MyComponent from<\/span> '.\/MyComponent'<\/span>;<\/span>\n\ntest<\/span>(<\/span>'shallow test'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n const<\/span> wrapper =<\/span> shallow<\/span>(<\/span><<\/span>MyComponent<\/span> \/><\/span><\/span>)<\/span>;<\/span>\n expect<\/span>(<\/span>wrapper.<\/span>find<\/span>(<\/span>'button'<\/span>)<\/span>.<\/span>exists<\/span>(<\/span>)<\/span>)<\/span>.<\/span>toBe<\/span>(<\/span>true<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n\ntest<\/span>(<\/span>'full render test'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n const<\/span> wrapper =<\/span> mount<\/span>(<\/span><<\/span>MyComponent<\/span> \/><\/span><\/span>)<\/span>;<\/span>\n expect<\/span>(<\/span>wrapper.<\/span>find<\/span>(<\/span>'ChildComponent'<\/span>)<\/span>.<\/span>length)<\/span>.<\/span>toBe<\/span>(<\/span>1<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nUse shallow rendering for unit tests.<\/p>\n<\/li>\n<li>\nUse full DOM rendering for complex interactions or state changes.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how to write test cases that isolate logic versus testing full UI behavior.<\/p>\n<\/li>\n<li>\nAsked when to use enzyme vs React Testing Library.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"what-is-the-difference-between-server-components-and-client-components-in-react--react-18--architecture--advanced\">75. What is the difference between server components and client components in React?<\/strong> | React 18+ \/ Architecture | Advanced<\/h3>\nReact 18 introduces server components<\/strong>, which are rendered on the server and streamed to the client, unlike client components that are fully loaded and executed on the browser.<\/p>\nKey differences:<\/strong><\/p>\n\n<table>\n<thead>\n<tr>\n<th>Feature<\/th>\n<th align=\"right\">Server Components<\/th>\n<th align=\"right\">Client Components<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Rendering location<\/td>\n<td align=\"right\">Server<\/td>\n<td align=\"right\">Browser<\/td>\n<\/tr>\n<tr>\n<td>JavaScript payload<\/td>\n<td align=\"right\">Minimal or none<\/td>\n<td align=\"right\">Full bundle<\/td>\n<\/tr>\n<tr>\n<td>Data fetching<\/td>\n<td align=\"right\">Direct from server-side APIs<\/td>\n<td align=\"right\">Needs client-side calls<\/td>\n<\/tr>\n<tr>\n<td>Use case<\/td>\n<td align=\"right\">Static content, SEO, performance<\/td>\n<td align=\"right\">Interactivity, event handling<\/td>\n<\/tr>\n<\/tbody>\n<\/table>Example:<\/strong><\/p>\n<pre class=\" language-jsx\"><code class=\"prism language-jsx\">\/\/ Server Component (no hooks or browser-specific code)<\/span>\nexport<\/span> default<\/span> function<\/span> ProductList<\/span>(<\/span>{<\/span> products }<\/span>)<\/span> {<\/span>\n return<\/span> (<\/span>\n <<\/span>div<\/span>><\/span><\/span>\n {<\/span>products.<\/span>map<\/span>(<\/span>product =><\/span> <<\/span>div<\/span> key<\/span>=<\/span>{<\/span>product.<\/span>id}<\/span><\/span>><\/span><\/span>{<\/span>product.<\/span>name}<\/span><\/<\/span>div<\/span>><\/span><\/span>)<\/span>}<\/span>\n <\/<\/span>div<\/span>><\/span><\/span>\n )<\/span>;<\/span>\n}<\/span>\n\n\/\/ Client Component (with interactivity)<\/span>\n\"use client\"<\/span>;<\/span>\nimport<\/span> {<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nexport<\/span> default<\/span> function<\/span> CartButton<\/span>(<\/span>)<\/span> {<\/span>\n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n return<\/span> <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>count +<\/span> 1<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Add {<\/span>count}<\/span><\/<\/span>button<\/span>><\/span><\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\nWhen to use:<\/strong><\/p>\n<ul>\n<li>\nServer components: for static or SEO-heavy pages.<\/p>\n<\/li>\n<li>\nClient components: for interactive or state-driven UI.<\/p>\n<\/li>\n<\/ul>\nInterview Scenario:<\/strong><\/p>\n<ul>\n<li>\nAsked how React\u2019s architecture is evolving.<\/p>\n<\/li>\n<li>\nAsked how server-side rendering impacts performance and scalability.<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/body>\n\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"React Blind 75 This guide is a carefully curated collection of 75 React interview questions designed to help learners build a deep understanding of React and confidently crack technical interviews at product-based companies, startups, and top-tier organizations. The questions are structured progressively, starting from the fundamentals and moving toward advanced concepts, including state management, hooks,<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10074","post","type-post","status-publish","format-standard","category-uncategorized"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/10074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=10074"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/10074\/revisions"}],"predecessor-version":[{"id":10075,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/10074\/revisions\/10075"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=10074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=10074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=10074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}