React Miscellaneous Interview Questions & Answers 2026

📖 Introduction

This comprehensive guide focuses on React Miscellaneous interview questions covering advanced topics and best practices. Whether you're preparing for your first React.js interview or looking to refresh your knowledge, this resource provides detailed answers with code examples to help you succeed.

What you'll learn:

• Advanced Patterns: HOCs, Render Props, Composition
• Best Practices: React development best practices
• Common Pitfalls: Avoiding common React mistakes
• Performance Tips: Advanced optimization techniques
• Architecture: Building scalable React applications
• Edge Cases: Handling complex scenarios and edge cases

Perfect for:

• Developers preparing for React.js interviews focusing on advanced topics
• Senior frontend engineers looking to deepen React knowledge
• Teams conducting React technical assessments
• Anyone learning React and seeking comprehensive interview preparation

Keywords: React Miscellaneous interview questions, React JS interview questions, React.js interview questions, interview questions on react js Key Features:

• 164+ React Miscellaneous interview questions with detailed explanations
• Code examples for every concept
• Updated for 2026 with latest React features
• Covers all difficulty levels from beginner to advanced
• Practical answers you can use in real interviews

Miscellaneous

1. What are the main features of Reselect library?

   Let's see the main features of Reselect library,

   1. Selectors can compute derived data, allowing Redux to store the minimal possible state.
   2. Selectors are efficient. A selector is not recomputed unless one of its arguments changes.
   3. Selectors are composable. They can be used as input to other selectors.

2. Give an example of Reselect usage?

   Let's take calculations and different amounts of a shipment order with the simplified usage of Reselect:

   import { createSelector } from "reselect"
   
   const shopItemsSelector = (state) => state.shop.items
   const taxPercentSelector = (state) => state.shop.taxPercent
   
   const subtotalSelector = createSelector(shopItemsSelector, (items) =>
     items.reduce((acc, item) => acc + item.value, 0)
   )
   
   const taxSelector = createSelector(
     subtotalSelector,
     taxPercentSelector,
     (subtotal, taxPercent) => subtotal * (taxPercent / 100)
   )
   
   export const totalSelector = createSelector(subtotalSelector, taxSelector, (subtotal, tax) => ({
     total: subtotal + tax,
   }))
   
   let exampleState = {
     shop: {
       taxPercent: 8,
       items: [
         { name: "apple", value: 1.2 },
         { name: "orange", value: 0.95 },
       ],
     },
   }
   
   console.log(subtotalSelector(exampleState)) // 2.15
   console.log(taxSelector(exampleState)) // 0.172
   console.log(totalSelector(exampleState)) // { total: 2.322 }
   

⬆ Back to Top

3. Can Redux only be used with React?

   Redux can be used as a data store for any UI layer. The most common usage is with React and React Native, but there are bindings available for Angular, Angular 2, Vue, Mithril, and more. Redux simply provides a subscription mechanism which can be used by any other code.

⬆ Back to Top

4. Do you need to have a particular build tool to use Redux?

   Redux is originally written in ES6 and transpiled for production into ES5 with Webpack and Babel. You should be able to use it regardless of your JavaScript build process. Redux also offers a UMD build that can be used directly without any build process at all.

⬆ Back to Top

5. How Redux Form initialValues get updated from state?

   You need to add enableReinitialize : true setting.

   const InitializeFromStateForm = reduxForm({
     form: "initializeFromState",
     enableReinitialize: true,
   })(UserEdit)
   

   If your initialValues prop gets updated, your form will update too.

⬆ Back to Top

6. How React PropTypes allow different types for one prop?

   You can use oneOfType() method of PropTypes.

   For example, the height property can be defined with either string or number type as below:

   Component.propTypes = {
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   }
   

⬆ Back to Top

7. Can I import an SVG file as react component?

   You can import SVG directly as component instead of loading it as a file. This feature is available with react-scripts@2.0.0 and higher.

   import { ReactComponent as Logo } from "./logo.svg"
   
   const App = () => (
     <div>
       {/* Logo is an actual react component */}
       <Logo />
     </div>
   )
   

   Note: Don't forget about the curly braces in the import.

⬆ Back to Top

8. What is render hijacking in react?

   The concept of render hijacking is the ability to control what a component will output from another component. It means that you decorate your component by wrapping it into a Higher-Order component. By wrapping, you can inject additional props or make other changes, which can cause changing logic of rendering. It does not actually enable hijacking, but by using HOC you make your component behave differently.

⬆ Back to Top

9. How to pass numbers to React component?

   We can pass numbers as props to React component using curly braces {} where as strings in double quotes "" or single quotes ''

   import React from "react"
   
   const ChildComponent = ({ name, age }) => {
     return (
       <>
         My Name is {name} and Age is {age}
       </>
     )
   }
   
   const ParentComponent = () => {
     return (
       <>
         <ChildComponent name="Chetan" age={30} />
       </>
     )
   }
   
   export default ParentComponent
   

⬆ Back to Top

10. Do I need to keep all my state into Redux? Should I ever use react internal state?

    It is up to the developer's decision, i.e., it is developer's job to determine what kinds of state make up your application, and where each piece of state should live. Some users prefer to keep every single piece of data in Redux, to maintain a fully serializable and controlled version of their application at all times. Others prefer to keep non-critical or UI state, such as “is this dropdown currently open”, inside a component's internal state.

    Below are the rules of thumb to determine what kind of data should be put into Redux

    1. Do other parts of the application care about this data?
    2. Do you need to be able to create further derived data based on this original data?
    3. Is the same data being used to drive multiple components?
    4. Is there value to you in being able to restore this state to a given point in time (ie, time travel debugging)?
    5. Do you want to cache the data (i.e, use what's in state if it's already there instead of re-requesting it)?

⬆ Back to Top

11. What is the purpose of registerServiceWorker in React?

    React creates a service worker for you without any configuration by default. The service worker is a web API that helps you cache your assets and other files so that when the user is offline or on a slow network, he/she can still see results on the screen, as such, it helps you build a better user experience, that's what you should know about service worker for now. It's all about adding offline capabilities to your site.

    import React from "react"
    import ReactDOM from "react-dom"
    import App from "./App"
    import registerServiceWorker from "./registerServiceWorker"
    
    ReactDOM.render(<App />, document.getElementById("root"))
    registerServiceWorker()
    

⬆ Back to Top

12. What is React memo function?

    Class components can be restricted from re-rendering when their input props are the same using PureComponent or shouldComponentUpdate. Now you can do the same with function components by wrapping them in React.memo.

    const MyComponent = React.memo(function MyComponent(props) {
      /* only rerenders if props change */
    })
    

⬆ Back to Top

13. What is React lazy function?

    The React.lazy function lets you render a dynamic import as a regular component. It will automatically load the bundle containing the OtherComponent when the component gets rendered. This must return a Promise which resolves to a module with a default export containing a React component.

    const OtherComponent = React.lazy(() => import("./OtherComponent"))
    
    function MyComponent() {
      return (
        <div>
          <OtherComponent />
        </div>
      )
    }
    

    Note: React.lazy and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we still recommend React Loadable.

⬆ Back to Top

14. How to prevent unnecessary updates using setState?

    You can compare the current value of the state with an existing state value and decide whether to rerender the page or not. If the values are the same then you need to return null to stop re-rendering otherwise return the latest state value.

    For example, the user profile information is conditionally rendered as follows,

    getUserProfile = (user) => {
      const latestAddress = user.address
      this.setState((state) => {
        if (state.address === latestAddress) {
          return null
        } else {
          return { title: latestAddress }
        }
      })
    }
    

⬆ Back to Top

15. What are hooks?

    Hooks is a special JavaScript function that allows you use state and other React features without writing a class. This pattern has been introduced as a new feature in React 16.8 and helped to isolate the stateful logic from the components.

    Let's see an example of useState hook:

    import { useState } from "react"
    
    function Example() {
      // Declare a new state variable, which we'll call "count"
      const [count, setCount] = useState(0)
    
      return (
        <>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>Click me</button>
        </>
      )
    }
    

    Note: Hooks can be used inside an existing function component without rewriting the component.

⬆ Back to Top

