{"id":47214,"date":"2026-10-13T16:24:28","date_gmt":"2026-10-13T10:54:28","guid":{"rendered":"https:\/\/www.foundit.sg\/career-advice\/?p=47214"},"modified":"2026-10-13T16:24:28","modified_gmt":"2026-10-13T10:54:28","slug":"react-js-interview-questions-answers","status":"publish","type":"post","link":"https:\/\/www.foundit.sg\/career-advice\/react-js-interview-questions-answers\/","title":{"rendered":"50+ React.js Interview Questions with Answers 2026"},"content":{"rendered":"<p class=\"wp-block-paragraph\"><strong>React JS interview questions<\/strong> often test how well developers understand components, props, state, hooks, rendering and application performance. For experienced candidates, interviews may also cover architecture, testing, server-side rendering and debugging production applications.<p class=\"wp-block-paragraph\">This guide covers <strong>50 React JS interview questions and answers<\/strong> for freshers, intermediate developers and experienced professionals. It includes technical explanations, code examples and scenario-based questions to help candidates understand concepts rather than memorise definitions.<\/p><p class=\"wp-block-paragraph\">The questions are organised by experience level and subject, beginning with React fundamentals and progressing to hooks, performance optimisation, application architecture, testing and behavioural interviews.<\/p><div class=\"wp-block-group is-style-default has-background\" border-radius:8px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\r\n\r\n\n<h3 class=\"wp-block-heading\">Quick Summary<\/h3>\n\n\r\n\r\n\n<p class=\"wp-block-paragraph\"><strong>Freshers:<\/strong> Focus on JSX, components, props, state, events, lists and hooks.<\/p>\n\n\r\n\r\n\n<p class=\"wp-block-paragraph\"><strong>Intermediate developers:<\/strong> Prepare for controlled forms, component communication, effects and reusable logic.<\/p>\n\n\r\n\r\n\n<p class=\"wp-block-paragraph\"><strong>Experienced developers:<\/strong> Expect questions about rendering behaviour, performance profiling, error handling, state management, testing and architecture.<\/p>\n\n\r\n\r\n<\/div><\/div><div style=\"text-align:center;margin:20px 0;\">\r\n<a href=\"https:\/\/www.foundit.sg\/search\/front-end-developer-jobs\" target=\"_blank\" rel=\"noopener noreferrer\" font-weight:600;\">Explore Front-End Developer Jobs<\/a>\r\n<\/div><h2 class=\"wp-block-heading\">Table of Contents<\/h2><ul class=\"wp-block-list\">\n<li><a href=\"#freshers\">React JS Interview Questions for Freshers<\/a><\/li>\n\n\n\n<li><a href=\"#intermediate\">React Intermediate Interview Questions<\/a><\/li>\n\n\n\n<li><a href=\"#experienced\">React JS Interview Questions for Experienced Developers<\/a><\/li>\n\n\n\n<li><a href=\"#functional\">React Functional Components and Hooks<\/a><\/li>\n\n\n\n<li><a href=\"#performance\">React Performance Optimisation Questions<\/a><\/li>\n\n\n\n<li><a href=\"#architecture\">Architecture and Scenario-Based Questions<\/a><\/li>\n\n\n\n<li><a href=\"#behavioural\">React Behavioural and HR Questions<\/a><\/li>\n\n\n\n<li><a href=\"#more-advanced\">Advanced React JS Interview Questions<\/a><\/li>\n\n\n\n<li><a href=\"#faq\">Frequently Asked Questions<\/a><\/li>\n<\/ul><h2 id=\"freshers\" class=\"wp-block-heading\">React JS Interview Questions for Freshers<\/h2><h3 class=\"wp-block-heading\">1. What is React.js, and why is it used?<\/h3><p class=\"wp-block-paragraph\"><strong>React<\/strong> is a JavaScript library for building user interfaces using reusable components. It was originally developed at Facebook and is now maintained by Meta and the open-source community.<\/p><p class=\"wp-block-paragraph\">Developers use React to build interactive interfaces where the displayed content changes in response to user actions, application state or incoming data.<\/p><p class=\"wp-block-paragraph\"><strong>Key features of React:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Component-based development:<\/strong> Interfaces can be divided into reusable components with their own logic and presentation.<\/li>\n\n\n\n<li><strong>Declarative rendering:<\/strong> Developers describe the UI for a particular state, and React manages the necessary updates.<\/li>\n\n\n\n<li><strong>State management:<\/strong> Components can remember and update information using React state.<\/li>\n\n\n\n<li><strong>Composition:<\/strong> Components can be combined to build larger interfaces.<\/li>\n\n\n\n<li><strong>Flexible integration:<\/strong> React can be used in existing web applications or with frameworks that provide additional routing and rendering capabilities.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> React is a library, not a complete application framework. Routing, data loading and server rendering capabilities depend on the tools or framework used with it.<\/p><h3 class=\"wp-block-heading\">2. What are components in React?<\/h3><p class=\"wp-block-paragraph\">Components are reusable units of a React user interface. A component can contain rendering logic, accept inputs through props and use state to manage information that changes over time.<\/p><p class=\"wp-block-paragraph\">React supports two main component styles:<\/p><ul class=\"wp-block-list\">\n<li><strong>Function components:<\/strong> JavaScript functions that return React elements, usually described using JSX. They can use React Hooks.<\/li>\n\n\n\n<li><strong>Class components:<\/strong> JavaScript classes extending React.Component. They manage state and lifecycle behaviour through class APIs.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Example of a function component:<\/strong><\/p><pre class=\"wp-block-code\"><code>function Welcome( )  !&lt;\/h2&gt;;\n}\n\n\/\/ Usage\n&lt;Welcome name=\"Asha\" \/&gt;\n<\/code><\/pre><p class=\"wp-block-paragraph\">In this example, <code>Welcome<\/code> is a reusable component, and <code>name<\/code> is a prop supplied by its parent.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Function components are recommended for new React development. Class components remain supported, particularly in existing applications.<\/p><h3 class=\"wp-block-heading\">3. What is JSX in React?<\/h3><p class=\"wp-block-paragraph\"><strong>JSX<\/strong> is a syntax extension for JavaScript that allows developers to describe UI elements using HTML-like markup inside JavaScript code.<\/p><p class=\"wp-block-paragraph\">Although JSX resembles HTML, it follows JavaScript-related rules. For example, React uses <code>className<\/code> instead of the HTML <code>class<\/code> attribute, and JSX expressions can contain JavaScript values inside curly braces.<\/p><p class=\"wp-block-paragraph\"><strong>Example:<\/strong><\/p><pre class=\"wp-block-code\"><code>function Greeting( )  !&lt;\/h1&gt;;\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">JSX is transformed into JavaScript by the application&rsquo;s build tools. Modern React projects commonly use the automatic JSX transform, so developers do not necessarily need to import React solely to write JSX.<\/p><p class=\"wp-block-paragraph\">JSX is not mandatory for using React, but it is widely used because it makes component markup easier to read and maintain.<\/p><h3 class=\"wp-block-heading\">4. What is the Virtual DOM in React?<\/h3><p class=\"wp-block-paragraph\">The term <strong>Virtual DOM<\/strong> is commonly used to describe React&rsquo;s in-memory representation of user interface elements. React uses information from the previous and next renders to determine what needs to change in the browser&rsquo;s DOM.<\/p><p class=\"wp-block-paragraph\">React updates generally involve three stages:<\/p><ol class=\"wp-block-list\">\n<li><strong>Trigger:<\/strong> An initial render or a state update requests rendering work.<\/li>\n\n\n\n<li><strong>Render:<\/strong> React calls the relevant components to calculate the next UI.<\/li>\n\n\n\n<li><strong>Commit:<\/strong> React applies the necessary changes to the DOM.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">A component can render again without requiring an actual DOM change. React compares the resulting output and updates the DOM where necessary.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Do not claim that the Virtual DOM automatically makes every React application faster. Application performance also depends on component structure, rendering work, data handling and browser operations.<\/p><h3 class=\"wp-block-heading\">5. What is the difference between class and function components?<\/h3><p class=\"wp-block-paragraph\">Both class components and function components can be used to build React interfaces. The main differences are how they define components and work with state, effects and lifecycle behaviour.<\/p><figure class=\"wp-block-table\"><table><thead><tr><th>Feature<\/th><th>Class Component<\/th><th>Function Component<\/th><\/tr><\/thead><tbody><tr><td>Definition<\/td><td>JavaScript class extending React.Component<\/td><td>JavaScript function<\/td><\/tr><tr><td>State<\/td><td>Uses this.state and this.setState()<\/td><td>Uses Hooks such as useState or useReducer<\/td><\/tr><tr><td>Lifecycle and external synchronisation<\/td><td>Uses lifecycle methods<\/td><td>Uses Hooks such as useEffect when appropriate<\/td><\/tr><tr><td>Accessing props<\/td><td>Uses this.props<\/td><td>Receives props as function arguments<\/td><\/tr><tr><td>Hooks<\/td><td>Cannot use Hooks directly<\/td><td>Can use Hooks according to the Rules of Hooks<\/td><\/tr><tr><td>New development<\/td><td>Supported, but generally not preferred<\/td><td>Recommended approach<\/td><\/tr><\/tbody><\/table><\/figure><p class=\"wp-block-paragraph\"><strong>Which is faster?<\/strong> Neither component style is inherently faster in every situation. Performance depends on the work performed, state updates, component structure and the optimisations used.<\/p><p class=\"wp-block-paragraph\">For new React applications, function components are generally preferred because Hooks provide a way to reuse stateful logic without class-based patterns.<\/p><h2 id=\"intermediate\" class=\"wp-block-heading\">React Intermediate Interview Questions<\/h2><h3 class=\"wp-block-heading\">6. What is the difference between controlled and uncontrolled components in React?<\/h3><p class=\"wp-block-paragraph\">In React forms, the distinction between <strong>controlled and uncontrolled inputs<\/strong> concerns how their current values are managed.<\/p><ul class=\"wp-block-list\">\n<li><strong>Controlled input:<\/strong> React state determines the input&rsquo;s current value. An event handler updates that state when the user types.<\/li>\n\n\n\n<li><strong>Uncontrolled input:<\/strong> The DOM maintains the current value. React can access it through a ref when needed.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Example: Controlled input<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nfunction ControlledInput()  \n      onChange= \n    \/&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\"><strong>Example: Uncontrolled input<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nfunction UncontrolledInput()  \n\n  return (\n    &lt;form onSubmit= &gt;\n      &lt;input ref=  defaultValue=\"\" \/&gt;\n      &lt;button type=\"submit\"&gt;Submit&lt;\/button&gt;\n    &lt;\/form&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\"><strong>When to use each:<\/strong> Controlled inputs are useful when values need to be reflected in React state for validation or conditional UI. Uncontrolled inputs can be suitable when the value is only needed during form submission.<\/p><h3 class=\"wp-block-heading\">7. What are React keys, and why are they important?<\/h3><p class=\"wp-block-paragraph\"><strong>Keys<\/strong> help React identify elements within a list so it can preserve or reset component state correctly when items are added, removed or reordered.<\/p><p class=\"wp-block-paragraph\">Keys must be unique among siblings. Whenever possible, use a stable identifier from the underlying data rather than the array index.<\/p><p class=\"wp-block-paragraph\"><strong>Example:<\/strong><\/p><pre class=\"wp-block-code\"><code>const employees = [\n   ,\n   ,\n   \n];\n\nfunction EmployeeList()  &gt; &lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\"><strong>Why not always use array indexes?<\/strong> If list items can be inserted, deleted or reordered, index-based keys may cause React to associate component state with the wrong item.<\/p><p class=\"wp-block-paragraph\">Array indexes may be acceptable for lists whose order and membership remain fixed, but stable data identifiers are generally safer.<\/p><h3 class=\"wp-block-heading\">8. What is the useEffect Hook, and how does it work?<\/h3><p class=\"wp-block-paragraph\">The <code>useEffect<\/code> Hook lets a React component synchronise with an external system, such as a browser event listener, network connection or third-party library.<\/p><p class=\"wp-block-paragraph\">An effect can run after the component is committed. React reruns it when specified dependencies change and performs any previous cleanup before applying the new effect.<\/p><p class=\"wp-block-paragraph\"><strong>Example: Listening for browser resize events<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nfunction WindowWidth()  \n\n    handleResize();\n\n    window.addEventListener('resize', handleResize);\n\n    return () =&gt;  ;\n  }, []);\n\n  return &lt;p&gt;Window width:  px&lt;\/p&gt;;\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">The effect registers a resize listener and removes it during cleanup. The empty dependency array indicates that the effect does not depend on changing reactive values.<\/p><p class=\"wp-block-paragraph\"><strong>Important:<\/strong> In development Strict Mode, React may run an additional setup and cleanup cycle to help identify missing cleanup logic. Therefore, an empty dependency array should not be described as an unconditional guarantee that effect setup executes exactly once.<\/p><p class=\"wp-block-paragraph\"><strong>Common mistake:<\/strong> Using an effect to calculate values that can be derived directly from props or state. If no external synchronisation is required, an effect may be unnecessary.<\/p><h3 class=\"wp-block-heading\">9. What is prop drilling in React, and how can you avoid it?<\/h3><p class=\"wp-block-paragraph\"><strong>Prop drilling<\/strong> occurs when data is passed through several intermediate components solely to reach a deeply nested component.<\/p><p class=\"wp-block-paragraph\">Passing props is a normal part of React development. It becomes inconvenient when intermediate components repeatedly forward information they do not otherwise need.<\/p><p class=\"wp-block-paragraph\">Depending on the application, developers can consider:<\/p><ul class=\"wp-block-list\">\n<li><strong>Component composition:<\/strong> Restructure components or pass child elements to reduce unnecessary intermediate prop forwarding.<\/li>\n\n\n\n<li><strong>Context:<\/strong> Share information such as theme settings or authenticated-user data with deeply nested components.<\/li>\n\n\n\n<li><strong>Local state:<\/strong> Keep state close to the components that use it rather than moving all application state to the top level.<\/li>\n\n\n\n<li><strong>External state management:<\/strong> Use tools such as Redux or Zustand when shared state requirements justify additional infrastructure.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Context can reduce prop drilling, but it is not automatically the best solution for all application state. Explain how frequently the value changes, which components need it and whether simpler composition would solve the problem.<\/p><h3 class=\"wp-block-heading\">10. What is a React Fragment, and why is it used?<\/h3><p class=\"wp-block-paragraph\">A <strong>React Fragment<\/strong> groups multiple React elements without creating an additional HTML element in the rendered DOM.<\/p><p class=\"wp-block-paragraph\">Fragments are useful when a component needs to return several sibling elements but an extra wrapper such as a div would be unnecessary or affect the intended HTML structure.<\/p><p class=\"wp-block-paragraph\"><strong>Example:<\/strong><\/p><pre class=\"wp-block-code\"><code>function Profile()  \n<\/code><\/pre><p class=\"wp-block-paragraph\">The shorthand syntax <code>&lt;&gt;...&lt;\/&gt;<\/code> does not create an extra DOM node. When a Fragment needs an explicit key, developers can use the full <code>Fragment<\/code> syntax imported from React.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Fragments help maintain appropriate DOM structure, but their use does not guarantee a measurable performance improvement.<\/p><h2 id=\"experienced\" class=\"wp-block-heading\">React JS Interview Questions for Experienced Developers<\/h2><p class=\"wp-block-paragraph\"><strong>Official reference:<\/strong> For further examples and explanations of components, JSX, rendering, state and effects, refer to the <a href=\"https:\/\/react.dev\/learn\" target=\"_blank\" rel=\"noopener noreferrer\">React documentation<\/a>.<\/p><h2 id=\"experienced\" class=\"wp-block-heading\">React JS Interview Questions for Experienced Developers<\/h2><h3 class=\"wp-block-heading\">11. How does React&rsquo;s reconciliation process work?<\/h3><p class=\"wp-block-paragraph\"><strong>Reconciliation<\/strong> is the process React uses to determine how an updated component tree relates to the previous one. React calculates the next UI during rendering and applies the necessary changes during the commit phase.<\/p><p class=\"wp-block-paragraph\">Two important factors are element types and keys:<\/p><ul class=\"wp-block-list\">\n<li><strong>Component and element types:<\/strong> Changing the type of an element at a particular position can cause React to replace the previous subtree and reset its state.<\/li>\n\n\n\n<li><strong>Keys:<\/strong> Stable keys help React identify elements among siblings, particularly when list items are inserted, removed or reordered.<\/li>\n\n\n\n<li><strong>Component identity:<\/strong> React preserves state when the same component remains at the corresponding position in the render tree, subject to its key.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Example:<\/strong> Consider a list of editable tasks. If tasks are reordered using their array indexes as keys, React may associate an input&rsquo;s state with a different task. Using stable task IDs helps React preserve the correct component identity.<\/p><p class=\"wp-block-paragraph\">Reconciliation does not mean that every component render changes the browser DOM. React may calculate an updated UI without needing to commit a DOM change.<\/p><h3 class=\"wp-block-heading\">12. What are effective performance optimisation techniques in React?<\/h3><p class=\"wp-block-paragraph\">React performance optimisation should begin by identifying a measurable problem. Unnecessary rendering work, expensive calculations, large JavaScript bundles and oversized DOM trees can affect responsiveness.<\/p><p class=\"wp-block-paragraph\">Common optimisation techniques include:<\/p><ul class=\"wp-block-list\">\n<li><strong>Performance profiling:<\/strong> Use React Developer Tools and browser profiling tools to identify slow interactions and expensive rendering work.<\/li>\n\n\n\n<li><strong>Component memoisation:<\/strong> Consider React.memo when a component frequently receives unchanged props and rendering is expensive.<\/li>\n\n\n\n<li><strong>Memoised calculations:<\/strong> Use useMemo to cache expensive calculations when their dependencies have not changed.<\/li>\n\n\n\n<li><strong>Stable callback references:<\/strong> Use useCallback when function identity matters, such as when passing callbacks to memoised components.<\/li>\n\n\n\n<li><strong>Code splitting:<\/strong> Load parts of an application on demand instead of shipping all JavaScript in the initial bundle.<\/li>\n\n\n\n<li><strong>List virtualisation:<\/strong> Render only the necessary portion of a large list to reduce DOM size and rendering work.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Example: Memoising an expensive calculation<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nfunction SearchResults( )  , [products, query]);\n\n  return (\n    &lt;ul&gt;\n       &gt; &lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">In this example, useMemo allows React to reuse the filtered result when the products and query dependencies remain unchanged. For small lists, however, memoisation may provide no meaningful performance benefit.<\/p><p class=\"wp-block-paragraph\"><strong>Modern React consideration:<\/strong> React Compiler can automatically memoise many components and values when configured. Developers should profile their applications and avoid adding manual memoisation indiscriminately.<\/p><h3 class=\"wp-block-heading\">13. What is the difference between React Context and Redux?<\/h3><p class=\"wp-block-paragraph\"><strong>React Context<\/strong> and <strong>Redux<\/strong> can both help components access shared application information, but they solve different parts of the state-management problem.<\/p><p class=\"wp-block-paragraph\">Context provides a way to pass information through a component tree without explicitly forwarding props at every level. Redux is a state-management library built around a store, actions and reducers.<\/p><figure class=\"wp-block-table\"><table><thead><tr><th>Feature<\/th><th>React Context<\/th><th>Redux<\/th><\/tr><\/thead><tbody><tr><td>Primary purpose<\/td><td>Make values available to descendant components<\/td><td>Manage shared application state through a predictable store<\/td><\/tr><tr><td>State handling<\/td><td>Typically combined with useState or useReducer<\/td><td>Uses reducers, actions and a central store<\/td><\/tr><tr><td>Additional dependency<\/td><td>Built into React<\/td><td>Requires Redux-related packages<\/td><\/tr><tr><td>Debugging<\/td><td>Uses React debugging tools<\/td><td>Can use Redux DevTools for inspecting state changes<\/td><\/tr><tr><td>Common use cases<\/td><td>Theme, locale and shared values<\/td><td>Complex shared state and coordinated application updates<\/td><\/tr><\/tbody><\/table><\/figure><p class=\"wp-block-paragraph\"><strong>When should you choose Redux?<\/strong> Redux may be useful when application state is shared across many features, transitions are complex or the team benefits from centralised update logic and dedicated debugging tools.<\/p><p class=\"wp-block-paragraph\">Context combined with useReducer may be sufficient for other applications. The decision should depend on state complexity, update patterns and maintenance requirements rather than application size alone.<\/p><h3 class=\"wp-block-heading\">14. What are error boundaries in React, and how do they work?<\/h3><p class=\"wp-block-paragraph\"><strong>Error boundaries<\/strong> are React components that display fallback UI when a descendant component throws an error during rendering. They help prevent an error in one part of the interface from disrupting the entire application.<\/p><p class=\"wp-block-paragraph\">React supports error boundaries through class component APIs such as static getDerivedStateFromError and componentDidCatch.<\/p><p class=\"wp-block-paragraph\"><strong>Example:<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nclass ErrorBoundary extends Component  ;\n  }\n\n  static getDerivedStateFromError(error)  ;\n  }\n\n  componentDidCatch(error, info)  \n\n  render()  \n\n    return this.props.children;\n  }\n}\n\n\/\/ Usage\n&lt;ErrorBoundary&gt;\n  &lt;Dashboard \/&gt;\n&lt;\/ErrorBoundary&gt;\n<\/code><\/pre><p class=\"wp-block-paragraph\"><strong>What error boundaries do not catch:<\/strong> They do not catch ordinary event-handler errors, most asynchronous callback errors or errors thrown inside the boundary component itself.<\/p><p class=\"wp-block-paragraph\">Event handlers and asynchronous operations should use appropriate error-handling strategies. Developers can also use an error-boundary library for additional functionality.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Although function components are recommended for most new React code, React&rsquo;s built-in error-boundary implementation still relies on class component APIs.<\/p><h3 class=\"wp-block-heading\">15. What are custom Hooks in React, and when should you create one?<\/h3><p class=\"wp-block-paragraph\"><strong>Custom Hooks<\/strong> are JavaScript functions whose names begin with use and that can call other React Hooks. They let developers extract reusable stateful logic from components.<\/p><p class=\"wp-block-paragraph\">Custom Hooks share behaviour, not a single shared state instance. Each component calling the Hook normally receives its own state unless the Hook explicitly connects to shared state or an external store.<\/p><p class=\"wp-block-paragraph\"><strong>Example: A reusable window-width Hook<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nfunction subscribe(callback)  ;\n}\n\nfunction getSnapshot()  \n\nfunction getServerSnapshot()  \n\nfunction useWindowWidth()  \n\nfunction WindowWidthDisplay()  px&lt;\/p&gt;;\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">This Hook provides a reusable way to subscribe to the browser window&rsquo;s width. The server snapshot supplies an initial value when server rendering is involved; the displayed value may update after hydration.<\/p><p class=\"wp-block-paragraph\"><strong>When to create a custom Hook:<\/strong> Extract logic when several components need the same stateful behaviour or when doing so makes a component easier to understand. Avoid creating custom Hooks for trivial operations that do not benefit from abstraction.<\/p><h2 id=\"functional\" class=\"wp-block-heading\">React Functional Components and Hooks Interview Questions<\/h2><h3 class=\"wp-block-heading\">16. What are functional components in React, and why are they preferred?<\/h3><p class=\"wp-block-paragraph\"><strong>Function components<\/strong> are JavaScript functions that receive props and return React elements. They are the recommended approach for defining most new React components.<\/p><p class=\"wp-block-paragraph\">Function components can use React Hooks for state, context, refs and synchronisation with external systems. Unlike class components, they do not require a constructor or the this keyword to access props and state.<\/p><p class=\"wp-block-paragraph\"><strong>Example:<\/strong><\/p><pre class=\"wp-block-code\"><code>function Welcome( )  !&lt;\/h2&gt;;\n}\n\nexport default function App()  \n<\/code><\/pre><p class=\"wp-block-paragraph\"><strong>Why are function components preferred?<\/strong> They work naturally with Hooks, support reusable stateful logic and avoid class-specific patterns. However, class components remain supported, and converting an existing class component does not automatically make an application faster.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Hooks do not provide a direct one-to-one replacement for every class lifecycle method. It is better to understand when state, event handlers, Effects and other React APIs are appropriate.<\/p><h3 class=\"wp-block-heading\">17. How does useState work in functional components?<\/h3><p class=\"wp-block-paragraph\">The <code>useState<\/code> Hook allows a function component to remember information between renders. It returns the current state value and a setter function that requests a state update.<\/p><p class=\"wp-block-paragraph\"><strong>Example: Counter component<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nfunction Counter()  \n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;Count:  &lt;\/p&gt;\n      &lt;button onClick= &gt;\n        Increment\n      &lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">Calling setCount requests another render with the updated state. It does not immediately change the count variable in the event handler that is already running.<\/p><p class=\"wp-block-paragraph\"><strong>Why use the functional updater?<\/strong> If the next state depends on the previous state, an updater function helps React process queued updates correctly.<\/p><p class=\"wp-block-paragraph\">For example, calling setCount(count + 1) three times inside the same event handler does not necessarily increment the value by three. Calling setCount(previous =&gt; previous + 1) three times queues three updates based on the preceding result.<\/p><p class=\"wp-block-paragraph\"><strong>Common mistake:<\/strong> Mutating objects or arrays held in state directly. Instead, create an updated object or array and pass it to the setter.<\/p><h3 class=\"wp-block-heading\">18. How does useEffect differ from class lifecycle methods?<\/h3><p class=\"wp-block-paragraph\">The <code>useEffect<\/code> Hook lets function components synchronise with external systems after React commits an update. It is not simply a replacement for componentDidMount, componentDidUpdate and componentWillUnmount.<\/p><p class=\"wp-block-paragraph\">An Effect is defined by the external process it synchronises with. Depending on its dependencies, React may run its setup again and clean up the previous synchronisation.<\/p><p class=\"wp-block-paragraph\"><strong>Example: Starting and clearing an interval<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nfunction Timer()  , 1000);\n\n    return () =&gt;  ;\n  }, []);\n\n  return &lt;p&gt;Seconds:  &lt;\/p&gt;;\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">In this example, the Effect creates an interval and returns a cleanup function that clears it. The functional state updater allows the interval callback to use the latest queued state without depending on the seconds variable.<\/p><p class=\"wp-block-paragraph\"><strong>Dependency behaviour:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>No dependency array:<\/strong> The Effect runs after every committed render.<\/li>\n\n\n\n<li><strong>Empty dependency array:<\/strong> The Effect does not depend on changing reactive values; development Strict Mode may run an additional setup and cleanup cycle.<\/li>\n\n\n\n<li><strong>Specified dependencies:<\/strong> React reruns the Effect when one or more dependencies change, using Object.is comparisons.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Do not use Effects for calculations that can be performed directly while rendering. Effects are primarily intended for synchronisation outside React.<\/p><h3 class=\"wp-block-heading\">19. What is useMemo, and when should you use it?<\/h3><p class=\"wp-block-paragraph\">The <code>useMemo<\/code> Hook caches the result of a calculation between renders while its dependencies remain unchanged.<\/p><p class=\"wp-block-paragraph\">It can be useful when an expensive calculation is repeatedly performed with the same inputs.<\/p><p class=\"wp-block-paragraph\"><strong>Example:<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nfunction ProductList( )  , [products, category]);\n\n  return (\n    &lt;ul&gt;\n       &gt; &lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">React can reuse visibleProducts when the products and category dependencies have not changed. If either dependency changes, React recalculates the filtered result.<\/p><p class=\"wp-block-paragraph\"><strong>When not to use it:<\/strong> Avoid memoising inexpensive calculations without evidence of a performance problem. Memoisation adds complexity and is not required for every derived value.<\/p><p class=\"wp-block-paragraph\"><strong>Modern React consideration:<\/strong> React Compiler can automatically memoise many calculations when enabled. Manual useMemo remains available where explicit optimisation is useful.<\/p><h3 class=\"wp-block-heading\">20. What is the difference between useCallback and useMemo?<\/h3><p class=\"wp-block-paragraph\">Both <code>useCallback<\/code> and <code>useMemo<\/code> support memoisation, but they cache different things:<\/p><ul class=\"wp-block-list\">\n<li><strong>useMemo:<\/strong> Caches the result of a calculation.<\/li>\n\n\n\n<li><strong>useCallback:<\/strong> Caches a function reference between renders while its dependencies remain unchanged.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Example:<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nfunction ProductPage( )  , [products, category]);\n\n  const handleSelect = useCallback((productId) =&gt;  , [onSelect]);\n\n  return (\n    &lt;ul&gt;\n       &gt;\n          &lt;button\n            onClick= \n          &gt;\n             \n          &lt;\/button&gt;\n        &lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">Here, useMemo caches the filtered products, while useCallback preserves the handleSelect function reference when onSelect remains unchanged.<\/p><p class=\"wp-block-paragraph\"><strong>When is useCallback useful?<\/strong> It can help when a function is passed to a memoised child component or used as a dependency of another Hook. However, caching a function does not automatically prevent the parent component from rendering, and it does not guarantee a performance improvement.<\/p><p class=\"wp-block-paragraph\">When React Compiler is enabled, much of this memoisation may be handled automatically. Developers should consider component behaviour and measured performance before adding manual optimisation.<\/p><h2 id=\"performance\" class=\"wp-block-heading\">React Performance Optimisation Interview Questions<\/h2><p class=\"wp-block-paragraph\"><strong>Official reference:<\/strong> Explore the <a href=\"https:\/\/react.dev\/reference\/react\" target=\"_blank\" rel=\"noopener noreferrer\">React API documentation<\/a> for detailed information about Hooks, components, memoisation and error handling.<\/p><h2 id=\"performance\" class=\"wp-block-heading\">React Performance Optimisation Interview Questions<\/h2><h3 class=\"wp-block-heading\">21. What causes unnecessary re-renders in React, and how can you prevent them?<\/h3><p class=\"wp-block-paragraph\">A React component may render again when its state changes, its parent renders or a context value it consumes changes. Re-rendering is a normal part of React&rsquo;s update process and does not necessarily mean that the browser DOM will change.<\/p><p class=\"wp-block-paragraph\"><strong>When do re-renders become a problem?<\/strong> They can affect responsiveness when a component performs expensive calculations, repeatedly renders large component trees or contributes to slow interactions.<\/p><p class=\"wp-block-paragraph\">Common situations worth investigating include:<\/p><ul class=\"wp-block-list\">\n<li><strong>State placed too high in the component tree:<\/strong> Updating local information may cause a larger part of the interface to render than necessary.<\/li>\n\n\n\n<li><strong>Frequently changing Context values:<\/strong> Components consuming the affected Context may render again when its value changes.<\/li>\n\n\n\n<li><strong>Unstable object or function props:<\/strong> Newly created references can prevent memoisation from being effective.<\/li>\n\n\n\n<li><strong>Effects triggering repeated state updates:<\/strong> Unnecessary synchronisation or incorrect dependencies can cause repeated rendering work.<\/li>\n\n\n\n<li><strong>Expensive calculations during rendering:<\/strong> Filtering or transforming large datasets can slow down an interaction.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>How to improve rendering performance:<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Use React Developer Tools Profiler to identify slow components.<\/li>\n\n\n\n<li>Keep transient state close to the components that use it.<\/li>\n\n\n\n<li>Remove unnecessary Effects and repeated state updates.<\/li>\n\n\n\n<li>Consider React.memo for components that repeatedly render with unchanged props.<\/li>\n\n\n\n<li>Use useMemo or useCallback selectively when their benefits are measurable.<\/li>\n\n\n\n<li>Virtualise large lists when rendering too many elements affects performance.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Creating a new function during rendering is not automatically a performance defect. Optimise when profiling shows a meaningful problem rather than adding memoisation everywhere.<\/p><h3 class=\"wp-block-heading\">22. What is React.memo, and when should you use it?<\/h3><p class=\"wp-block-paragraph\"><code>React.memo<\/code> is a React API that can skip re-rendering a component when its props have not changed. By default, React compares each prop using Object.is.<\/p><p class=\"wp-block-paragraph\"><strong>Example:<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nconst Greeting = memo(function Greeting( )  !&lt;\/h3&gt;;\n});\n\nexport default function Profile()  &gt;\n        Count:  \n      &lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">In this example, updating count causes Profile to render again. Greeting can generally skip rendering because its name prop remains unchanged.<\/p><p class=\"wp-block-paragraph\"><strong>Important limitations:<\/strong><\/p><ul class=\"wp-block-list\">\n<li>A memoised component can still render when its own state changes.<\/li>\n\n\n\n<li>It can also render when a Context value it consumes changes.<\/li>\n\n\n\n<li>New object or function references may cause prop comparisons to detect changes.<\/li>\n\n\n\n<li>Memoisation is an optimisation, not a guarantee that rendering will never occur.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>When should you use it?<\/strong> Consider React.memo when profiling shows that a component repeatedly performs expensive rendering work despite receiving unchanged props.<\/p><p class=\"wp-block-paragraph\"><strong>Modern React consideration:<\/strong> React Compiler can automatically memoise many components when enabled. Manual memoisation remains useful in some situations, but it should not be added without considering the application&rsquo;s configuration and measured performance.<\/p><h3 class=\"wp-block-heading\">23. What is code splitting in React, and why is it useful?<\/h3><p class=\"wp-block-paragraph\"><strong>Code splitting<\/strong> divides an application&rsquo;s JavaScript into smaller chunks that can be loaded when needed. This can reduce the amount of code downloaded and processed during initial page loading.<\/p><p class=\"wp-block-paragraph\">React provides the lazy API for deferring the loading of component code. It is commonly used with Suspense, which displays fallback content while a component is waiting to load.<\/p><p class=\"wp-block-paragraph\"><strong>Example: Loading a dashboard when required<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nconst Dashboard = lazy(() =&gt; import('.\/Dashboard'));\n\nexport default function App()  \n      &gt;\n        Open Dashboard\n      &lt;\/button&gt;\n\n       &gt;\n          &lt;Dashboard \/&gt;\n        &lt;\/Suspense&gt;\n      )}\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">Dashboard is declared outside App and is loaded when React first attempts to render it. React caches the resolved lazy component, while the bundler or framework handles creation and delivery of the JavaScript chunks.<\/p><p class=\"wp-block-paragraph\"><strong>When is code splitting useful?<\/strong> Common examples include large dashboards, route-specific features, administrative screens and infrequently used components.<\/p><p class=\"wp-block-paragraph\">Excessive code splitting can introduce additional network requests and loading states. Developers should evaluate bundle sizes, caching and the effect on actual user interactions.<\/p><h3 class=\"wp-block-heading\">24. How does list virtualisation improve performance in React?<\/h3><p class=\"wp-block-paragraph\"><strong>List virtualisation<\/strong>, also called windowing, reduces rendering work by displaying only the portion of a large list needed for the current scroll position, usually with some additional rows for smoother scrolling.<\/p><p class=\"wp-block-paragraph\">Instead of rendering thousands of DOM elements simultaneously, a virtualised list manages a smaller collection of rendered rows. This can improve responsiveness in data-heavy interfaces.<\/p><p class=\"wp-block-paragraph\"><strong>Example using react-window v2:<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react-window';\n\nfunction ItemRow( )  &gt;\n       \n    &lt;\/div&gt;\n  );\n}\n\nexport default function ProductList( )  \n      rowCount= \n      rowHeight= \n      rowProps= }\n      style= }\n    \/&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">This example uses the react-window v2 List API. The rowComponent receives the row index and positioning style, while rowProps passes additional data to each row.<\/p><p class=\"wp-block-paragraph\"><strong>Version note:<\/strong> Older react-window v1 tutorials use FixedSizeList, itemCount and itemSize. These APIs should not be mixed with the v2 List interface.<\/p><p class=\"wp-block-paragraph\"><strong>When to use virtualisation:<\/strong> Consider it when large scrollable lists create measurable rendering or DOM-performance problems. Small lists generally do not need it.<\/p><p class=\"wp-block-paragraph\">Developers should also test keyboard navigation, focus management, row identity and screen-reader behaviour because virtualised rows may be mounted and unmounted as the user scrolls.<\/p><h3 class=\"wp-block-heading\">25. What is the difference between debouncing and throttling in React?<\/h3><p class=\"wp-block-paragraph\"><strong>Debouncing<\/strong> and <strong>throttling<\/strong> are techniques for controlling how frequently a function executes when events occur repeatedly.<\/p><ul class=\"wp-block-list\">\n<li><strong>Debouncing:<\/strong> Delays a function until a specified period has passed without another triggering event. It is commonly used for search suggestions or input validation.<\/li>\n\n\n\n<li><strong>Throttling:<\/strong> Limits how often a function can execute within a given time interval. It can be useful for scroll, resize or pointer-movement handling.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Example: Debouncing a search query<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nfunction SearchInput()  , 400);\n\n    return () =&gt; clearTimeout(timerId);\n  }, [query]);\n\n  return (\n    &lt;div&gt;\n      &lt;input\n        value= \n        onChange= \n        aria-label=\"Search\"\n      \/&gt;\n      &lt;p&gt;Search term:  &lt;\/p&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">Whenever query changes, React clears the previous timeout and starts a new one. The debounced value updates only after the user stops typing for approximately 400 milliseconds.<\/p><p class=\"wp-block-paragraph\"><strong>Throttling example:<\/strong> A scroll listener may be configured to update a non-critical visual indicator at most once during a specified interval rather than responding to every event. Browser rendering work can also be coordinated with requestAnimationFrame where appropriate.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Debouncing an input does not automatically prevent outdated API responses from appearing. For asynchronous search requests, developers should also consider request cancellation, response ordering and error handling.<\/p><h2 id=\"architecture\" class=\"wp-block-heading\">Architecture and Scenario-Based React Interview Questions<\/h2><h3 class=\"wp-block-heading\">26. How should you structure a scalable React project?<\/h3><p class=\"wp-block-paragraph\">A scalable React project should organise components, business logic, data access and shared utilities so that developers can understand and modify features without introducing unnecessary dependencies.<\/p><p class=\"wp-block-paragraph\">There is no single folder structure suitable for every React application. Smaller projects may use a simple components-and-pages structure, while larger applications may benefit from organising code around features or business domains.<\/p><p class=\"wp-block-paragraph\"><strong>Example: Feature-oriented folder structure<\/strong><\/p><pre class=\"wp-block-code\"><code>src\/\n  app\/\n    App.jsx\n    routes.jsx\n  features\/\n    authentication\/\n      components\/\n      hooks\/\n      api\/\n    dashboard\/\n      components\/\n      hooks\/\n      api\/\n  shared\/\n    components\/\n    hooks\/\n    utils\/\n  styles\/\n<\/code><\/pre><p class=\"wp-block-paragraph\">In this example, feature-specific files remain close together, while reusable components and utilities are grouped separately.<\/p><p class=\"wp-block-paragraph\"><strong>Key architectural considerations:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Component responsibility:<\/strong> Keep components focused on clearly defined UI behaviour.<\/li>\n\n\n\n<li><strong>State ownership:<\/strong> Keep state close to where it is used and introduce shared state only when necessary.<\/li>\n\n\n\n<li><strong>Data access:<\/strong> Separate network requests and data transformation logic from unrelated presentation code.<\/li>\n\n\n\n<li><strong>Reusable components:<\/strong> Maintain common UI elements without creating unnecessary abstractions.<\/li>\n\n\n\n<li><strong>Testing:<\/strong> Organise tests so that important user interactions and feature behaviour can be validated.<\/li>\n\n\n\n<li><strong>Dependencies:<\/strong> Avoid circular imports and excessive coupling between unrelated features.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Explain why a structure fits the application&rsquo;s team size, domain complexity and expected changes. A feature-oriented structure is an architectural option, not a universal requirement.<\/p><h3 class=\"wp-block-heading\">27. How would you identify and fix performance problems in a large React application?<\/h3><p class=\"wp-block-paragraph\">Performance troubleshooting should begin with measurement rather than immediately adding React.memo, useMemo or other optimisations.<\/p><p class=\"wp-block-paragraph\"><strong>Step-by-step approach:<\/strong><\/p><ol class=\"wp-block-list\">\n<li><strong>Reproduce the issue:<\/strong> Identify the slow interaction, affected route, device and conditions under which the problem occurs.<\/li>\n\n\n\n<li><strong>Measure rendering:<\/strong> Use React Developer Tools Profiler to inspect component render durations and commits.<\/li>\n\n\n\n<li><strong>Inspect browser performance:<\/strong> Use browser development tools to investigate JavaScript execution, layout, painting and network activity.<\/li>\n\n\n\n<li><strong>Locate the bottleneck:<\/strong> Determine whether the problem involves repeated renders, expensive calculations, excessive DOM nodes, large bundles or slow network requests.<\/li>\n\n\n\n<li><strong>Apply a targeted fix:<\/strong> Consider localising state, removing unnecessary Effects, memoising costly work, virtualising lists or splitting large bundles.<\/li>\n\n\n\n<li><strong>Measure again:<\/strong> Compare the same interaction before and after the change and check that behaviour remains correct.<\/li>\n<\/ol><p class=\"wp-block-paragraph\"><strong>Example using React Profiler:<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\nimport Dashboard from '.\/Dashboard';\n\nfunction onRender(\n  id,\n  phase,\n  actualDuration,\n  baseDuration,\n  startTime,\n  commitTime\n)  );\n}\n\nexport default function App()  &gt;\n      &lt;Dashboard \/&gt;\n    &lt;\/Profiler&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">The Profiler reports rendering measurements, including actualDuration and baseDuration. These values can help identify expensive parts of the component tree and evaluate optimisation results.<\/p><p class=\"wp-block-paragraph\"><strong>Important:<\/strong> Development measurements may include overhead that does not reflect production behaviour. React profiling should be combined with appropriate browser measurements and realistic testing conditions.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Describe the original problem, the evidence collected, the optimisation selected and the measured outcome. Avoid claiming a performance improvement without supporting measurements.<\/p><h3 class=\"wp-block-heading\">28. How do you manage shared state across React micro-frontends?<\/h3><p class=\"wp-block-paragraph\">Micro-frontends divide a larger frontend application into separately developed modules or applications. Sharing state across them requires clear ownership, communication contracts and careful coordination.<\/p><p class=\"wp-block-paragraph\"><strong>Common approaches include:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Shared application shell:<\/strong> A parent application can own common state, such as selected account information, and provide it through agreed interfaces.<\/li>\n\n\n\n<li><strong>Event-based communication:<\/strong> Micro-frontends can exchange defined events without directly depending on each other&rsquo;s internal component state.<\/li>\n\n\n\n<li><strong>Shared state library:<\/strong> Applications running within a compatible JavaScript environment may use an agreed external store, provided ownership and dependencies are carefully managed.<\/li>\n\n\n\n<li><strong>URL-based state:<\/strong> Route parameters and query strings can represent navigation state that needs to be shareable or bookmarkable.<\/li>\n\n\n\n<li><strong>Backend-managed state:<\/strong> Server APIs can provide authoritative information that multiple frontend modules need to access.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Architecture considerations:<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Define which micro-frontend owns each piece of state.<\/li>\n\n\n\n<li>Document event names, payloads and versioning expectations.<\/li>\n\n\n\n<li>Avoid exposing sensitive information through shared browser globals or URLs.<\/li>\n\n\n\n<li>Use appropriate authentication and authorisation checks for server requests.<\/li>\n\n\n\n<li>Minimise dependencies that force independently deployed modules to change together.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Browser storage such as localStorage may be suitable for certain non-sensitive persistence needs, but it does not provide automatic reactive synchronisation or secure authorisation between micro-frontends.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> There is no universally correct shared-state solution. Explain the communication boundaries, deployment model, security requirements and consistency needs before selecting an approach.<\/p><h3 class=\"wp-block-heading\">29. How do you build a React application that supports SEO?<\/h3><p class=\"wp-block-paragraph\">Search engine optimisation for React applications depends on whether important content, links and metadata can be discovered and rendered reliably by search engines.<\/p><p class=\"wp-block-paragraph\">React can be used with client-side rendering, server-side rendering or static HTML generation. The appropriate approach depends on the application&rsquo;s content and performance requirements.<\/p><p class=\"wp-block-paragraph\"><strong>Important considerations include:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Rendering strategy:<\/strong> Server-side or static rendering can make important page content available in the initial HTML response.<\/li>\n\n\n\n<li><strong>Metadata:<\/strong> Provide unique, descriptive page titles and appropriate meta descriptions.<\/li>\n\n\n\n<li><strong>Links:<\/strong> Use crawlable anchor elements with meaningful href values for important navigation.<\/li>\n\n\n\n<li><strong>Canonical URLs:<\/strong> Ensure canonical signals are consistent and point to the intended page URL.<\/li>\n\n\n\n<li><strong>HTTP status codes:<\/strong> Return meaningful status codes for missing, redirected or unavailable pages.<\/li>\n\n\n\n<li><strong>Structured data:<\/strong> Use valid structured data only when it accurately represents the visible page content.<\/li>\n\n\n\n<li><strong>Rendered-content verification:<\/strong> Confirm that important text and links are present in the HTML seen by search engines.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Can Google index client-rendered React applications?<\/strong> Yes. Google can execute JavaScript and index rendered content. However, JavaScript processing introduces additional dependencies and may create discoverability problems when important resources or content cannot be rendered correctly.<\/p><p class=\"wp-block-paragraph\">Frameworks such as Next.js support server-side and static rendering workflows. Developers should select a strategy based on the content, hosting environment, user experience and search requirements rather than assuming that every React application must use SSR.<\/p><p class=\"wp-block-paragraph\"><strong>How should developers verify SEO?<\/strong> Test the application&rsquo;s initial HTML, rendered page, metadata, internal links and HTTP responses. Google&rsquo;s URL Inspection tool can help identify whether expected content appears in Google&rsquo;s rendered version.<\/p><p class=\"wp-block-paragraph\">For implementation guidance, consult the <a href=\"https:\/\/developers.google.com\/search\/docs\/crawling-indexing\/javascript\/javascript-seo-basics\" target=\"_blank\" rel=\"noopener noreferrer\">Google Search Central JavaScript SEO documentation<\/a>.<\/p><h3 class=\"wp-block-heading\">30. How would you implement secure role-based access control in a React application?<\/h3><p class=\"wp-block-paragraph\"><strong>Role-based access control (RBAC)<\/strong> restricts access to operations or resources according to assigned roles and permissions.<\/p><p class=\"wp-block-paragraph\">In a React application, role information may determine which navigation items or interface controls are displayed. However, frontend checks alone do not secure an application. Authorisation must be enforced by the backend or another trusted server-side layer.<\/p><p class=\"wp-block-paragraph\"><strong>Recommended implementation approach:<\/strong><\/p><ol class=\"wp-block-list\">\n<li><strong>Authenticate the user:<\/strong> Establish the user&rsquo;s identity through an appropriate authentication mechanism.<\/li>\n\n\n\n<li><strong>Define permissions:<\/strong> Specify which roles can perform which operations on protected resources.<\/li>\n\n\n\n<li><strong>Enforce backend authorisation:<\/strong> Verify the authenticated user&rsquo;s permissions whenever a protected resource or operation is requested.<\/li>\n\n\n\n<li><strong>Adjust the frontend:<\/strong> Hide or disable unavailable controls to improve the user experience.<\/li>\n\n\n\n<li><strong>Handle denied requests:<\/strong> Display appropriate feedback when the backend rejects an unauthorised operation.<\/li>\n\n\n\n<li><strong>Test access restrictions:<\/strong> Check that users cannot bypass permissions by directly requesting an API endpoint.<\/li>\n<\/ol><p class=\"wp-block-paragraph\"><strong>Example: Frontend permission-based display<\/strong><\/p><pre class=\"wp-block-code\"><code>function AdminPanelLink( )  \n\n  return &lt;a href=\"\/admin\/users\"&gt;Manage users&lt;\/a&gt;;\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">This component controls whether a navigation link appears. It does not prevent someone from requesting the underlying administrative API directly.<\/p><p class=\"wp-block-paragraph\"><strong>Example: Server-side authorisation logic<\/strong><\/p><pre class=\"wp-block-code\"><code>\/\/ Illustrative server-side pseudocode.\n\/\/ Assumes request.user was populated by trusted\n\/\/ authentication middleware.\n\nfunction manageUsers(request, response)  \n\n  if (!user.permissions.includes('users:manage'))  \n\n  \/\/ Additional resource-specific checks may apply.\n  return performAuthorisedOperation(\n    request,\n    response\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">The server checks the authenticated user&rsquo;s permissions before allowing the protected operation. In a real application, the backend must obtain identity and permissions from trusted authentication and authorisation mechanisms rather than accepting role values supplied by the browser.<\/p><p class=\"wp-block-paragraph\"><strong>Security principle:<\/strong> Frontend permission checks support usability. Backend authorisation protects data and operations. Both may be needed, but they serve different purposes.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> A strong RBAC answer should describe authentication, permission modelling, trusted enforcement, denied-request handling and testing. Hiding a button or redirecting a route is not sufficient protection.<\/p><p class=\"wp-block-paragraph\"><strong>Official references:<\/strong> For further technical guidance, consult the <a href=\"https:\/\/react.dev\/reference\/react\" target=\"_blank\" rel=\"noopener noreferrer\">React documentation<\/a>, the <a href=\"https:\/\/github.com\/bvaughn\/react-window\" target=\"_blank\" rel=\"noopener noreferrer\">react-window project documentation<\/a> and the <a href=\"https:\/\/cheatsheetseries.owasp.org\/cheatsheets\/Authorization_Cheat_Sheet.html\" target=\"_blank\" rel=\"noopener noreferrer\">OWASP Authorization Cheat Sheet<\/a>.<\/p><h2 id=\"behavioural\" class=\"wp-block-heading\">React Behavioural and HR Interview Questions<\/h2><p class=\"wp-block-paragraph\">Behavioural interview questions help employers understand how developers investigate problems, collaborate with teams, review code and make technical decisions. Candidates should use examples from projects they have actually worked on, explaining their responsibilities, decisions and results.<\/p><h3 class=\"wp-block-heading\">31. Tell us about a time you debugged a complex React issue in production.<\/h3><p class=\"wp-block-paragraph\">Interviewers use this question to assess your debugging process, technical judgement and ability to resolve problems under production conditions.<\/p><p class=\"wp-block-paragraph\"><strong>How to structure your answer:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Situation:<\/strong> Describe the affected feature, the observed problem and its impact on users.<\/li>\n\n\n\n<li><strong>Investigation:<\/strong> Explain how you reproduced the issue and examined browser logs, React Developer Tools, network requests or error-monitoring data.<\/li>\n\n\n\n<li><strong>Action:<\/strong> Describe the root cause, your contribution to the fix and how the change was tested.<\/li>\n\n\n\n<li><strong>Result:<\/strong> Explain what improved, using actual evidence where available, and identify measures taken to prevent recurrence.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Example scenario:<\/strong> A dashboard becomes unresponsive when displaying a large dataset. A candidate could describe using the React Profiler to identify expensive rendering, reducing unnecessary updates and introducing list virtualisation where appropriate.<\/p><p class=\"wp-block-paragraph\">The scenario is illustrative. In an interview, replace it with an incident you genuinely investigated rather than claiming work you did not perform.<\/p><h3 class=\"wp-block-heading\">32. How do you collaborate with designers, backend developers and QA teams?<\/h3><p class=\"wp-block-paragraph\">React developers often work across design, backend engineering and quality assurance. A strong answer should explain how you coordinate technical requirements, resolve disagreements and maintain shared understanding of the feature being built.<\/p><p class=\"wp-block-paragraph\"><strong>Points to address:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>With designers:<\/strong> Clarify interaction states, responsive layouts, accessibility requirements and reusable component behaviour.<\/li>\n\n\n\n<li><strong>With backend developers:<\/strong> Agree on API contracts, request and response formats, error handling and authentication requirements.<\/li>\n\n\n\n<li><strong>With QA engineers:<\/strong> Review acceptance criteria, edge cases, automated tests and browser compatibility.<\/li>\n\n\n\n<li><strong>During code reviews:<\/strong> Explain implementation decisions and respond constructively to feedback.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Use a specific example in which collaboration changed an implementation decision, prevented a defect or improved the final user experience. Explain your contribution rather than describing teamwork only in general terms.<\/p><h3 class=\"wp-block-heading\">33. What would you do if a teammate repeatedly introduced React UI regressions?<\/h3><p class=\"wp-block-paragraph\">This question evaluates how you balance code quality, team relationships and delivery responsibilities.<\/p><p class=\"wp-block-paragraph\">Start by examining the failures rather than assuming the developer is careless. Regressions may result from missing tests, unclear requirements, unfamiliar components or insufficient code review.<\/p><p class=\"wp-block-paragraph\"><strong>A practical approach would include:<\/strong><\/p><ol class=\"wp-block-list\">\n<li>Review the recurring failures and identify common causes.<\/li>\n\n\n\n<li>Discuss the issue privately and constructively with the teammate.<\/li>\n\n\n\n<li>Check whether component contracts, acceptance criteria and existing tests are clear.<\/li>\n\n\n\n<li>Introduce relevant regression tests, code review checks or pair-programming sessions.<\/li>\n\n\n\n<li>Use CI checks and appropriate branch protections to reduce the chance of repeated failures reaching production.<\/li>\n\n\n\n<li>Review whether the changes have improved reliability.<\/li>\n<\/ol><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Demonstrate that you address systemic engineering problems without blaming individuals. Also explain when recurring production risk should be escalated to the engineering lead.<\/p><h3 class=\"wp-block-heading\">34. Describe a project where you created reusable React components.<\/h3><p class=\"wp-block-paragraph\">Interviewers ask this question to understand your component architecture, API design and experience maintaining consistent user interfaces.<\/p><p class=\"wp-block-paragraph\">A useful example might involve creating a reusable Button, Modal, FormField or Table component for an application or design system.<\/p><p class=\"wp-block-paragraph\"><strong>Explain the following:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Problem:<\/strong> What duplication, inconsistent behaviour or maintenance issue existed?<\/li>\n\n\n\n<li><strong>Component API:<\/strong> How did props, children and event callbacks support different use cases?<\/li>\n\n\n\n<li><strong>Accessibility:<\/strong> How were keyboard interaction, focus behaviour and semantic HTML addressed?<\/li>\n\n\n\n<li><strong>Testing:<\/strong> What component behaviours and user interactions were tested?<\/li>\n\n\n\n<li><strong>Maintenance:<\/strong> How did documentation or usage examples help other developers adopt the component?<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Avoid claiming that a component is reusable merely because it accepts many props. Explain how its design balances flexibility, predictable behaviour and maintainability.<\/p><h3 class=\"wp-block-heading\">35. How would you handle a tight deadline when a React feature still has known defects?<\/h3><p class=\"wp-block-paragraph\">This question examines engineering judgement, communication and risk management.<\/p><p class=\"wp-block-paragraph\">A strong response should distinguish critical defects from lower-risk issues and explain how the team can make an informed release decision.<\/p><ol class=\"wp-block-list\">\n<li><strong>Assess impact:<\/strong> Identify which defects affect security, data integrity, accessibility or essential user flows.<\/li>\n\n\n\n<li><strong>Communicate early:<\/strong> Explain outstanding risks and likely consequences to the engineering lead and relevant stakeholders.<\/li>\n\n\n\n<li><strong>Prioritise:<\/strong> Fix high-impact defects before optional improvements.<\/li>\n\n\n\n<li><strong>Validate:<\/strong> Run appropriate automated checks, regression tests and targeted manual tests.<\/li>\n\n\n\n<li><strong>Consider controlled release:<\/strong> Use feature flags, staged rollout or rollback mechanisms when suitable.<\/li>\n\n\n\n<li><strong>Document decisions:<\/strong> Record known limitations and agree on responsibility for follow-up work.<\/li>\n<\/ol><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Do not present releasing an untested feature as the default solution. Explain how you would recommend delaying or reducing the release scope when unresolved defects create unacceptable risk.<\/p><h2 id=\"more-advanced\" class=\"wp-block-heading\">Advanced React JS Interview Questions<\/h2><h3 class=\"wp-block-heading\">36. How do you test React components using React Testing Library?<\/h3><p class=\"wp-block-paragraph\"><strong>React Testing Library<\/strong> helps developers test React components through their rendered output and user interactions. Rather than relying on internal component state or implementation details, tests generally focus on what users can see and do.<\/p><p class=\"wp-block-paragraph\">Common testing activities include:<\/p><ul class=\"wp-block-list\">\n<li><strong>Rendering:<\/strong> Render a component in a test environment using the render function.<\/li>\n\n\n\n<li><strong>Querying:<\/strong> Find elements using accessible roles, labels or visible text.<\/li>\n\n\n\n<li><strong>Interacting:<\/strong> Simulate actions such as clicking buttons or typing using user-event.<\/li>\n\n\n\n<li><strong>Asserting:<\/strong> Check the resulting UI behaviour.<\/li>\n\n\n\n<li><strong>Asynchronous testing:<\/strong> Wait for content that appears after asynchronous updates using appropriate queries.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Example: Testing a counter component<\/strong><\/p><pre class=\"wp-block-code\"><code>\/\/ Counter.jsx\nimport   from 'react';\n\nexport default function Counter()  &lt;\/p&gt;\n      &lt;button onClick= &gt;\n        Increment\n      &lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\"><strong>Test example:<\/strong><\/p><pre class=\"wp-block-code\"><code>\/\/ Counter.test.jsx\nimport   from '@testing-library\/react';\nimport userEvent from '@testing-library\/user-event';\nimport '@testing-library\/jest-dom';\nimport Counter from '.\/Counter';\n\ntest('increments count when clicked', async () =&gt;  )\n  );\n\n  expect(screen.getByText('Count: 1')).toBeInTheDocument();\n});\n<\/code><\/pre><p class=\"wp-block-paragraph\">The test verifies that a user can click the Increment button and observe the updated count. It does not depend on accessing the component&rsquo;s internal state.<\/p><p class=\"wp-block-paragraph\"><strong>Important:<\/strong> This example assumes a test environment configured with a compatible test runner, DOM environment, React Testing Library, user-event and jest-dom matchers.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Prefer accessible queries such as getByRole when suitable. For content that appears asynchronously, use findBy queries or waitFor rather than arbitrary time delays.<\/p><h3 class=\"wp-block-heading\">37. What is the difference between shallow rendering and full rendering in React testing?<\/h3><p class=\"wp-block-paragraph\"><strong>Shallow rendering<\/strong> is an older testing approach that renders a component without fully rendering its descendants. It was commonly associated with tools such as Enzyme and tests focused on component implementation details.<\/p><p class=\"wp-block-paragraph\"><strong>Full DOM rendering<\/strong> renders a component and its relevant descendants into a DOM-based test environment, allowing tests to examine rendered content and simulate user interactions.<\/p><figure class=\"wp-block-table\"><table><thead><tr><th>Aspect<\/th><th>Shallow Rendering<\/th><th>DOM-Based Rendering<\/th><\/tr><\/thead><tbody><tr><td>Purpose<\/td><td>Examine a component in relative isolation<\/td><td>Test rendered UI and component interactions<\/td><\/tr><tr><td>Child components<\/td><td>Not fully rendered<\/td><td>Rendered as part of the tested component tree<\/td><\/tr><tr><td>Typical approach<\/td><td>Inspect component structure and implementation<\/td><td>Query DOM elements and simulate user behaviour<\/td><\/tr><tr><td>Modern recommendation<\/td><td>Generally avoid as the default testing strategy<\/td><td>Prefer for user-facing component behaviour<\/td><\/tr><\/tbody><\/table><\/figure><p class=\"wp-block-paragraph\">React Testing Library encourages testing the behaviour visible to users, such as whether a form displays validation feedback or whether clicking a button updates the interface.<\/p><p class=\"wp-block-paragraph\">For isolated business logic, developers can test ordinary JavaScript functions separately. When child components or external services need isolation, suitable mocks and test boundaries may be used without depending on shallow rendering.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Instead of automatically recommending shallow rendering for unit tests, explain what behaviour needs to be verified and choose a testing approach that remains reliable when internal implementation changes.<\/p><h3 class=\"wp-block-heading\">38. How do you implement server-side rendering (SSR) in React?<\/h3><p class=\"wp-block-paragraph\"><strong>Server-side rendering (SSR)<\/strong> generates a React application&rsquo;s initial HTML on the server and sends it to the browser. The browser can display this HTML before React&rsquo;s client-side JavaScript completes loading.<\/p><p class=\"wp-block-paragraph\">React directly supports server rendering through the react-dom\/server package. Frameworks such as Next.js provide additional routing, data-loading, caching and rendering infrastructure.<\/p><p class=\"wp-block-paragraph\"><strong>React server-rendering APIs include:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>renderToPipeableStream:<\/strong> Streams React-generated HTML in Node.js environments.<\/li>\n\n\n\n<li><strong>renderToReadableStream:<\/strong> Generates a Web Readable Stream in compatible environments.<\/li>\n\n\n\n<li><strong>renderToString:<\/strong> Generates an HTML string, but has limitations compared with modern streaming APIs.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Example: Basic Node.js server rendering with React<\/strong><\/p><pre class=\"wp-block-code\"><code>\/\/ Illustrative Node.js server example.\n\/\/ Assumes an Express app and React JSX build setup.\n\nimport   from 'react-dom\/server';\nimport App from '.\/App';\n\napp.get('\/', (request, response) =&gt;   = renderToPipeableStream(&lt;App \/&gt;,  ,\n\n    onError(error)  \n  });\n});\n\n\/\/ App is expected to render the HTML document.\n\/\/ \/client.js should hydrate the same React tree.\n<\/code><\/pre><p class=\"wp-block-paragraph\">The example demonstrates the streaming API, not a complete deployable server. Production applications also need routing, build configuration, error handling, resource delivery and appropriate HTTP status management.<\/p><p class=\"wp-block-paragraph\"><strong>What is hydration?<\/strong> After receiving server-rendered HTML, React can attach its client-side component logic through hydrateRoot, making the interface interactive. The initial client render should match the server-generated output.<\/p><p class=\"wp-block-paragraph\"><strong>Benefits of SSR:<\/strong> It can make important content available in the initial HTML and improve perceived loading behaviour in suitable applications. However, performance depends on server response times, JavaScript delivery, hydration work and the overall rendering strategy.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Do not claim that React requires Next.js to perform SSR. React provides server-rendering APIs directly, while frameworks simplify building complete server-rendered applications.<\/p><p class=\"wp-block-paragraph\">For implementation details, consult the <a href=\"https:\/\/react.dev\/reference\/react-dom\/server\" target=\"_blank\" rel=\"noopener noreferrer\">official React server API documentation<\/a>.<\/p><h3 class=\"wp-block-heading\">39. What is useTransition in React, and when should you use it?<\/h3><p class=\"wp-block-paragraph\">The <code>useTransition<\/code> Hook lets React mark certain state updates as non-blocking Transitions. This helps keep urgent interactions responsive while React processes a potentially expensive UI update.<\/p><p class=\"wp-block-paragraph\">The Hook returns two values:<\/p><ul class=\"wp-block-list\">\n<li><strong>isPending:<\/strong> Indicates whether the Transition has pending work.<\/li>\n\n\n\n<li><strong>startTransition:<\/strong> Marks eligible state updates as Transitions.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Example: Switching between application views<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nfunction TabPanel( )  &lt;\/p&gt;;\n}\n\nexport default function DashboardTabs()  );\n  }\n\n  return (\n    &lt;div&gt;\n      &lt;button\n        type=\"button\"\n        onClick= \n      &gt;\n        Overview\n      &lt;\/button&gt;\n\n      &lt;button\n        type=\"button\"\n        onClick= \n      &gt;\n        Reports\n      &lt;\/button&gt;\n\n       \n\n      &lt;TabPanel tab=  \/&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">When the selected view involves substantial rendering work, a Transition allows React to prioritise more urgent interactions. In this small illustrative example, the update may complete too quickly for the pending indicator to appear.<\/p><p class=\"wp-block-paragraph\"><strong>Important limitations:<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Transition updates can be interrupted by more urgent updates.<\/li>\n\n\n\n<li>Transitions must not be used to control text input values.<\/li>\n\n\n\n<li>Transitions do not automatically make expensive JavaScript calculations faster.<\/li>\n\n\n\n<li>After awaiting asynchronous work inside a Transition, subsequent state updates currently need another startTransition wrapper to retain Transition priority.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Explain that useTransition helps React schedule non-urgent updates without blocking urgent interactions. It is not a substitute for code splitting, efficient algorithms or performance profiling.<\/p><p class=\"wp-block-paragraph\">See the <a href=\"https:\/\/react.dev\/reference\/react\/useTransition\" target=\"_blank\" rel=\"noopener noreferrer\">official useTransition documentation<\/a>.<\/p><h3 class=\"wp-block-heading\">40. How do you ensure accessibility in React applications?<\/h3><p class=\"wp-block-paragraph\"><strong>Accessibility<\/strong> involves making interfaces usable by people with different visual, hearing, motor and cognitive needs. React applications should use semantic HTML, accessible names, predictable focus behaviour and keyboard-operable interactions.<\/p><p class=\"wp-block-paragraph\"><strong>Important accessibility practices include:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Semantic HTML:<\/strong> Use native elements such as button, a, nav, form and input according to their intended purpose.<\/li>\n\n\n\n<li><strong>Accessible names:<\/strong> Associate form controls with visible labels and provide meaningful names for interactive elements.<\/li>\n\n\n\n<li><strong>Keyboard interaction:<\/strong> Ensure essential actions can be completed without a mouse.<\/li>\n\n\n\n<li><strong>Focus management:<\/strong> Maintain a logical focus order and move focus appropriately when interactions change the interface.<\/li>\n\n\n\n<li><strong>Visual presentation:<\/strong> Check colour contrast, readable text and visible focus indicators.<\/li>\n\n\n\n<li><strong>Feedback:<\/strong> Make validation errors and important status changes understandable to assistive technology users.<\/li>\n\n\n\n<li><strong>Testing:<\/strong> Combine automated accessibility checks with manual keyboard and screen-reader testing.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Example: An accessible React form field<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nexport default function NameField()  \n  }\n\n  return (\n    &lt;form onSubmit=  noValidate&gt;\n      &lt;label htmlFor= &gt;\n        Full name\n      &lt;\/label&gt;\n\n      &lt;input\n        id= \n        value= \n        onChange= \n        aria-invalid= \n        aria-describedby= \n      \/&gt;\n\n        role=\"alert\"&gt;\n          Enter your full name.\n        &lt;\/p&gt;\n      )}\n\n      &lt;button type=\"submit\"&gt;Submit&lt;\/button&gt;\n    &lt;\/form&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">The label is programmatically associated with the input, while aria-invalid and aria-describedby communicate the validation error. The error message is also exposed through an alert role.<\/p><p class=\"wp-block-paragraph\">This is a focused illustration, not a complete form-accessibility implementation. Production forms should also consider focus management, error summaries, successful submission feedback and testing with assistive technologies.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Prefer native semantic elements before adding ARIA. ARIA attributes do not automatically provide keyboard support or make a custom interactive element accessible.<\/p><p class=\"wp-block-paragraph\">For further guidance, refer to the <a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C WAI-ARIA Authoring Practices Guide<\/a>.<\/p><h3 class=\"wp-block-heading\">41. How do React Suspense and lazy work together?<\/h3><p class=\"wp-block-paragraph\"><strong>React Suspense<\/strong> lets developers display fallback content while part of a component tree is waiting to become ready. The <code>lazy<\/code> API enables components to be loaded on demand using dynamic imports.<\/p><p class=\"wp-block-paragraph\">When a lazy-loaded component is not yet available, it can suspend rendering. The nearest Suspense boundary displays its fallback until the component is ready.<\/p><p class=\"wp-block-paragraph\"><strong>Example: Loading a settings component<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nconst Settings = lazy(() =&gt; import('.\/Settings'));\n\nexport default function App()  &gt;\n        &lt;Settings \/&gt;\n      &lt;\/Suspense&gt;\n    &lt;\/main&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">React attempts to render Settings and displays the fallback if its component code is still loading. Once the module becomes available, React can render the component.<\/p><p class=\"wp-block-paragraph\"><strong>Other uses of Suspense:<\/strong> Suspense also works with supported asynchronous rendering mechanisms, including data loading through Suspense-enabled frameworks and streaming server rendering.<\/p><p class=\"wp-block-paragraph\"><strong>Important limitation:<\/strong> Suspense does not automatically detect data fetching performed inside a conventional useEffect or event handler. Such requests need their own loading and error handling unless a supported Suspense integration is used.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> React.lazy concerns loading component code, while Suspense controls the fallback UI for a subtree that suspends. They are related but serve different purposes.<\/p><h3 class=\"wp-block-heading\">42. What is hydration in React, and what causes hydration mismatches?<\/h3><p class=\"wp-block-paragraph\"><strong>Hydration<\/strong> is the process of attaching React&rsquo;s client-side logic to HTML previously generated on the server. It allows server-rendered interfaces to become interactive in the browser.<\/p><p class=\"wp-block-paragraph\">React provides the <code>hydrateRoot<\/code> API through react-dom\/client for hydrating server-rendered HTML.<\/p><p class=\"wp-block-paragraph\"><strong>Example:<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react-dom\/client';\nimport App from '.\/App';\n\nhydrateRoot(\n  document.getElementById('root'),\n  &lt;App \/&gt;\n);\n<\/code><\/pre><p class=\"wp-block-paragraph\">The initial client render must produce output consistent with the HTML generated on the server. Otherwise, React may report a hydration mismatch.<\/p><p class=\"wp-block-paragraph\"><strong>Common causes include:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Non-deterministic values:<\/strong> Rendering random numbers or changing timestamps that differ between the server and browser.<\/li>\n\n\n\n<li><strong>Browser-only information:<\/strong> Reading window, localStorage or browser dimensions during rendering without an appropriate server-rendering strategy.<\/li>\n\n\n\n<li><strong>Different initial data:<\/strong> Rendering one dataset on the server and another on the client.<\/li>\n\n\n\n<li><strong>Invalid HTML nesting:<\/strong> Producing markup that the browser parses differently from the structure React expects.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>How to prevent mismatches:<\/strong> Keep the initial output deterministic, provide consistent data during server and client rendering, and move browser-specific behaviour to an appropriate client-side stage.<\/p><p class=\"wp-block-paragraph\">React provides suppressHydrationWarning for limited cases where a mismatch is unavoidable, but developers should not use it to hide general rendering bugs.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Hydration is not simply attaching event listeners. React must also reconcile its client-side tree with the existing server-rendered HTML.<\/p><h3 class=\"wp-block-heading\">43. What are React Server Components, and how do they differ from Client Components?<\/h3><p class=\"wp-block-paragraph\"><strong>React Server Components (RSC)<\/strong> allow supported React applications to render certain components in an environment separate from the browser. They can access server-side resources and produce output that is incorporated into the React application without shipping the Server Component&rsquo;s implementation code to the browser.<\/p><p class=\"wp-block-paragraph\">Client Components are used for interactive behaviour that requires browser-side capabilities, such as stateful event handling and browser APIs.<\/p><p class=\"wp-block-paragraph\"><strong>Key differences:<\/strong><\/p><figure class=\"wp-block-table\"><table><thead><tr><th>Feature<\/th><th>Server Components<\/th><th>Client Components<\/th><\/tr><\/thead><tbody><tr><td>Execution<\/td><td>Run in a server or build environment<\/td><td>Support browser-side React interaction<\/td><\/tr><tr><td>Data access<\/td><td>Can access permitted server-side resources<\/td><td>Access data through props or appropriate client-facing interfaces<\/td><\/tr><tr><td>State and effects<\/td><td>Cannot use client-only Hooks such as useState or useEffect<\/td><td>Can use client-side state and effects<\/td><\/tr><tr><td>Event handlers<\/td><td>Do not define browser interaction handlers<\/td><td>Can handle browser interactions<\/td><\/tr><tr><td>JavaScript delivery<\/td><td>Implementation code is not sent as ordinary client component code<\/td><td>Client implementation code may be delivered to the browser<\/td><\/tr><\/tbody><\/table><\/figure><p class=\"wp-block-paragraph\"><strong>Example: Server Component in a compatible framework<\/strong><\/p><pre class=\"wp-block-code\"><code>\/\/ Server Component\n\/\/ Assumes a framework supporting React Server Components.\n\nimport   from '.\/data';\n\nexport default async function ProductsPage()  &gt; &lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">The example retrieves product data in the Server Component environment and renders a list. A compatible framework handles the Server Component build and rendering infrastructure.<\/p><p class=\"wp-block-paragraph\"><strong>Important distinction:<\/strong> React Server Components and server-side rendering are not the same feature. Server Components determine where component logic runs, while SSR produces HTML on the server. They can be used together in supported applications.<\/p><p class=\"wp-block-paragraph\">The <code>\"use client\"<\/code> directive marks a client boundary in frameworks that support this model. The <code>\"use server\"<\/code> directive identifies Server Functions and does not serve as a general declaration for Server Components.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Explain both the benefit and limitation. Server Components can reduce client-side JavaScript and access server resources, but they require compatible tooling and cannot directly manage browser interactions.<\/p><h3 class=\"wp-block-heading\">44. What is useActionState in React, and how does it help with forms?<\/h3><p class=\"wp-block-paragraph\"><code>useActionState<\/code> is a React Hook that manages state associated with an Action. It is useful for form workflows where submitting data produces a new state, such as a success message or validation error.<\/p><p class=\"wp-block-paragraph\">The Hook returns three values:<\/p><ul class=\"wp-block-list\">\n<li><strong>State:<\/strong> The current result returned by the Action.<\/li>\n\n\n\n<li><strong>Action function:<\/strong> A function that can be supplied to a form&rsquo;s action prop or otherwise dispatched in an appropriate Action context.<\/li>\n\n\n\n<li><strong>isPending:<\/strong> Indicates whether the Action is pending.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Example: Form validation with useActionState<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nasync function submitName(previousState, formData)  ;\n  }\n\n  return  !`\n  };\n}\n\nexport default function NameForm()  \n  );\n\n  return (\n    &lt;form action= &gt;\n      &lt;label htmlFor=\"name\"&gt;Name&lt;\/label&gt;\n      &lt;input id=\"name\" name=\"name\" \/&gt;\n\n      &lt;button type=\"submit\" disabled= &gt;\n         \n      &lt;\/button&gt;\n\n      &lt;p role=\"status\"&gt; &lt;\/p&gt;\n    &lt;\/form&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">In this example, React passes the previous Action state and the submitted FormData to submitName. The returned message becomes the new state displayed by the component.<\/p><p class=\"wp-block-paragraph\"><strong>Important:<\/strong> This example performs local validation and does not save data to a backend. Real applications need appropriate server-side validation, authorisation and error handling for protected operations.<\/p><p class=\"wp-block-paragraph\"><strong>When should you use it?<\/strong> Consider useActionState when a form&rsquo;s submission result needs to update the interface and provide pending, success or validation feedback.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> useActionState is not a replacement for every useState call. It is specifically useful for state associated with Actions and form submissions.<\/p><h3 class=\"wp-block-heading\">45. What is the difference between useReducer and useState?<\/h3><p class=\"wp-block-paragraph\">Both <code>useState<\/code> and <code>useReducer<\/code> manage component state. The main difference is how state updates are expressed and organised.<\/p><ul class=\"wp-block-list\">\n<li><strong>useState:<\/strong> Provides a state value and setter. It is often sufficient for independent values and straightforward updates.<\/li>\n\n\n\n<li><strong>useReducer:<\/strong> Uses a reducer function and dispatched actions to calculate the next state. It can make related or complex state transitions easier to organise.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Example: Counter using useReducer<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nfunction reducer(state, action)  ;\n\n    case 'decrement':\n      return  ;\n\n    case 'reset':\n      return  ;\n\n    default:\n      return state;\n  }\n}\n\nexport default function Counter()  \n  );\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;Count:  &lt;\/p&gt;\n\n      &lt;button onClick= )\n      }&gt;\n        Increment\n      &lt;\/button&gt;\n\n      &lt;button onClick= )\n      }&gt;\n        Decrement\n      &lt;\/button&gt;\n\n      &lt;button onClick= )\n      }&gt;\n        Reset\n      &lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">The reducer receives the current state and an action, then returns the next state. It should be pure and must not mutate the existing state.<\/p><p class=\"wp-block-paragraph\"><strong>When to choose useReducer:<\/strong> It may be useful when several actions update related state or when state transitions become difficult to follow across multiple event handlers.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> useReducer is not automatically faster than useState. Choose the API that makes the component&rsquo;s state logic easier to understand and maintain.<\/p><h3 class=\"wp-block-heading\">46. What are Higher-Order Components (HOCs) in React?<\/h3><p class=\"wp-block-paragraph\">A <strong>Higher-Order Component (HOC)<\/strong> is a function that accepts a React component and returns another component with additional behaviour or props. It is a component composition pattern rather than a special React API.<\/p><p class=\"wp-block-paragraph\">Higher-Order Components have been used for concerns such as logging, data subscriptions and injecting shared information into components.<\/p><p class=\"wp-block-paragraph\"><strong>Example: Adding logging behaviour<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nfunction withLogger(WrappedComponent)  , []);\n\n    return &lt;WrappedComponent   \/&gt;;\n  }\n\n  WithLogger.displayName =\n    `withLogger($ )`;\n\n  return WithLogger;\n}\n\nfunction Profile( )  &lt;\/p&gt;;\n}\n\nconst ProfileWithLogger = withLogger(Profile);\n<\/code><\/pre><p class=\"wp-block-paragraph\">The HOC creates a wrapper component that logs its mount and renders the original component with its props. The enhanced component is created outside rendering so its identity remains stable.<\/p><p class=\"wp-block-paragraph\"><strong>HOCs versus custom Hooks:<\/strong> Custom Hooks are generally preferred for reusing stateful logic inside function components. HOCs remain relevant when working with existing libraries, class components or codebases that use wrapper-based composition.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> An HOC should not mutate the component it receives. Explain how it composes behaviour and how component identity, props and debugging are handled.<\/p><h3 class=\"wp-block-heading\">47. How can you optimise JavaScript bundle size in a large React application?<\/h3><p class=\"wp-block-paragraph\">Reducing JavaScript bundle size can lower download, parsing and execution costs, particularly for users on slower devices or networks. Bundle optimisation should begin with measurement and analysis rather than removing dependencies without evidence.<\/p><p class=\"wp-block-paragraph\"><strong>Practical optimisation techniques include:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Code splitting:<\/strong> Divide large application bundles into smaller chunks loaded when needed.<\/li>\n\n\n\n<li><strong>Lazy loading:<\/strong> Defer components or routes that are not immediately required.<\/li>\n\n\n\n<li><strong>Dependency analysis:<\/strong> Identify large, duplicated or unused third-party packages.<\/li>\n\n\n\n<li><strong>Tree shaking:<\/strong> Configure compatible build tools to remove unused exports where module structure and side-effect information allow it.<\/li>\n\n\n\n<li><strong>Selective imports:<\/strong> Import only the utilities or components needed, where supported by the package and bundler.<\/li>\n\n\n\n<li><strong>Production builds:<\/strong> Use appropriate minification and build optimisations.<\/li>\n\n\n\n<li><strong>Bundle analysis:<\/strong> Inspect output chunks and compare their sizes after changes.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Example: Lazy-loading a route component<\/strong><\/p><pre class=\"wp-block-code\"><code>import   from 'react';\n\nconst Reports = lazy(() =&gt; import('.\/Reports'));\n\nexport default function ReportsPage()  &gt;\n      &lt;Reports \/&gt;\n    &lt;\/Suspense&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">When the Reports component is loaded through a separate JavaScript chunk, the application can defer downloading that code until the component is needed. Actual splitting depends on the bundler and build configuration.<\/p><p class=\"wp-block-paragraph\"><strong>Important:<\/strong> Tree shaking is not guaranteed merely because an application uses Webpack or another modern bundler. It depends on the build configuration, module format, package structure and side effects.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Discuss JavaScript transferred, parsed and executed, not just the uncompressed output file size. Measure the impact on initial loading and relevant user interactions.<\/p><h3 class=\"wp-block-heading\">48. What is React Compiler, and how does it affect memoisation?<\/h3><p class=\"wp-block-paragraph\"><strong>React Compiler<\/strong> is a build-time optimisation tool that analyses React code and can automatically memoise components and values. Its purpose is to reduce unnecessary work without requiring developers to add manual memoisation throughout an application.<\/p><p class=\"wp-block-paragraph\">Traditionally, developers have used React.memo, useMemo and useCallback to avoid unnecessary rendering work or repeated calculations.<\/p><p class=\"wp-block-paragraph\">When React Compiler is correctly configured and able to optimise compatible code, it can apply equivalent memoisation automatically.<\/p><p class=\"wp-block-paragraph\"><strong>Example: Ordinary component code<\/strong><\/p><pre class=\"wp-block-code\"><code>function ProductList( )  &gt;\n           \n        &lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">Without automatic memoisation, filtering runs whenever this component renders. With React Compiler enabled and the component successfully optimised, React may reuse calculations or rendered output when the relevant inputs have not changed.<\/p><p class=\"wp-block-paragraph\"><strong>Important considerations:<\/strong><\/p><ul class=\"wp-block-list\">\n<li>React Compiler must be installed and configured for the application&rsquo;s build process.<\/li>\n\n\n\n<li>Code should follow the Rules of React, including component purity and correct Hook usage.<\/li>\n\n\n\n<li>Existing memoisation does not have to be removed automatically.<\/li>\n\n\n\n<li>React Compiler does not replace performance profiling or application architecture decisions.<\/li>\n\n\n\n<li>Developers should test behaviour and performance when enabling the Compiler in an existing codebase.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> React Compiler reduces the need for manual memoisation, but it does not guarantee that every component or computation will be optimised. Its benefits depend on the application and the code being compiled.<\/p><p class=\"wp-block-paragraph\">For implementation details, consult the <a href=\"https:\/\/react.dev\/learn\/react-compiler\" target=\"_blank\" rel=\"noopener noreferrer\">official React Compiler documentation<\/a>.<\/p><h3 class=\"wp-block-heading\">49. How do you handle errors gracefully in a React single-page application?<\/h3><p class=\"wp-block-paragraph\">Error handling in a React single-page application should account for rendering failures, network errors, user input errors and unexpected application behaviour.<\/p><p class=\"wp-block-paragraph\">Different types of failures require different handling strategies.<\/p><ul class=\"wp-block-list\">\n<li><strong>Rendering errors:<\/strong> Use Error Boundaries to display fallback interfaces when descendant components fail during rendering.<\/li>\n\n\n\n<li><strong>Network failures:<\/strong> Handle rejected requests, unsuccessful HTTP responses and unavailable services.<\/li>\n\n\n\n<li><strong>Form validation:<\/strong> Display clear and accessible messages when submitted information is invalid.<\/li>\n\n\n\n<li><strong>Event-handler failures:<\/strong> Handle expected errors within appropriate event-handler logic.<\/li>\n\n\n\n<li><strong>Unexpected failures:<\/strong> Record useful diagnostic information through an appropriate monitoring system without exposing sensitive data.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Example: Handling an API failure<\/strong><\/p><pre class=\"wp-block-code\"><code>async function loadProfile()  \n\n    const profile = await response.json();\n    return profile;\n\n  } catch (error)  \n}\n<\/code><\/pre><p class=\"wp-block-paragraph\">This function detects unsuccessful responses and propagates the error so the calling code can decide how to display a loading failure or retry option.<\/p><p class=\"wp-block-paragraph\"><strong>Important:<\/strong> Error Boundaries do not automatically catch errors from ordinary asynchronous callbacks or event handlers. These need suitable handling at their own boundaries.<\/p><p class=\"wp-block-paragraph\">For a production application, developers should also consider retry policies, cancellation of obsolete requests, access-denied responses and how to preserve unaffected parts of the interface.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Explain which errors should be recoverable, where they are handled and how users receive actionable feedback. Avoid relying on console logging as the only recovery strategy.<\/p><h3 class=\"wp-block-heading\">50. What are alternatives to Redux for managing state in React?<\/h3><p class=\"wp-block-paragraph\">Redux is one option for managing shared application state, but React applications can use built-in Hooks, external stores and specialised libraries depending on the type of information being managed.<\/p><p class=\"wp-block-paragraph\"><strong>Common alternatives and related approaches include:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>useState and useReducer:<\/strong> Built-in Hooks for managing state within a component or a suitable component subtree.<\/li>\n\n\n\n<li><strong>Context with useReducer:<\/strong> A combination that can make shared state and update functions available to descendant components.<\/li>\n\n\n\n<li><strong>Zustand:<\/strong> An external state-management library offering store-based access to application state.<\/li>\n\n\n\n<li><strong>Jotai:<\/strong> An atomic state-management library that represents state through smaller units called atoms.<\/li>\n\n\n\n<li><strong>XState:<\/strong> A library for modelling complex workflows using state machines and statecharts.<\/li>\n\n\n\n<li><strong>TanStack Query:<\/strong> A library for fetching, caching and synchronising server state. It addresses a different problem from general client-state management.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>How should you choose?<\/strong> Start by identifying the kind of state your application needs to manage.<\/p><ul class=\"wp-block-list\">\n<li><strong>Local UI state:<\/strong> useState may be sufficient for inputs, dialogs and simple interactions.<\/li>\n\n\n\n<li><strong>Complex local transitions:<\/strong> useReducer can help organise related update logic.<\/li>\n\n\n\n<li><strong>Widely shared application state:<\/strong> Context or an external store may be appropriate.<\/li>\n\n\n\n<li><strong>State-machine workflows:<\/strong> XState can be useful where transitions and permitted states must be explicit.<\/li>\n\n\n\n<li><strong>Remote server data:<\/strong> A dedicated data-fetching and caching solution may reduce duplicated request-handling logic.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">No state-management library is universally best for every React application. The decision depends on state ownership, update frequency, application complexity, server-data requirements and the team&rsquo;s maintenance needs.<\/p><p class=\"wp-block-paragraph\"><strong>Interview tip:<\/strong> Distinguish client state from server state and explain the trade-offs of your preferred approach. Choosing a library should be justified by actual application requirements rather than popularity alone.<\/p><h2 id=\"faq\" class=\"wp-block-heading\">Frequently Asked Questions About React JS Interviews<\/h2><h3 class=\"wp-block-heading\">1. What React JS interview topics should freshers prepare?<\/h3><p class=\"wp-block-paragraph\">Freshers should understand JSX, function components, props, state, event handling, conditional rendering, list keys, controlled inputs and basic Hooks such as useState and useEffect. They should also practise explaining how React renders and updates interfaces, rather than memorising definitions alone.<\/p><h3 class=\"wp-block-heading\">2. What React interview questions are relevant for developers with two to three years of experience?<\/h3><p class=\"wp-block-paragraph\">Developers with two to three years of experience may be assessed on custom Hooks, effect dependencies, component composition, shared state, routing, API integration, error handling, testing and performance debugging. Interviewers may also ask candidates to explain technical decisions made in previous projects.<\/p><h3 class=\"wp-block-heading\">3. What advanced React topics should experienced developers know?<\/h3><p class=\"wp-block-paragraph\">Experienced React developers should be prepared to discuss reconciliation, rendering performance, Suspense, hydration, server-side rendering, React Server Components, state-management trade-offs, accessibility, application architecture and secure integration with backend APIs. Knowledge of newer APIs such as useActionState and React Compiler may also be relevant, depending on the role and technology stack.<\/p><h3 class=\"wp-block-heading\">4. Do React interviews include practical coding questions?<\/h3><p class=\"wp-block-paragraph\">Yes. Depending on the employer and role, candidates may be asked to build components, handle forms, fetch data, render lists, identify Hook-related bugs or write component tests. Typical exercises include a searchable list, a form with validation or a component that handles loading and error states.<\/p><h3 class=\"wp-block-heading\">5. Is Next.js knowledge required for a React developer interview?<\/h3><p class=\"wp-block-paragraph\">Not every React role requires Next.js. However, it is relevant when a position involves Next.js applications, server rendering, routing or React Server Components. Candidates should review the job description and distinguish the React library&rsquo;s APIs from features supplied by a framework.<\/p><h3 class=\"wp-block-heading\">6. How should candidates prepare for React performance questions?<\/h3><p class=\"wp-block-paragraph\">Practise using React Developer Tools Profiler and browser performance tools to identify actual bottlenecks. Understand when React.memo, useMemo, useCallback, code splitting and list virtualisation may help, but be prepared to explain their limitations. Interviewers may value evidence-based diagnosis over applying optimisation techniques without measurement.<\/p><h3 class=\"wp-block-heading\">7. What mistakes should candidates avoid in React technical interviews?<\/h3><p class=\"wp-block-paragraph\">Common mistakes include claiming that the Virtual DOM always improves performance, treating useEffect as an exact replacement for class lifecycle methods, mutating state directly, using unstable keys for changing lists and assuming frontend route guards provide secure authorisation. Candidates should explain their assumptions and mention API or framework versions when those affect the answer.<\/p><h3 class=\"wp-block-heading\">8. What is the best way to practise React interview questions?<\/h3><p class=\"wp-block-paragraph\">Build small applications that use components, forms, asynchronous requests and shared state. Practise debugging failed Effects, testing user interactions and explaining architectural trade-offs. Review relevant <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">official React documentation<\/a> and prepare examples from projects you have actually completed.<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React JS interview questions often test how well developers understand components, props, state, hooks, rendering and application performance. For experienced candidates, interviews may also cover architecture, testing, server-side rendering and debugging production applications.This guide covers 50 React JS interview questions and answers for freshers, intermediate developers and experienced professionals. It includes technical explanations, code examples &hellip; <a href=\"https:\/\/www.foundit.sg\/career-advice\/react-js-interview-questions-answers\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">50+ React.js Interview Questions with Answers 2026<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":7,"featured_media":47250,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[147],"tags":[],"class_list":["post-47214","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-interview-questions"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/posts\/47214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/comments?post=47214"}],"version-history":[{"count":44,"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/posts\/47214\/revisions"}],"predecessor-version":[{"id":55574,"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/posts\/47214\/revisions\/55574"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/media\/47250"}],"wp:attachment":[{"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/media?parent=47214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/categories?post=47214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/tags?post=47214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}