React Interview Question and Answers (2024) – Advance Level

In this article, you will learn ReactJS Interview Questions and Answers – advanced level that are most frequently asked in interviews. Before proceeding to learn ReactJS Interview Questions and Answers – advanced level, first learn the complete ReactJS Tutorial, ReactJS Interview Questions and Answers (2023) – Beginner Level, and ReactJS Interview Questions and Answers (2023) – Intermediate Level.

ReactJS is an open-source JavaScript library that is used for building user interfaces in a declarative and efficient way. It is a component-based front-end library responsible only for the view layer of an MVC (Model View Controller) architecture. React is used to create modular user interfaces and it promotes the development of reusable UI components that display dynamic data.

Similar Articles:

• ReactJS Interview Questions and Answers (2023) – Beginner Level
• ReactJS Interview Questions and Answers (2023) – Intermediate Level

This set contains the intermediate-level questions asked in the interview.

1. What is custom hooks in React?

Custom hooks are normal JavaScript functions whose names start with “use” and they may call other hooks. We use custom hooks to maintain the DRY concept that is Don’t Repeat Yourself. It helps us to write a logic once and use it anywhere in the code.

2. How to optimize a React code?

We can improve our react code by following these practices:

• Using binding functions in constructors
• Eliminating the use of inline attributes as they slow the process of loading
• Avoiding extra tags by using React fragments
• Lazy loading

3. What is the difference between useref and createRef in React ?

useRef	createRef
It is a hook.	It is a function.
It uses the same ref throughout.	It creates a new ref every time.
It saves its value between re-renders in a functional component.	It creates a new ref for every re-render.
It returns a mutable ref object.	It returns a read-only ref object.
The refs created using the useRef can persist for the entire component lifetime.	The refs created using the createRef can be referenced throughout the component.
It is used in functional components.	It is used in class components.

4. What is react-redux?

React-redux is a state management tool which makes it easier to pass these states from one component to another irrespective of their position in the component tree and hence prevents the complexity of the application. As the number of components in our application increases it becomes difficult to pass state as props to multiple components. To overcome this situation we use react-redux

5. What are benefits of using react-redux?

They are several benfits of using react-redux such as:

• It provides centralized state management i.e. a single store for whole application
• It optimizes performance as it prevents re-rendering of component
• Makes the process of debugging easier
• Since it offers persistent state management therfore storing data for long times become easier

6. Explain the core components of react-redux?

There are four fundamental concepts of redux in react which decide how the data will flow through components

• Redux Store: It is an object that holds the application state
• Acrtion Creators: These are unctions that return actions (objects)
• Actions: Actions are simple objects which conventionally have two properties- type and payload 
• Reducers: Reducers are pure functions that update the state of the application in response to actions

7. How can we combine multiple reducers in React?

When working with Redux we sometimes require multiple reducers. In many cases, multiple actions are needed, resulting in the requirement of multiple reducers. However, this can become problematic when creating the Redux store. To manage the multiple reducers we have function called combineReducers in the redux. This basically helps to combine multiple reducers into a single unit and use them.

Syntax: 

import { combineReducers } from "redux";
const rootReducer = combineReducers({
    books: BooksReducer,
    activeBook: ActiveBook
});

8. What is context API?

Context API is used to pass global variables anywhere in the code. It helps when there is a need for sharing state between a lot of nested components. It is light in weight and easier to use, to create a context just need to call React.createContext(). It eliminates the need to install other dependencies or third-party libraries like redux for state management. It has two properties Provider and Consumer. 

9. Explain provider and consumer in ContextAPI?

A provider is used to provide context to the whole application whereas a consumer consume the context provided by nearest provider. In other words The Provider acts as a parent it passes the state to its children whereas the Consumer uses the state that has been passed. 

10. Explain CORS in React?

In ReactJS, Cross-Origin Resource Sharing (CORS) refers to the method that allows you to make requests to the server deployed at a different domain. As a reference, if the frontend and backend are at two different domains, we need CORS there.

We can setup CORS evironment in frontend using two methods:

• axios
• fetch

11. What is axios and how to use it in React?

Axios, which is a popular library is mainly used to send asynchronous HTTP requests to REST endpoints. This library is very useful to perform CRUD operations.

• This popular library is used to communicate with the backend. Axios supports the Promise API, native to JS ES6.
• Using Axios we make API requests in our application. Once the request is made we get the data in Return, and then we use this data in our project. 

To install aixos package in react use the following command.

npm i axios

12. Write a program to create a counter with increment and decrement?

Javascript

import React, { useState } from "react";

const App = () => {

    // Counter is a state initialized to 0
    const [counter, setCounter] = useState(0)

    // Function is called everytime increment
    // button is clicked
    const handleClick1 = () => {

        // Counter state is incremented
        setCounter(counter + 1)
    }

    // Function is called everytime decrement
    // button is clicked
    const handleClick2 = () => {

        // Counter state is decremented
        setCounter(counter - 1)
    }

    return (
        <div>
            <div>
                {counter}
            </div>
            <div className="buttons">
                <button onClick={handleClick1}>
                    Increment
                </button>
                <button onClick={handleClick2}>
                    Decrement
                </button>
            </div>
        </div>
    )
}

export default App

13. Explain why and how to update state of components using callback?

It is advised to use a callback-based approach to update the state using setState because it solves lots of bugs upfront that may occur in the future.We can use the following syntax to update state using callback

this.setState(st => {
    return(
        st.stateName1 = state1UpdatedValue,
        st.stateName2 = state2UpdatedValue
    )
})

14. What is React-Material UI?

React Material UI is a framework built upon React library which contains predefined components to create React applications. Material UI is basically a design language built by Google in 2014 and works with various JavaScript frameworks apart from React such as Angular.js and Vue.js. The quality of the inbuilt designs of Material UI and its easy implementation makes it the first choice of most developers. The inbuilt components are also customizable so it helps easily recreate the designs.

15. What is flux architecture in redux?

Flux is AN architecture that Facebook uses internally when operating with React. It is merely a replacement quite an architecture that enhances React and also the idea of unidirectional data flow.

16. Explain the useMemo hook in react?

The useMemo is a hook used in the functional component of react that returns a memoized value. In Computer Science, memoization is a concept used in general when we don’t need to recompute the function with a given argument for the next time as it returns the cached result. A memoized function remembers the results of output for a given set of inputs.

17. Does React useState Hook update immediately ?

React do not update immediately, although it seems immediate at first glance. React keep track of the states by queuing them in the order they are called. React queue all the changes to be made and update once the component Re-render which is not immediate. This is how React knows which value corresponds to which state. It goes as per the queue every time the component tries to re-render.

18. When to use useCallback, useMemo and useEffect ?

• useEffect is a function that can be used as an alternative of lifecycle methods such as componentDidMount, componenetWillUnmount, componentDidUpdate in funcitonal components
• useCallback can be used when we want to prevent unnecessary renders from the chld components. It helpd to resolve side effects
• useMemo is used when we want to re-render on based on cache values as makes the application faster

19. Explain the types of router in React?

There are basically three types of router in React:

• Memory Router:The memory router keeps the URL changes in memory not in the user browsers.
• Browser Router : It uses HTML 5 history API (i.e. pushState, replaceState, and popState API) to keep your UI in sync with the URL
• Hash Router: Hash router uses client-side hash routing. It uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL. 

20. What is StrictMode in React ?

The React StrictMode can be viewed as a helper component that allows developers to code efficiently and brings to their attention any suspicious code which might have been accidentally added to the application. The StrictMode can be applied to any section of the application, not necessarily to the entire application