16. What rules need to be followed for hooks?

    You need to follow two rules in order to use hooks,

    1. Call Hooks only at the top level of your react functions: You should always use hooks at the top level of react function before any early returns. i.e, You shouldn’t call Hooks inside loops, conditions, or nested functions. This will ensure that Hooks are called in the same order each time a component renders and it preserves the state of Hooks between multiple re-renders due to useState and useEffect calls.

    Let's see the difference using an example, Correct usage::

    function UserProfile() {
      // Correct: Hooks called at the top level
      const [name, setName] = useState("John")
      const [country, setCountry] = useState("US")
    
      return (
        <div>
          <h1>Name: {name}</h1>
          <p>Country: {country}</p>
        </div>
      )
    }
    

    Incorrect usage::

    function UserProfile() {
      const [name, setName] = useState("John")
    
      if (name === "John") {
        // Incorrect: useState is called inside a conditional
        const [country, setCountry] = useState("US")
      }
    
      return (
        <div>
          <h1>Name: {name}</h1>
          <p>Country: {country}</p> {/* This will throw an error if the name condition isn't met */}
        </div>
      )
    }
    

    The useState hook for the country field is being called conditionally within an if block. This can lead to inconsistent state behavior and may cause hooks to be called in a different order on each re-render. 2. Call Hooks from React Functions only: You shouldn’t call Hooks from regular JavaScript functions or class components. Instead, you should call them from either function components or custom hooks.

    Let's find the difference of correct and incorrect usage with below examples,

    Correct usage::

    //Example1:
    function Counter() {
      // Correct: useState is used inside a functional component
      const [count, setCount] = useState(0)
    
      return <div>Counter: {count}</div>
    }
    //Example2:
    function useFetchData(url) {
      const [data, setData] = useState(null)
    
      useEffect(() => {
        fetch(url)
          .then((response) => response.json())
          .then((data) => setData(data))
      }, [url])
    
      return data
    }
    
    function UserProfile() {
      // Correct: Using a custom hook here
      const user = useFetchData("https://some-api.com/user")
    
      return (
        <div>
          <h1>{user ? user.name : "Loading profile..."}</h1>
        </div>
      )
    }
    

    Incorrect usage::

    //Example1
    function normalFunction() {
      // Incorrect: Can't call hooks in normal functions
      const [count, setCount] = useState(0)
    }
    
    //Example2
    function fetchData(url) {
      // Incorrect: Hooks can't be used in non-React functions
      const [data, setData] = useState(null)
    
      useEffect(() => {
        fetch(url)
          .then((response) => response.json())
          .then((data) => setData(data))
      }, [url])
    
      return data
    }
    

    In the above incorrect usage example, both useState and useEffect are used in non-React functions(normalFunction and fetchData), which is not allowed.

⬆ Back to Top

17. How to ensure hooks followed the rules in your project?

    React team released an ESLint plugin called eslint-plugin-react-hooks that enforces Hook's two rules. It is part of Hooks API. You can add this plugin to your project using the below command,

    npm install eslint-plugin-react-hooks --save-dev
    

    And apply the below config in your ESLint config file,

    // Your ESLint configuration
    {
      "plugins": [
        // ...
        "react-hooks"
      ],
      "rules": {
        // ...
        "react-hooks/rules-of-hooks": "error"
      }
    }
    

    This plugin also provide another important rule through react-hooks/exhaustive-deps. It ensures that the dependencies of useEffect, useCallback, and useMemo hooks are correctly listed to avoid potential bugs.

    useEffect(() => {
      // Forgetting `message` will result in incorrect behavior
      console.log(message)
    }, []) // Here `message` should be a dependency
    

    The recommended eslint-config-react-app preset already includes the hooks rules of this plugin. For example, the linter enforce proper naming convention for hooks. If you rename your custom hooks which as prefix "use" to something else then linter won't allow you to call built-in hooks such as useState, useEffect etc inside of your custom hook anymore.

    Note: This plugin is intended to use in Create React App by default.

⬆ Back to Top

18. What are the differences between Flux and Redux?

    Below are the major differences between Flux and Redux

    Flux	Redux
    State is mutable	State is immutable
    The Store contains both state and change logic	The Store and change logic are separate
    There are multiple stores exist	There is only one store exist
    All the stores are disconnected and flat	Single store with hierarchical reducers
    It has a singleton dispatcher	There is no concept of dispatcher
    React components subscribe to the store	Container components uses connect function

⬆ Back to Top

19. What are the benefits of React Router V4?

    Below are the main benefits of React Router V4 module,

    1. In React Router v4(version 4), the API is completely about components. A router can be visualized as a single component(<BrowserRouter>) which wraps specific child router components(<Route>).
    2. You don't need to manually set history. The router module will take care history by wrapping routes with <BrowserRouter> component.
    3. The application size is reduced by adding only the specific router module(Web, core, or native)

⬆ Back to Top

20. Can you describe about componentDidCatch lifecycle method signature?

    The componentDidCatch lifecycle method is invoked after an error has been thrown by a descendant component. The method receives two parameters,

    1. error: - The error object which was thrown
    2. info: - An object with a componentStack key contains the information about which component threw the error.

    The method structure would be as follows

    componentDidCatch(error, info)
    

⬆ Back to Top

21. In which scenarios do error boundaries not catch errors?

    Below are the cases in which error boundaries don't work,

    1. Inside Event handlers
    2. Asynchronous code using setTimeout or requestAnimationFrame callbacks
    3. During Server side rendering
    4. When errors thrown in the error boundary code itself

⬆ Back to Top

22. What is the proper placement for error boundaries?

    The granularity of error boundaries usage is up to the developer based on project needs. You can follow either of these approaches,
    1. You can wrap top-level route components to display a generic error message for the entire application.
    2. You can also wrap individual components in an error boundary to protect them from crashing the rest of the application.

⬆ Back to Top

23. What is the benefit of component stack trace from error boundary?

    Apart from error messages and javascript stack, React16 will display the component stack trace with file names and line numbers using error boundary concept.

    For example, BuggyCounter component displays the component stack trace as below,

    

⬆ Back to Top

24. What are default props?

    The defaultProps can be defined as a property on the component to set the default values for the props. These default props are used when props not supplied(i.e., undefined props), but not for null or 0 as props. That means, If you provide null value then it remains null value. It's the same behavior with 0 as well.

    For example, let us create color default prop for the button component,

    function MyButton {
      // ...
    }
    
    MyButton.defaultProps = {
      color: "red",
    };
    

    If props.color is not provided then it will set the default value to 'red'. i.e, Whenever you try to access the color prop it uses the default value

    function MyButton() {
      return <MyButton /> // props.color will contain red value
    }
    

⬆ Back to Top

25. What is the purpose of displayName class property?

    The displayName string is used in debugging messages. Usually, you don’t need to set it explicitly because it’s inferred from the name of the function or class that defines the component. You might want to set it explicitly if you want to display a different name for debugging purposes or when you create a higher-order component.

    For example, To ease debugging, choose a display name that communicates that it’s the result of a withSubscription HOC.

    function withSubscription(WrappedComponent) {
      class WithSubscription extends React.Component {
        /* ... */
      }
      WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`
      return WithSubscription
    }
    function getDisplayName(WrappedComponent) {
      return WrappedComponent.displayName || WrappedComponent.name || "Component"
    }
    

⬆ Back to Top

26. What is the browser support for react applications?

    React supports all popular browsers, including Internet Explorer 9 and above, although some polyfills are required for older browsers such as IE 9 and IE 10. If you use es5-shim and es5-sham polyfill then it even support old browsers that doesn't support ES5 methods.

⬆ Back to Top

27. What is code-splitting?

    Code-Splitting is a feature supported by bundlers like Webpack and Browserify which can create multiple bundles that can be dynamically loaded at runtime. The react project supports code splitting via dynamic import() feature.

    For example, in the below code snippets, it will make moduleA.js and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button.

    moduleA.js

    const moduleA = "Hello"
    
    export { moduleA }
    

    App.js

    export default function App {
      function handleClick() {
        import("./moduleA")
          .then(({ moduleA }) => {
            // Use moduleA
          })
          .catch((err) => {
            // Handle failure
          });
      };
    
     return (
       <div>
         <button onClick={this.handleClick}>Load</button>
       </div>
     );
    }
    

import React, { Component } from "react"

class App extends Component {
  handleClick = () => {
    import("./moduleA")
      .then(({ moduleA }) => {
        // Use moduleA
      })
      .catch((err) => {
        // Handle failure
      })
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Load</button>
      </div>
    )
  }
}

export default App

⬆ Back to Top

28. What are Keyed Fragments?

    The Fragments declared with the explicit <React.Fragment> syntax may have keys. The general use case is mapping a collection to an array of fragments as below,

    function Glossary(props) {
      return (
        <dl>
          {props.items.map((item) => (
            // Without the `key`, React will fire a key warning
            <React.Fragment key={item.id}>
              <dt>{item.term}</dt>
              <dd>{item.description}</dd>
            </React.Fragment>
          ))}
        </dl>
      )
    }
    

    Note: key is the only attribute that can be passed to Fragment. In the future, there might be a support for additional attributes, such as event handlers.

⬆ Back to Top

29. Does React support all HTML attributes?

    As of React 16, both standard or custom DOM attributes are fully supported. Since React components often take both custom and DOM-related props, React uses the camelCase convention just like the DOM APIs.

    Let us take few props with respect to standard HTML attributes,

    <div tabIndex="-1" />      // Just like node.tabIndex DOM API
    <div className="Button" /> // Just like node.className DOM API
    <input readOnly={true} />  // Just like node.readOnly DOM API
    

    These props work similarly to the corresponding HTML attributes, with the exception of the special cases. It also support all SVG attributes.

⬆ Back to Top

30. When component props defaults to true?

    If you pass no value for a prop, it defaults to true. This behavior is available so that it matches the behavior of HTML.

    For example, below expressions are equivalent,

    <MyInput autocomplete />
    
    <MyInput autocomplete={true} />
    

    Note: It is not recommended to use this approach because it can be confused with the ES6 object shorthand (example, {name} which is short for {name: name})

⬆ Back to Top

31. What is NextJS and major features of it?

    Next.js is a popular and lightweight framework for static and server‑rendered applications built with React. It also provides styling and routing solutions. Below are the major features provided by NextJS,

32. Server-rendered by default

33. Automatic code splitting for faster page loads

34. Simple client-side routing (page based)

35. Webpack-based dev environment which supports (HMR)

36. Able to implement with Express or any other Node.js HTTP server

37. Customizable with your own Babel and Webpack configurations

⬆ Back to Top

32. How do you pass an event handler to a component?

    You can pass event handlers and other functions as props to child components. The functions can be passed to child component as below,

    function Button({ onClick }) {
      return <button onClick={onClick}>Download</button>
    }
    
    export default function downloadExcel() {
      function handleClick() {
        alert("Downloaded")
      }
    
      return <Button onClick={handleClick}></Button>
    }
    

⬆ Back to Top

33. How to prevent a function from being called multiple times?

    If you use an event handler such as onClick or onScroll and want to prevent the callback from being fired too quickly, then you can limit the rate at which callback is executed. This can be achieved in the below possible ways,

34. Throttling: Changes based on a time based frequency. For example, it can be used using _.throttle lodash function

35. Debouncing: Publish changes after a period of inactivity. For example, it can be used using _.debounce lodash function

36. RequestAnimationFrame throttling: Changes based on requestAnimationFrame. For example, it can be used using raf-schd lodash function

⬆ Back to Top

34. How JSX prevents Injection Attacks?

    React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered.

    For example, you can embed user input as below,

    const name = response.potentiallyMaliciousInput
    const element = <h1>{name}</h1>
    

    This way you can prevent XSS(Cross-site-scripting) attacks in the application.

⬆ Back to Top

35. How do you update rendered elements?

    You can update UI(represented by rendered element) by passing the newly created element to ReactDOM's render method.

    For example, lets take a ticking clock example, where it updates the time by calling render method multiple times,

    function tick() {
      const element = (
        <div>
          <h1>Hello, world!</h1>
          <h2>It is {new Date().toLocaleTimeString()}.</h2>
        </div>
      )
      ReactDOM.render(element, document.getElementById("root"))
    }
    
    setInterval(tick, 1000)
    

⬆ Back to Top

36. How do you say that props are readonly?

    When you declare a component as a function or a class, it must never modify its own props.

    Let us take a below capital function,

    function capital(amount, interest) {
      return amount + interest
    }
    

    The above function is called “pure” because it does not attempt to change their inputs, and always return the same result for the same inputs. Hence, React has a single rule saying "All React components must act like pure functions with respect to their props."

⬆ Back to Top

37. What are the conditions to safely use the index as a key?

    There are three conditions to make sure, it is safe use the index as a key.

38. The list and items are static– they are not computed and do not change

39. The items in the list have no ids

40. The list is never reordered or filtered.

⬆ Back to Top

38. Should keys be globally unique?

    The keys used within arrays should be unique among their siblings but they don’t need to be globally unique. i.e, You can use the same keys with two different arrays.

    For example, the below Book component uses two arrays with different arrays,

    function Book(props) {
      const index = (
        <ul>
          {props.pages.map((page) => (
            <li key={page.id}>{page.title}</li>
          ))}
        </ul>
      )
      const content = props.pages.map((page) => (
        <div key={page.id}>
          <h3>{page.title}</h3>
          <p>{page.content}</p>
          <p>{page.pageNumber}</p>
        </div>
      ))
      return (
        <div>
          {index}
          <hr />
          {content}
        </div>
      )
    }
    

⬆ Back to Top

39. What is the popular choice for form handling?

    Formik is a form library for react which provides solutions such as validation, keeping track of the visited fields, and handling form submission.

    In detail, You can categorize them as follows,

40. Getting values in and out of form state

41. Validation and error messages

42. Handling form submission

    It is used to create a scalable, performant, form helper with a minimal API to solve annoying stuff.

⬆ Back to Top

40. What are the advantages of formik over redux form library?

    Below are the main reasons to recommend formik over redux form library,

41. The form state is inherently short-term and local, so tracking it in Redux (or any kind of Flux library) is unnecessary.

42. Redux-Form calls your entire top-level Redux reducer multiple times ON EVERY SINGLE KEYSTROKE. This way it increases input latency for large apps.

43. Redux-Form is 22.5 kB minified gzipped whereas Formik is 12.7 kB

⬆ Back to Top

41. Why are you not required to use inheritance?

    In React, it is recommended to use composition over inheritance to reuse code between components. Both Props and composition give you all the flexibility you need to customize a component’s look and behavior explicitly and safely. Whereas, If you want to reuse non-UI functionality between components, it is suggested to extract it into a separate JavaScript module. Later components import it and use that function, object, or class, without extending it.

⬆ Back to Top

42. Can I use web components in react application?

    Yes, you can use web components in a react application. Even though many developers won't use this combination, it may require especially if you are using third-party UI components that are written using Web Components.

    For example, let us use Vaadin date picker web component as below,

    import "./App.css"
    import "@vaadin/vaadin-date-picker"
    export default function App() {
      return (
        <div className="App">
          <vaadin-date-picker label="When were you born?"></vaadin-date-picker>
        </div>
      )
    }
    

⬆ Back to Top

43. What is dynamic import?

    You can achieve code-splitting in your app using dynamic import.

    Let's take an example of addition,

44. Normal Import

    import { add } from "./math"
    console.log(add(10, 20))
    

45. Dynamic Import

    import("./math").then((math) => {
      console.log(math.add(10, 20))
    })
    

⬆ Back to Top

44. What are loadable components?

    With the release of React 18, React.lazy and Suspense are now available for server-side rendering. However, prior to React 18, it was recommended to use Loadable Components for code-splitting in a server-side rendered app because React.lazy and Suspense were not available for server-side rendering. Loadable Components lets you render a dynamic import as a regular component. For example, you can use Loadable Components to load the OtherComponent in a separate bundle like this:

    import loadable from "@loadable/component"
    
    const OtherComponent = loadable(() => import("./OtherComponent"))
    
    function MyComponent() {
      return (
        <div>
          <OtherComponent />
        </div>
      )
    }
    

    Now OtherComponent will be loaded in a separated bundle Loadable Components provides additional benefits beyond just code-splitting, such as automatic code reloading, error handling, and preloading. By using Loadable Components, you can ensure that your application loads quickly and efficiently, providing a better user experience for your users.

⬆ Back to Top

45. What is suspense component?

    React Suspense is a built-in feature that lets you defer rendering part of your component tree until some condition(asynchronous operation) is met—usually, data or code has finished loading. While waiting, Suspense lets you display a fallback UI like a spinner or placeholder.

46. Lazy loading components uses suspense feature,

    If the module containing the dynamic import is not yet loaded by the time parent component renders, you must show some fallback content while you’re waiting for it to load using a loading indicator. This can be done using Suspense component.

    const OtherComponent = React.lazy(() => import("./OtherComponent"))
    
    function MyComponent() {
      return (
        <div>
          <Suspense fallback={<div>Loading...</div>}>
            <OtherComponent />
          </Suspense>
        </div>
      )
    }
    

    The above component shows fallback UI instead real component until OtherComponent is fully loaded.

47. As an another example, suspend until async data(data fetching) is ready

    function UserProfile() {
      const user = use(fetchUser()) // throws a promise internally
      return <div>{user.name}</div>
    }
    
    function App() {
      return (
        <Suspense fallback={<div>Loading user...</div>}>
          <UserProfile />
        </Suspense>
      )
    }
    

⬆ Back to Top

46. What is route based code splitting?

    One of the best place to do code splitting is with routes. The entire page is going to re-render at once so users are unlikely to interact with other elements in the page at the same time. Due to this, the user experience won't be disturbed.

    Let us take an example of route based website using libraries like React Router with React.lazy,

    import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
    import React, { Suspense, lazy } from "react"
    
    const Home = lazy(() => import("./routes/Home"))
    const About = lazy(() => import("./routes/About"))
    
    const App = () => (
      <Router>
        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
          </Switch>
        </Suspense>
      </Router>
    )
    

    In the above code, the code splitting will happen at each route level.

⬆ Back to Top

47. What is the purpose of default value in context?

    The defaultValue argument is only used when a component does not have a matching Provider above it in the tree. This can be helpful for testing components in isolation without wrapping them.

    Below code snippet provides default theme value as Luna.

    const MyContext = React.createContext(defaultValue)
    

⬆ Back to Top

48. What is diffing algorithm?

    React needs to use algorithms to find out how to efficiently update the UI to match the most recent tree. The diffing algorithms is generating the minimum number of operations to transform one tree into another. However, the algorithms have a complexity in the order of O(n³) where n is the number of elements in the tree.

    In this case, displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive. Instead, React implements a heuristic O(n) algorithm based on two assumptions:

49. Two elements of different types will produce different trees.

50. The developer can hint at which child elements may be stable across different renders with a key prop.

⬆ Back to Top

49. What are the rules covered by diffing algorithm?

    When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements. It covers the below rules during reconciliation algorithm,

50. Elements Of Different Types: Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch. For example, elements <a> to <img>, or from <Article> to <Comment> of different types lead a full rebuild.

51. DOM Elements Of The Same Type: When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM node, and only updates the changed attributes. Lets take an example with same DOM elements except className attribute,

    <div className="show" title="ReactJS" />
    
    <div className="hide" title="ReactJS" />
    

52. Component Elements Of The Same Type: When a component updates, the instance stays the same, so that state is maintained across renders. React updates the props of the underlying component instance to match the new element, and calls componentWillReceiveProps() and componentWillUpdate() on the underlying instance. After that, the render() method is called and the diff algorithm recurses on the previous result and the new result.

53. Recursing On Children: when recursing on the children of a DOM node, React just iterates over both lists of children at the same time and generates a mutation whenever there’s a difference. For example, when adding an element at the end of the children, converting between these two trees works well.

    <ul>
      <li>first</li>
      <li>second</li>
    </ul>
    
    <ul>
      <li>first</li>
      <li>second</li>
      <li>third</li>
    </ul>
    
    

54. Handling keys: React supports a key attribute. When children have keys, React uses the key to match children in the original tree with children in the subsequent tree. For example, adding a key can make the tree conversion efficient,

    <ul>
      <li key="2015">Duke</li>
      <li key="2016">Villanova</li>
    </ul>
    
    <ul>
      <li key="2014">Connecticut</li>
      <li key="2015">Duke</li>
      <li key="2016">Villanova</li>
    </ul>
    

⬆ Back to Top

50. When do you need to use refs?

    There are few use cases to go for refs,

51. Managing focus, text selection, or media playback.

52. Triggering imperative animations.

53. Integrating with third-party DOM libraries.

⬆ Back to Top

51. Must prop be named as render for render props?

    Even though the pattern named render props, you don’t have to use a prop named render to use this pattern. i.e, Any prop that is a function that a component uses to know what to render is technically a “render prop”. Lets take an example with the children prop for render props,

    <Mouse
      children={(mouse) => (
        <p>
          The mouse position is {mouse.x}, {mouse.y}
        </p>
      )}
    />
    

    Actually children prop doesn’t need to be named in the list of “attributes” in JSX element. Instead, you can keep it directly inside element,

    <Mouse>
      {(mouse) => (
        <p>
          The mouse position is {mouse.x}, {mouse.y}
        </p>
      )}
    </Mouse>
    

    While using this above technique(without any name), explicitly state that children should be a function in your propTypes.

    Mouse.propTypes = {
      children: PropTypes.func.isRequired,
    }
    

⬆ Back to Top

52. What are the problems of using render props with pure components?

    If you create a function inside a render method, it negates the purpose of pure component. Because the shallow prop comparison will always return false for new props, and each render in this case will generate a new value for the render prop. You can solve this issue by defining the render function as instance method.

⬆ Back to Top

53. What is windowing technique?

    Windowing is a technique that only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created. If your application renders long lists of data then this technique is recommended. Both react-window and react-virtualized are popular windowing libraries which provides several reusable components for displaying lists, grids, and tabular data.

⬆ Back to Top

54. How do you print falsy values in JSX?

    The falsy values such as false, null, undefined, and true are valid children but they don't render anything. If you still want to display them then you need to convert it to string. Let's take an example on how to convert to a string,

    <div>My JavaScript variable is {String(myVariable)}.</div>
    

⬆ Back to Top

55. What is the typical use case of portals?

    React Portals are primarily used to render UI components such as modals, tooltips, dropdowns, hovercards, and notifications outside of their parent component's DOM tree. This helps avoid common CSS issues caused by parent elements, such as:

    • **overflow: hidden** on parent elements clipping or hiding child elements like modals or tooltips,
    • stacking context and **z-index** conflicts created by parent containers that prevent child elements from appearing above other content.

    That means, you need to visually “break out” of its container. By rendering these UI elements into a separate DOM node (often directly under <body>), portals ensure they appear above all other content and are not restricted by the parent’s CSS or layout constraints, resulting in correct positioning and visibility regardless of the parent’s styling.

⬆ Back to Top

56. How do you set default value for uncontrolled component?

    In React, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you might want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue attribute instead of value.

    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <label>
            User Name:
            <input
              defaultValue="John"
              type="text"
              ref={this.input} />
          </label>
          <input type="submit" value="Submit" />
        </form>
      );
    }
    

    The same applies for select and textArea inputs. But you need to use defaultChecked for checkbox and radio inputs.

⬆ Back to Top

57. What is your favorite React stack?

    Even though the tech stack varies from developer to developer, the most popular stack is used in react boilerplate project code. It mainly uses Redux and redux-saga for state management and asynchronous side-effects, react-router for routing purpose, styled-components for styling react components, axios for invoking REST api, and other supported stack such as webpack, reselect, ESNext, Babel. You can clone the project https://github.com/react-boilerplate/react-boilerplate and start working on any new react project.

⬆ Back to Top

58. What is the difference between Real DOM and Virtual DOM?

    Below are the main differences between Real DOM and Virtual DOM,

    Real DOM	Virtual DOM
    Updates are slow	Updates are fast
    DOM manipulation is very expensive.	DOM manipulation is very easy
    You can update HTML directly.	You Can’t directly update HTML
    It causes too much of memory wastage	There is no memory wastage
    Creates a new DOM if element updates	It updates the JSX if element update

⬆ Back to Top

59. How to add Bootstrap to a react application?

    Bootstrap can be added to your React app in a three possible ways,

60. Using the Bootstrap CDN: This is the easiest way to add bootstrap. Add both bootstrap CSS and JS resources in a head tag.

61. Bootstrap as Dependency: If you are using a build tool or a module bundler such as Webpack, then this is the preferred option for adding Bootstrap to your React application

    npm install bootstrap
    

62. React Bootstrap Package: In this case, you can add Bootstrap to our React app is by using a package that has rebuilt Bootstrap components to work particularly as React components. Below packages are popular in this category,

    1. react-bootstrap
    2. reactstrap

⬆ Back to Top

60. Can you list down top websites or applications using react as front end framework?

    Below are the top 10 websites using React as their front-end framework,

61. Facebook

62. Uber

63. Instagram

64. WhatsApp

65. Khan Academy

66. Airbnb

67. Dropbox

68. Flipboard

69. Netflix

70. PayPal

⬆ Back to Top

61. Is it recommended to use CSS In JS technique in React?

    React does not have any opinion about how styles are defined but if you are a beginner then good starting point is to define your styles in a separate *.css file as usual and refer to them using className. This functionality is not part of React but came from third-party libraries. But If you want to try a different approach(CSS-In-JS) then styled-components library is a good option.

⬆ Back to Top

62. Do I need to rewrite all my class components with hooks?

    No. But you can try Hooks in a few components(or new components) without rewriting any existing code. Because there are no plans to remove classes in ReactJS.

⬆ Back to Top

63. What is useEffect hook? How to fetch data with React Hooks?

    The useEffect hook is a React Hook that lets you perform side effects in function components. Side effects are operations that interact with the outside world or system and aren't directly related to rendering UI — such as fetching data, setting up subscriptions, timers, manually manipulating the DOM, etc.

    In function components, useEffect replaces the class component lifecycle methods(componentDidMount, componentDidUpdate and componentWillUnmount) with a single, unified API.

    Syntax

    useEffect(() => {
      // Side effect logic here
    
      return () => {
        // Cleanup logic (optional)
      }
    }, [dependencies])
    

    This effect hook can be used to fetch data from an API and to set the data in the local state of the component with the useState hook’s update function.

    Here is an example of fetching a list of ReactJS articles from an API using fetch.

    import React from "react"
    
    function App() {
      const [data, setData] = React.useState({ hits: [] })
    
      React.useEffect(() => {
        fetch("http://hn.algolia.com/api/v1/search?query=react")
          .then((response) => response.json())
          .then((data) => setData(data))
      }, [])
    
      return (
        <ul>
          {data.hits.map((item) => (
            <li key={item.objectID}>
              <a href={item.url}>{item.title}</a>
            </li>
          ))}
        </ul>
      )
    }
    
    export default App
    

    A popular way to simplify this is by using the library axios.

    We provided an empty array as second argument to the useEffect hook to avoid activating it on component updates. This way, it only fetches on component mount.

⬆ Back to Top

64. Is Hooks cover all use cases for classes?

    Hooks doesn't cover all use cases of classes but there is a plan to add them soon. Currently there are no Hook equivalents to the uncommon getSnapshotBeforeUpdate and componentDidCatch lifecycles yet.

⬆ Back to Top

65. What is the stable release for hooks support?

    React includes a stable implementation of React Hooks in 16.8 release for below packages

66. React DOM

67. React DOM Server

68. React Test Renderer

69. React Shallow Renderer

⬆ Back to Top

66. Why do we use array destructuring (square brackets notation) in useState?

    When we declare a state variable with useState, it returns a pair — an array with two items. The first item is the current value, and the second is a function that updates the value. Using [0] and [1] to access them is a bit confusing because they have a specific meaning. This is why we use array destructuring instead.

    For example, the array index access would look as follows:

    var userStateVariable = useState("userProfile") // Returns an array pair
    var user = userStateVariable[0] // Access first item
    var setUser = userStateVariable[1] // Access second item
    

    Whereas with array destructuring the variables can be accessed as follows:

    const [user, setUser] = useState("userProfile")
    

    ⬆ Back to Top

67. What are the sources used for introducing hooks?

    Hooks got the ideas from several different sources. Below are some of them,

68. Previous experiments with functional APIs in the react-future repository

69. Community experiments with render prop APIs such as Reactions Component

70. State variables and state cells in DisplayScript.

71. Subscriptions in Rx.

72. Reducer components in ReasonReact.

⬆ Back to Top

68. How do you access imperative API of web components?

    Web Components often expose an imperative API to implement its functions. You will need to use a ref to interact with the DOM node directly if you want to access imperative API of a web component. But if you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.

⬆ Back to Top

69. What is formik?

    Formik is a small react form library that helps you with the three major problems,

70. Getting values in and out of form state

71. Validation and error messages

72. Handling form submission

⬆ Back to Top

70. What are typical middleware choices for handling asynchronous calls in Redux?

    Some of the popular middleware choices for handling asynchronous calls in Redux eco system are Redux Thunk, Redux Promise, Redux Saga.

⬆ Back to Top

71. Do browsers understand JSX code?

    No, browsers can't understand JSX code. You need a transpiler to convert your JSX to regular Javascript that browsers can understand. The most widely used transpiler right now is Babel.

⬆ Back to Top

72. Describe about data flow in react?

    React implements one-way reactive data flow using props which reduce boilerplate and is easier to understand than traditional two-way data binding.

⬆ Back to Top

73. What is MobX?

    MobX is a simple, scalable and battle tested state management solution for applying functional reactive programming (TFRP). For ReactJS application, you need to install below packages,

    npm install mobx --save
    npm install mobx-react --save
    

⬆ Back to Top

74. What are the differences between Redux and MobX?

    Below are the main differences between Redux and MobX,

    Topic	Redux	MobX
    Definition	It is a javascript library for managing the application state	It is a library for reactively managing the state of your applications
    Programming	It is mainly written in ES6	It is written in JavaScript(ES5)
    Data Store	There is only one large store exist for data storage	There is more than one store for storage
    Usage	Mainly used for large and complex applications	Used for simple applications
    Performance	Need to be improved	Provides better performance
    How it stores	Uses JS Object to store	Uses observable to store the data

⬆ Back to Top

75. Should I learn ES6 before learning ReactJS?

    No, you don’t have to learn es2015/es6 to learn react. But you may find many resources or React ecosystem uses ES6 extensively. Let's see some of the frequently used ES6 features,

76. Destructuring: To get props and use them in a component

    // in es 5
    var someData = this.props.someData
    var dispatch = this.props.dispatch
    
    // in es6
    const { someData, dispatch } = this.props
    

77. Spread operator: Helps in passing props down into a component

    // in es 5
    <SomeComponent someData={this.props.someData} dispatch={this.props.dispatch} />
    
    // in es6
    <SomeComponent {...this.props} />
    

78. Arrow functions: Makes compact syntax

    // es 5
    var users = usersList.map(function (user) {
      return <li>{user.name}</li>
    })
    // es 6
    const users = usersList.map((user) => <li>{user.name}</li>)
    

⬆ Back to Top

76. What is Concurrent Rendering?

    The Concurrent rendering makes React apps to be more responsive by rendering component trees without blocking the main UI thread. It allows React to interrupt a long-running render to handle a high-priority event. i.e, When you enabled concurrent Mode, React will keep an eye on other tasks that need to be done, and if there's something with a higher priority it will pause what it is currently rendering and let the other task finish first. You can enable this in two ways,

    // 1. Part of an app by wrapping with ConcurrentMode
    ;<React.unstable_ConcurrentMode>
      <Something />
    </React.unstable_ConcurrentMode>
    
    // 2. Whole app using createRoot
    ReactDOM.unstable_createRoot(domNode).render(<App />)
    

⬆ Back to Top

77. What is the difference between async mode and concurrent mode?

    Both refers the same thing. Previously concurrent Mode being referred to as "Async Mode" by React team. The name has been changed to highlight React’s ability to perform work on different priority levels. So it avoids the confusion from other approaches to Async Rendering.

⬆ Back to Top

78. Can I use javascript urls in react16.9?

    Yes, you can use javascript: URLs but it will log a warning in the console. Because URLs starting with javascript: are dangerous by including unsanitized output in a tag like <a href> and create a security hole.

    const companyProfile = {
      website: "javascript: alert('Your website is hacked')",
    }
    // It will log a warning
    ;<a href={companyProfile.website}>More details</a>
    

    Remember that the future versions will throw an error for javascript URLs.

⬆ Back to Top

79. What is the purpose of eslint plugin for hooks?

    The ESLint plugin enforces rules of Hooks to avoid bugs. It assumes that any function starting with ”use” and a capital letter right after it is a Hook. In particular, the rule enforces that,

80. Calls to Hooks are either inside a PascalCase function (assumed to be a component) or another useSomething function (assumed to be a custom Hook).

81. Hooks are called in the same order on every render.

⬆ Back to Top

80. What is the difference between Imperative and Declarative in React?

    Imagine a simple UI component, such as a "Like" button. When you tap it, it turns blue if it was previously grey, and grey if it was previously blue.

    The imperative way of doing this would be:

    if (user.likes()) {
      if (hasBlue()) {
        removeBlue()
        addGrey()
      } else {
        removeGrey()
        addBlue()
      }
    }
    

    Basically, you have to check what is currently on the screen and handle all the changes necessary to redraw it with the current state, including undoing the changes from the previous state. You can imagine how complex this could be in a real-world scenario.

    In contrast, the declarative approach would be:

    if (this.state.liked) {
      return <blueLike />
    } else {
      return <greyLike />
    }
    

    Because the declarative approach separates concerns, this part of it only needs to handle how the UI should look in a specific state, and is therefore much simpler to understand.

⬆ Back to Top

81. What are the benefits of using TypeScript with ReactJS?

    Below are some of the benefits of using TypeScript with ReactJS,

82. It is possible to use latest JavaScript features

83. Use of interfaces for complex type definitions

84. IDEs such as VS Code was made for TypeScript

85. Avoid bugs with the ease of readability and Validation

    ⬆ Back to Top

86. How do you make sure that user remains authenticated on page refresh while using Context API State Management?

    When a user logs in and reload, to persist the state generally we add the load user action in the useEffect hooks in the main App.js. While using Redux, loadUser action can be easily accessed.

    App.js

    import { loadUser } from "../actions/auth"
    store.dispatch(loadUser())
    

    • But while using Context API, to access context in App.js, wrap the AuthState in index.js so that App.js can access the auth context. Now whenever the page reloads, no matter what route you are on, the user will be authenticated as loadUser action will be triggered on each re-render.

    index.js

    import React from "react"
    import ReactDOM from "react-dom"
    import App from "./App"
    import AuthState from "./context/auth/AuthState"
    
    ReactDOM.render(
      <React.StrictMode>
        <AuthState>
          <App />
        </AuthState>
      </React.StrictMode>,
      document.getElementById("root")
    )
    

    App.js

    const authContext = useContext(AuthContext)
    
    const { loadUser } = authContext
    
    useEffect(() => {
      loadUser()
    }, [])
    

    loadUser

    const loadUser = async () => {
      const token = sessionStorage.getItem("token")
    
      if (!token) {
        dispatch({
          type: ERROR,
        })
      }
      setAuthToken(token)
    
      try {
        const res = await axios("/api/auth")
    
        dispatch({
          type: USER_LOADED,
          payload: res.data.data,
        })
      } catch (err) {
        console.error(err)
      }
    }
    

⬆ Back to Top

83. What are the benefits of new JSX transform?

    There are three major benefits of new JSX transform,

84. It is possible to use JSX without importing React packages

85. The compiled output might improve the bundle size in a small amount

86. The future improvements provides the flexibility to reduce the number of concepts to learn React.

⬆ Back to Top

84. How is the new JSX transform different from old transform??

    The new JSX transform doesn’t require React to be in scope. i.e, You don't need to import React package for simple scenarios.

    Let's take an example to look at the main differences between the old and the new transform,

    Old Transform:

    import React from "react"
    
    function App() {
      return <h1>Good morning!!</h1>
    }
    

    Now JSX transform convert the above code into regular JavaScript as below,

    import React from "react"
    
    function App() {
      return React.createElement("h1", null, "Good morning!!")
    }
    

    New Transform:

    The new JSX transform doesn't require any React imports

    function App() {
      return <h1>Good morning!!</h1>
    }
    

    Under the hood JSX transform compiles to below code

    import { jsx as _jsx } from "react/jsx-runtime"
    
    function App() {
      return _jsx("h1", { children: "Good morning!!" })
    }
    

    Note: You still need to import React to use Hooks.

⬆ Back to Top

85. What are React Server components?

    React Server Component is a way to write React component that gets rendered in the server-side with the purpose of improving React app performance. These components allow us to load components from the backend.

    Note: React Server Components is still under development and not recommended for production yet.

⬆ Back to Top

86. What is prop drilling?

    Prop Drilling is the process by which you pass data from one component of the React Component tree to another by going through other components that do not need the data but only help in passing it around.

⬆ Back to Top

87. What is the difference between useState and useRef hook?

88. useState causes components to re-render after state updates whereas useRef doesn’t cause a component to re-render when the value or state changes. Essentially, useRef is like a “box” that can hold a mutable value in its (.current) property.
89. useState allows us to update the state inside components. While useRef allows referencing DOM elements and tracking values.

⬆ Back to Top

88. What is a wrapper component?

    A wrapper in React is a component that wraps or surrounds another component or group of components. It can be used for a variety of purposes such as adding additional functionality, styling, or layout to the wrapped components.

    For example, consider a simple component that displays a message:

    const Message = ({ text }) => {
      return <p>{text}</p>
    }
    

    We can create a wrapper component that will add a border to the message component:

    const MessageWrapper = (props) => {
      return (
        <div style={{ border: "1px solid black" }}>
          <Message {...props} />
        </div>
      )
    }
    

    Now we can use the MessageWrapper component instead of the Message component and the message will be displayed with a border:

    <MessageWrapper text="Hello World" />
    

    Wrapper component can also accept its own props and pass them down to the wrapped component, for example, we can create a wrapper component that will add a title to the message component:

    const MessageWrapperWithTitle = ({ title, ...props }) => {
      return (
        <div>
          <h3>{title}</h3>
          <Message {...props} />
        </div>
      )
    }
    

    Now we can use the MessageWrapperWithTitle component and pass title props:

    <MessageWrapperWithTitle title="My Message" text="Hello World" />
    

    This way, the wrapper component can add additional functionality, styling, or layout to the wrapped component while keeping the wrapped component simple and reusable.

⬆ Back to Top

89. What are the differences between useEffect and useLayoutEffect hooks?

    useEffect and useLayoutEffect are both React hooks that can be used to synchronize a component with an external system, such as a browser API or a third-party library. However, there are some key differences between the two:

    • Timing: useEffect runs after the browser has finished painting, while useLayoutEffect runs synchronously before the browser paints. This means that useLayoutEffect can be used to measure and update layout in a way that feels more synchronous to the user.

    • Browser Paint: useEffect allows browser to paint the changes before running the effect, hence it may cause some visual flicker. useLayoutEffect synchronously runs the effect before browser paints and hence it will avoid visual flicker.

    • Execution Order: The order in which multiple useEffect hooks are executed is determined by React and may not be predictable. However, the order in which multiple useLayoutEffect hooks are executed is determined by the order in which they were called.

    • Error handling: useEffect has a built-in mechanism for handling errors that occur during the execution of the effect, so that it does not crash the entire application. useLayoutEffect does not have this mechanism, and errors that occur during the execution of the effect will crash the entire application.

    In general, it's recommended to use useEffect as much as possible, because it is more performant and less prone to errors. useLayoutEffect should only be used when you need to measure or update layout, and you can't achieve the same result using useEffect.

⬆ Back to Top

90. What are the differences between Functional and Class Components?

    There are two different ways to create components in ReactJS. The main differences are listed down as below,

1. Syntax:

The class components uses ES6 classes to create the components. It uses render function to display the HTML content in the webpage.

The syntax for class component looks like as below.

class App extends React.Component {
  render() {
    return <h1>This is a class component</h1>
  }
}

Note: The Pascal Case is the recommended approach to provide naming to a component.

Functional component has been improved over the years with some added features like Hooks. Here is a syntax for functional component.

function App() {
  return (
    <div className="App">
      <h1>Hello, I'm a function component</h1>
    </div>
  )
}

2. State:

State contains information or data about a component which may change over time.

In class component, you can update the state when a user interacts with it or server updates the data using the setState() method. The initial state is going to be assigned in the Constructor() method using the this.state object and it is possible to assign different data types such as string, boolean, numbers, etc.

A simple example showing how we use the setState() and constructor():

class App extends Component {
  constructor() {
    super()
    this.state = {
      message: "This is a class component",
    }
  }
  updateMessage() {
    this.setState({
      message: "Updating the class component",
    })
  }
  render() {
    return (
      <>
        <h1>{this.state.message}</h1>
        <button
          onClick={() => {
            this.updateMessage()
          }}
        >
          Click!!
        </button>
      </>
    )
  }
}

You didn't use state in functional components because it was only supported in class components. But over the years hooks have been implemented in functional components which enables to use state too.

The useState() hook can used to implement state in functional components. It returns an array with two items: the first item is current state and the next one is a function (setState) that updates the value of the current state.

Let's see an example to demonstrate the state in functional components,

function App() {
  const [message, setMessage] = useState("This is a functional component")
  const updateMessage = () => {
    setMessage("Updating the functional component")
  }
  return (
    <div className="App">
      <h1>{message} </h1>
      <button onClick={updateMessage}>Click me!!</button>
    </div>
  )
}

3. Props:

Props are referred to as "properties". The props are passed into React component just like arguments passed to a function. In other words, they are similar to HTML attributes.

The props are accessible in child class component using this.props as shown in below example,

class Child extends React.Component {
  render() {
    return <h1> This is a functional component and component name is {this.props.name} </h1>
  }
}

class Parent extends React.Component {
  render() {
    return (
      <div className="Parent">
        <Child name="First child component" />
        <Child name="Second child component" />
      </div>
    )
  }
}

Props in functional components are similar to that of the class components but the difference is the absence of 'this' keyword.

function Child(props) {
  return <h1>This is a child component and the component name is{props.name}</h1>
}

function Parent() {
  return (
    <div className="Parent">
      <Child name="First child component" />
      <Child name="Second child component" />
    </div>
  )
}

⬆ Back to Top

91. What is strict mode in React?

React.StrictMode is a useful component for highlighting potential problems in an application. Just like <Fragment>, <StrictMode> does not render any extra DOM elements. It activates additional checks and warnings for its descendants. These checks apply for development mode only.

import { StrictMode } from "react"

function App() {
  return (
    <div>
      <Header />
      <StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </StrictMode>
      <Header />
    </div>
  )
}

In the example above, the strict mode checks apply to <ComponentOne> and <ComponentTwo> components only. i.e., Part of the application only.

Note: Frameworks such as NextJS has this flag enabled by default.

⬆ Back to Top

92. What is the benefit of strict mode?

The <StrictMode> will be helpful in the below cases,

231. To find the bugs caused by impure rendering where the components will re-render twice.
232. To find the bugs caused by missing cleanup of effects where the components will re-run effects one more extra time.
233. Identifying components with unsafe lifecycle methods.
234. Warning about legacy string ref API usage.
235. Detecting unexpected side effects.
236. Detecting legacy context API.
237. Warning about deprecated findDOMNode usage

⬆ Back to Top

93. Why does strict mode render twice in React?

StrictMode renders components twice in development mode(not production) in order to detect any problems with your code and warn you about those problems. This is used to detect accidental side effects in the render phase. If you used create-react-app development tool then it automatically enables StrictMode by default.

const root = createRoot(document.getElementById("root"))
root.render(
  <StrictMode>
    <App />
  </StrictMode>
)

If you want to disable this behavior then you can simply remove strict mode.

const root = createRoot(document.getElementById("root"))
root.render(<App />)

To detect side effects the following functions are invoked twice:

1. Function component bodies, excluding the code inside event handlers.
2. Functions passed to useState, useMemo, or useReducer (any other Hook)
3. Class component's constructor, render, and shouldComponentUpdate methods
4. Class component static getDerivedStateFromProps method
5. State updater functions

⬆ Back to Top

94. What are the rules of JSX?

The below 3 rules needs to be followed while using JSX in a react application.

1. Return a single root element: If you are returning multiple elements from a component, wrap them in a single parent element. Otherwise you will receive the below error in your browser console.

html Adjacent JSX elements must be wrapped in an enclosing tag.

1. All the tags needs to be closed: Unlike HTML, all tags needs to closed explicitly with in JSX. This rule applies for self-closing tags(like hr, br and img tags) as well.
2. Use camelCase naming: It is suggested to use camelCase naming for attributes in JSX. For example, the common attributes of HTML elements such as class, tabindex will be used as className and tabIndex. Note: There is an exception for aria-* and data-* attributes which should be lower cased all the time.

⬆ Back to Top

95. What is the reason behind multiple JSX tags to be wrapped?

Behind the scenes, JSX is transformed into plain javascript objects. It is not possible to return two or more objects from a function without wrapping into an array. This is the reason you can't simply return two or more JSX tags from a function without wrapping them into a single parent tag or a Fragment.

⬆ Back to Top

96. How do you prevent mutating array variables?

The preexisting variables outside of the function scope including state, props and context leads to a mutation and they result in unpredictable bugs during the rendering stage. The below points should be taken care while working with arrays variables.

1. You need to take copy of the original array and perform array operations on it for the rendering purpose. This is called local mutation.
2. Avoid triggering mutation methods such as push, pop, sort and reverse methods on original array. It is safe to use filter, map and slice method because they create a new array.

⬆ Back to Top

97. What are capture phase events?

The onClickCapture React event is helpful to catch all the events of child elements irrespective of event propagation logic or even if the events propagation stopped. This is useful if you need to log every click events for analytics purpose.

For example, the below code triggers the click event of parent first followed by second level child eventhough leaf child button elements stops the propagation.

<div onClickCapture={() => alert("parent")}>
  <div onClickCapture={() => alert("child")}>
    <button onClick={(e) => e.stopPropagation()} />
    <button onClick={(e) => e.stopPropagation()} />
  </div>
</div>

The event propagation for the above code snippet happens in the following order:

1. It travels downwards in the DOM tree by calling all onClickCapture event handlers.

2. It executes onClick event handler on the target element.

3. It travels upwards in the DOM tree by call all onClick event handlers above to it.

4. How does React updates screen in an application?

React updates UI in three steps,

1. Triggering or initiating a render: The component is going to triggered for render in two ways.
2. Initial render: When the app starts, you can trigger the initial render by calling creatRoot with the target DOM node followed by invoking component's render method. For example, the following code snippet renders App component on root DOM node.

import { createRoot } from "react-dom/client"

const root = createRoot(document.getElementById("root"))
root.render(<App />)

2. Re-render when the state updated: When you update the component state using the state setter function, the componen't state automatically queues for a render.

3. Rendering components: After triggering a render, React will call your components to display them on the screen. React will call the root component for initial render and call the function component whose state update triggered the render. This is a recursive process for all nested components of the target component.

4. Commit changes to DOM: After calling components, React will modify the DOM for initial render using appendChild() DOM API and apply minimal necessary DOM updates for re-renders based on differences between rerenders.

⬆ Back to Top

99. How does React batch multiple state updates?

React prevents component from re-rendering for each and every state update by grouping multiple state updates within an event handler. This strategy improves the application performance and this process known as batching. The older version of React only supported batching for browser events whereas React18 supported for asynchronous actions, timeouts and intervals along with native events. This improved version of batching is called automatic batching.

Let's demonstrate this automatic batching feature with a below example.

import { useState } from "react"

export default function BatchingState() {
  const [count, setCount] = useState(0)
  const [message, setMessage] = useState("batching")

  console.log("Application Rendered")

  const handleAsyncFetch = () => {
    fetch("https://jsonplaceholder.typicode.com/users/1").then(() => {
      // Automatic Batching re-render only once
      setCount(count + 1)
      setMessage("users fetched")
    })
  }

  return (
    <>
      <h1>{count}</h1>
      <button onClick={handleAsyncFetch}>Click Me!</button>
    </>
  )
}

The preceding code updated two state variables with in an event handler. However, React will perform automatic batching feature and the component will be re-rendered only once for better performance.

⬆ Back to Top

100. Is it possible to prevent automatic batching?

Yes, it is possible to prevent automatic batching default behavior. There might be cases where you need to re-render your component after each state update or updating one state depends on another state variable. Considering this situation, React introduced flushSync method from react-dom API for the usecases where you need to flush state updates to DOM immediately.

The usage of flushSync method within an onClick event handler will be looking like as below,

import { flushSync } from "react-dom"

const handleClick = () => {
  flushSync(() => {
    setClicked(!clicked) //Component will create a re-render here
  })

  setCount(count + 1) // Component will create a re-render again here
}

In the above click handler, React will update DOM at first using flushSync and second time updates DOM because of the counter setter function by avoiding automatic batching.

⬆ Back to Top

101. What is React hydration?

React hydration is used to add client-side JavaScript interactivity to pre-rendered static HTML generated by the server. It is used only for server-side rendering(SSR) to enhance the initial rendering time and make it SEO friendly application. This hydration acts as a bridge to reduce the gap between server side and client-side rendering.

After the page loaded with generated static HTML, React will add application state and interactivity by attaching all event handlers for the respective elements. Let's demonstrate this with an example.

Consider that React DOM API(using renderToString) generated HTML for <App> component which contains <button> element to increment the counter.

import {useState} from 'react';
import { renderToString } from 'react-dom/server';

export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <h1>Counter</h1>
    <button onClick={() => setCount(prevCount => prevCount + 1)}>
      {count} times
    </button>
    );
}

const html = renderToString(<App />);

The above code generates the below HTML with a header text and button component without any interactivity.

<h1>Counter</h1>
<button>
  <!-- -->0<!-- -->
  times
</button>

At this stage hydrateRoot API can be used to perform hydration by attaching onClick event handler.

import { hydrateRoot } from "react-dom/client"
import App from "./App.js"

hydrateRoot(document.getElementById("root"), <App />)

After this step, you are able to run React application on server-side and hydrating the javascript bundle on client-side for smooth user experience and SEO purposes.

⬆ Back to Top

102. How do you update objects inside state?

You cannot update the objects which exists in the state directly. Instead, you should create a fresh new object (or copy from the existing object) and update the latest state using the newly created object. Eventhough JavaScript objects are mutable, you need to treat objects inside state as read-only while updating the state.

Let's see this comparison with an example. The issue with regular object mutation approach can be described by updating the user details fields of Profile component. The properties of Profile component such as firstName, lastName and age details mutated in an event handler as shown below.

import { useState } from "react"

export default function Profile() {
  const [user, setUser] = useState({
    firstName: "John",
    lastName: "Abraham",
    age: 30,
  })

  function handleFirstNameChange(e) {
    user.firstName = e.target.value
  }

  function handleLastNameChange(e) {
    user.lastName = e.target.value
  }

  function handleAgeChange(e) {
    user.age = e.target.value
  }

  return (
    <>
      <label>
        First name:
        <input value={user.firstName} onChange={handleFirstNameChange} />
      </label>
      <label>
        Last name:
        <input value={user.lastName} onChange={handleLastNameChange} />
      </label>
      <label>
        Age:
        <input value={user.age} onChange={handleAgeChange} />
      </label>
      <p>
        Profile:
        {person.firstName} {person.lastName} ({person.age})
      </p>
    </>
  )
}

Once you run the application with above user profile component, you can observe that user profile details won't be update upon entering the input fields. This issue can be fixed by creating a new copy of object which includes existing properties through spread syntax(...obj) and add changed values in a single event handler itself as shown below.

handleProfileChange(e) {
  setUser({
  ...user,
    [e.target.name]: e.target.value
  });
}

The above event handler is concise instead of maintaining separate event handler for each field. Now, UI displays the updated field values as expected without an issue.

⬆ Back to Top

103. How do you update nested objects inside state?

You cannot simply use spread syntax for all kinds of objects inside state. Because spread syntax is shallow and it copies properties for one level deep only. If the object has nested object structure, UI doesn't work as expected with regular JavaScript nested property mutation. Let's demonstrate this behavior with an example of User object which has address nested object inside of it.

const user = {
  name: "John",
  age: 32,
  address: {
    country: "Singapore",
    postalCode: 440004,
  },
}

If you try to update the country nested field in a regular javascript fashion(as shown below) then user profile screen won't be updated with latest value.

user.address.country = "Germany"

This issue can be fixed by flattening all the fields into a top-level object or create a new object for each nested object and point it to it's parent object. In this example, first you need to create copy of address object and update it with the latest value. Later, the address object should be linked to parent user object something like below.

setUser({
  ...user,
  address: {
    ...user.address,
    country: "Germany",
  },
})

This approach is bit verbose and not easy for deep hierarchical state updates. But this workaround can be used for few levels of nested objects without much hassle.

⬆ Back to Top

104. How do you update arrays inside state?

Eventhough arrays in JavaScript are mutable in nature, you need to treat them as immutable while storing them in a state. That means, similar to objects, the arrays cannot be updated directly inside state. Instead, you need to create a copy of the existing array and then set the state to use newly copied array.

To ensure that arrays are not mutated, the mutation operations like direct direct assignment(arr[1]='one'), push, pop, shift, unshift, splice etc methods should be avoided on original array. Instead, you can create a copy of existing array with help of array operations such as filter, map, slice, spread syntax etc.

For example, the below push operation doesn't add the new todo to the total todo's list in an event handler.

onClick = {
  todos.push({
    id: id+1,
    name: name
  })
}

This issue is fixed by replacing push operation with spread syntax where it will create a new array and the UI updated with new todo.

onClick = {
  [
    ...todos,
    { id: id+1, name: name }
  ]
}

⬆ Back to Top

105. How do you use immer library for state updates?

Immer library enforces the immutability of state based on copy-on-write mechanism. It uses JavaScript proxy to keep track of updates to immutable states. Immer has 3 main states as below,

1. Current state: It refers to actual state
2. Draft state: All new changes will be applied to this state. In this state, draft is just a proxy of the current state.
3. Next state: It is formed after all mutations applied to the draft state

Immer can be used by following below instructions,

1. Install the dependency using npm install use-immer command
2. Replace useState hook with useImmer hook by importing at the top
3. The setter function of useImmer hook can be used to update the state.

For example, the mutation syntax of immer library simplifies the nested address object of user state as follows,

import { useImmer } from "use-immer"
const [user, setUser] = useImmer({
  name: "John",
  age: 32,
  address: {
    country: "Singapore",
    postalCode: 440004,
  },
})

//Update user details upon any event
setUser((draft) => {
  draft.address.country = "Germany"
})

The preceding code enables you to update nested objects with a conceise mutation syntax.

⬆ Back to Top

106. What are the benefits of preventing the direct state mutations?

⬆ Back to Top

107. What are the preferred and non-preferred array operations for updating the state?

The below table represent preferred and non-preferred array operations for updating the component state.

If you use Immer library then you can able to use all array methods without any problem.

⬆ Back to Top

108. What will happen by defining nested function components?

Technically it is possible to write nested function components but it is not suggested to write nested function definitions. Because it leads to unexpected bugs and performance issues.

⬆ Back to Top

109. Can I use keys for non-list items?

Keys are primarily used for rendering list items but they are not just for list items. You can also use them React to distinguish components. By default, React uses order of the components in

⬆ Back to Top

110. What are the guidelines to be followed for writing reducers?

There are two guidelines to be taken care while writing reducers in your code.

1. Reducers must be pure without mutating the state. That means, same input always returns the same output. These reducers run during rendering time similar to state updater functions. So these functions should not send any requests, schedule time outs and any other side effects.

2. Each action should describe a single user interaction even though there are multiple changes applied to data. For example, if you "reset" registration form which has many user input fields managed by a reducer, it is suggested to send one "reset" action instead of creating separate action for each fields. The proper ordering of actions should reflect the user interactions in the browser and it helps a lot for debugging purpose.

⬆ Back to Top

111. How does ReactJS work behind the scenes?

ReactJS is a powerful JavaScript library for building user interfaces. While it appears simple on the surface, React performs a lot of complex operations behind the scenes to efficiently update the UI. Here's an overview of how it works internally:

1. Virtual DOM & Component Rendering

React doesn't manipulate the real DOM directly. Instead, it uses a Virtual DOM — a lightweight JavaScript representation of the UI.

When a component renders (e.g., <App />):

• React executes the component function (e.g., App()).
• Hooks like useState are registered and tracked in order.
• React builds a Virtual DOM tree from the returned JSX.
• This virtual DOM is a plain JS object that describes the desired UI.

This process ensures fast and efficient rendering before React decides how to update the real DOM.

2. React Fiber Architecture

React’s core engine is called Fiber, introduced in React 16. Fiber is a reimplementation of the React reconciliation algorithm with the following capabilities:

• Breaks rendering work into units of work (fiber nodes).
• Enables interruptible rendering (important for responsiveness).
• Supports priority scheduling and concurrent rendering.

Each Fiber node represents a component and stores:

• The component type (function/class).
• Props, state, and effects.
• Links to parent, child, and sibling fibers.

3. Reconciliation (Diffing Algorithm)

When state or props change:

• React re-executes the component to produce a new virtual DOM.
• It compares the new virtual DOM to the previous one using an efficient diffing algorithm.
• React determines the minimal set of DOM changes required.

This process is known as reconciliation.

4. Commit Phase (Real DOM Updates)

Once reconciliation is done:

• React enters the commit phase.
• It applies calculated changes to the real DOM.
• It also runs side effects like useEffect or useLayoutEffect.

This is the only time React interacts directly with the browser DOM.

5. Hooks and State Management

With Hooks (like useState, useEffect):

• React keeps an internal list of hooks per component.
• Hooks are identified by their order in the function.
• When state updates occur, React re-renders the component and re-runs the hooks in the same order.

6. React Scheduler

React uses an internal Scheduler to control how updates are prioritized:

• Urgent tasks like clicks and inputs are processed immediately.
• Non-urgent tasks (like data fetching) can be delayed or paused.
• This improves responsiveness and allows for time slicing in Concurrent Mode.

⬆ Back to Top

112. How is useReducer Different from useState?

There are notable differences between useState and useReducer hooks.

⬆ Back to Top

113. What is useContext? What are the steps to follow for useContext?

The useContext hook is a built-in React Hook that lets you access the value of a context inside a functional component without needing to wrap it in a <Context.Consumer> component.

It helps you avoid prop drilling (passing props through multiple levels) by allowing components to access shared data like themes, authentication status, or user preferences.

The usage of useContext involves three main steps:

Step 1 : Create the Context

Use React.createContext() to create a context object.

import React, { createContext } from "react"

const ThemeContext = createContext() // default value optional

You typically export this so other components can import it.

Step 2: Provide the Context Value

Wrap your component tree (or a part of it) with the Context.Provider and pass a value prop.

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <MyComponent />
    </ThemeContext.Provider>
  )
}

Now any component inside <ThemeContext.Provider> can access the context value.

Step 3: Consume the Context with **useContext**

In any functional component inside the Provider, use the useContext hook:

import { useContext } from "react"
function MyComponent() {
  const theme = useContext(ThemeContext) // theme = "dark"
  return <p>Current Theme: {theme}</p>
}

⬆ Back to Top

114. What are the use cases of useContext hook?

The useContext hook in React is used to share data across components without having to pass props manually through each level. Here are some common and effective use cases:

1. Theme Customization useContext can be used to manage application-wide themes, such as light and dark modes, ensuring consistent styling and enabling user-driven customization.
2. Localization and Internationalization It supports localization by providing translated strings or locale-specific content to components, adapting the application for users in different regions.
3. User Authentication and Session Management useContext allows global access to authentication status and user data. This enables conditional rendering of components and helps manage protected routes or user-specific UI elements.
4. Shared Modal or Sidebar Visibility It's ideal for managing the visibility of shared UI components like modals, drawers, or sidebars, especially when their state needs to be controlled from various parts of the app.
5. Combining with **useReducer** for Global State Management When combined with useReducer, useContext becomes a powerful tool for managing more complex global state logic. This pattern helps maintain cleaner, scalable state logic without introducing external libraries like Redux. Some of the common use cases of useContext are listed below,

⬆ Back to Top

115. When to use client and server components?

You can efficiently build nextjs application if you are aware about which part of the application needs to use client components and which other parts needs to use server components. The common cases of both client and server components are listed below:

Client components:

1. Whenever your need to add interactivity and event listeners such as onClick(), onChange(), etc to the pages
2. If you need to use State and Lifecycle Effects like useState(), useReducer(), useEffect() etc.
3. If there is a requirement to use browser-only APIs.
4. If you need to implement custom hooks that depend on state, effects, or browser-only APIs.
5. There are React Class components in the pages.

Server components:

1. If the component logic is about data fetching.
2. If you need to access backend resources directly.
3. When you need to keep sensitive information((access tokens, API keys, etc) ) on the server.
4. If you want reduce client-side JavaScript and placing large dependencies on the server.

⬆ Back to Top

116. What are the differences between page router and app router in nextjs?

Next.js provides two different routing systems: the Page Router (traditional) and the App Router (introduced in Next.js 13). The App Router is built on React Server Components and offers more powerful features for modern web applications.

Here are the main differences between them:

Example of Page Router structure:

pages/
├── index.js          // Home page (/)
├── about.js          // About page (/about)
├── _app.js           // Custom App component
├── _document.js      // Custom Document
└── posts/
    └── [id].js       // Dynamic route (/posts/:id)

Example of App Router structure:

app/
├── page.js           // Home page (/)
├── layout.js         // Root layout
├── loading.js        // Loading UI
├── error.js          // Error UI
├── about/
│   └── page.js       // About page (/about)
└── posts/
    └── [id]/
        └── page.js   // Dynamic route (/posts/:id)

Note: The App Router is recommended for new Next.js applications as it provides better performance, simpler data fetching patterns, and improved developer experience with React Server Components.

⬆ Back to Top

117. Can you describe the useMemo() Hook?

The useMemo() Hook in React is used to optimize performance by memoizing the result of expensive calculations. It ensures that a function is only re-executed when its dependencies change, preventing unnecessary computations on every re-render.

Syntax

const memoizedValue = useMemo(() => computeExpensiveValue(arg), [dependencies])

• computeExpensiveValue: A function that returns the computed result.

• dependencies: An array of values that, when changed, will cause the memoized function to re-run.

If the dependencies haven’t changed since the last render, React returns the cached result instead of re-running the function.

Let's exaplain the usage of useMemo hook with an example of user search and its respective filtered users list.

Example: Memoizing a Filtered List

import React, { useState, useMemo } from "react"

const users = [
  { id: 1, name: "Sudheer" },
  { id: 2, name: "Brendon" },
  { id: 3, name: "Charlie" },
  { id: 4, name: "Dary" },
  { id: 5, name: "Eden" },
]

export default function UserSearch({ users }) {
  const [searchTerm, setSearchTerm] = useState("")
  const [counter, setCounter] = useState(0)

  // Memoize the filtered user list based on the search term
  const filteredUsers = useMemo(() => {
    console.log("Filtering users...")
    return users.filter((user) => user.name.toLowerCase().includes(searchTerm.toLowerCase()))
  }, [searchTerm])

  return (
    <div>
      <h2>Counter: {counter}</h2>
      <button onClick={() => setCounter((prev) => prev + 1)}>Increment Counter</button>

      <h2>Search Users</h2>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Enter name"
      />

      <ul>
        {filteredUsers.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  )
}