React JS Interview Questions for Senior Developer

While preparing for the React.js interview for a senior level developer you need a high level understanding of the things. You not only just need to answer the questions, you need to give the best answer to them. To achieve this level of skills, you definitely need some tricky questions and answers. Here I put a list of high level React JS interview questions for senior developers according to the latest trend.

Along with the React.js questions I will also put some JavaScript based questions, which are frequently asked by the interviewers. Let’s start now

Table of Contents

React JS Interview Questions

Here you will get the questions and answers from the mixture of mid-senior level and senior level. Let’s start with the first one:

Q1. Can you pass data between sibling components with the React router? If yes, how?

Ans. Yes it is possible to pass data between siblings using React router with match.params and history.push.

For example, here I will send id on the click of a submit button. Suppose we want to send data to a sibling component, and we will declare the path of this component in Routing as: /sibling/:id

For this on the click of button in parent component push the data with path like this:

props.history.push('/about/' + demoData);

and in the other component get the data with following code:

console.log(props.match.params.id)

So this is the simplest example how we can send data with React router.

Q2. What is a switching component? Explain with example.

Ans. Switching component is a component which is able to render one component out of the multiple components. That means it has the ability to render many components (one at a time) depending on the props supplied.

Here I’m showing you the simplest example which will give you more clarity.

import Home from './Home';
import About from './About';
import Contact from './Contact';
const PAGES = {
 home: Home,
 about: About,
 contact: Contact
};
const Page = (props) => {
 const Handler = PAGES[props.page];
 return <Handler {...props} />
};

So, this is the simplest example of switching component. Here it can return 3 components, Home, About and Contact. Depending upon the props supplied, it will return result component.

Q3. Can we use hooks to cover all functionalities of classes? – React JS interview questions

Ans. Currently, there are some lifecycle methods which are not covered by the hooks. In future, React will surely cover them, but for now followings are the methods which are not covered by React hooks:

getDerivedStateFromError()
getSnapshotBeforeUpdate()
componentDidCatch()

So, we can say, currently React doesn’t support all functionalities given by classes (React lifecycle methods).

Q4. Is there any difference between the performance of React hooks and classes?

Ans. Yes, React hooks are said to be more efficient in performance than classes. First of all, React hooks create smaller component trees which avoids the nesting, it easies the burden of React.

Secondly, it bypass the binding of events, creation of instances and more similar tasks. This way it helps applications to perform better and this is the reason React is focusing more on hooks. Also good developers are using hooks in applications efficiently.

Q5. What is `memo` in React, explain why it is useful in complex components?

Ans. We use memo in React to avoid re-rendering of a component if props have not changes. To explain this, I’m considering a problem:

Problem: Suppose we have file index.js in our React application, and it imports an outer component, suppose Outer.js. Also index.js file has a state variable count, and if we change this state variable (suppose setCount((c) => c + 1)) Outer.js will automatically re-renders. This is the problem and we need to avoid this re-rendering.

Solution: Solution is memo. To fix this issue, we need to import { memo } from "react" and need to wrap Outer.js like this

export default memo(Outer); while exporting.

It will resolve the problem, and unnecessary re-rendering will be eliminated.

Q6. How you can optimize the performance of a React application? – one of the important React JS interview questions

Ans. This is the most important point when you are working on any web/mobile application. Fresher developers may not focus on this point but it is expected by the senior developers. Here I’m sharing some very simple and must used techniques which can help to increase the performance of a React application.

Maintain the states properly – React JS interview questions

This is the main point to which we should pay the most attention. There may be unnecessary states in the app sometimes, we should identify and remove them time to time. If we can manage the functionality with less number of state variables, we can try to do this. This coding habit can make you a good developer.

We can shift the less used states to a separate component. Also try to declare the states close where these are required. This way performance of the component can be optimized.

Use lazy loading

Lazy loading also plays a great role in the performance of the application, specially in a React app. It is used to minimize the load time of application, and have a great impact on the performance.

Suppose we want to bind the data of 10k records in a table, we can’t directly bind it on it. In such cases we should use lazy loading so that data can be bind in the form of small chunks.

Also we can use lazy loading in React while importing the components like:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

Here, you should keep in mind that lazy component always need to render inside the Suspense component like:

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function DemoComponent() {
return (
<>
<Suspense fallback={<div>Loading the component...</div>}>
<LazyComponent />
</Suspense>
</>
);
}

Use `PureComponent` and `useMemo` hook

PureComponent is the class which is used to avoid the re-rendering of the react component and really helps the React app to get rid of the undesired rendering.

useMemo hook used to handle the expensive CPU calculation functions. Sometime due to re-rendering of component, such functions called repeatedly, and with the help of this hook you can avoid such calls by caching such functions.

So these are the must have things in your code, which should be there if you want your app to perform well.

Also your clean coding skills with reusable components can improve the performance.

Q7. How you can prevent the re-rendering in the React app?

Ans. The re-rendering takes place when props or states get updated. This is the default behavior of React, but sometimes it becomes a headache for the developers and affect the performance. If props or states are updated in wrong way, and some function calls are places in wrong hook or wrong position, you will get unnecessary re-rendering of the app, which causes performance issues.

So to provide such issues, you can use the following methods:

`shouldComponentUpdate()`

Suppose we have two components A and B, A is the parent component of B. So when we update any state in the component A, then component B will automatically gets rendered, which is a useless rendering and we don’t need it.

So, to avoid such rendering, we can use the lifecycle method shouldComponentUpdate() and return false in it, which will stop its useless re-rendering.

`useCallback()`, `useRef()`, `memo`

You can also use useCallback(), useRef() and memo to handle the re-rendering of child components and can improve the performance of your application.

Q8. Can you please explain the strict mode in React?

Ans. Simiar to the JavaScript, React also has a strict mode. In JS we use "use strict" keyword to turn on the strict more. In React we use <React.StrictMode></React.StrictMode> tag to use this mode. This feature was added in the React version 16.3.

When we run our app in strict mode, it highlights the potential issues like:

If a class component uses any unsafe lifecycle method, it will warn you in console
Some outdated/deprecated methods are being used in the application, it will warn you
Check whether the components are following the recommended practices or not
It helps you to prevent some side effects by warning you in the console

Q9. What are the must follow rules while using the React hooks?

Ans. React hooks were introduced in React version 16.8 to make the functional components more useful. Hooks are supposed to give all functionalities provided by the React lifecycle methods.

There are two must follow rules while using React hooks are:

You can only use them in functional components
Second, these hooks must be called on the top level, you can’t call them inside a nested loop or condition

Q10. Explain the higher order component (HOC) with a simplest example (one of the most asked React JS interview questions)

Ans. With the help of HOC, we can share code between the React components. HOC is actually a component, which takes a component as input and returns a new component.

For a simplest example, consider this button component

const ButtonComponent = props => <button {...props}>Button</button>;

Let’s create a HOC which will change the style of this simple ButtonComponent.

const highrOrderComponent = Component => (props) => ( <Component {...props} style={{ border: "2px solid green" }} /> );

Now we can create a new component here:

const NewButtonComponent = highrOrderComponent(ButtonComponent);
and can use it as:
<NewButtonComponent />

So this is the simplest example of a HOC, which I think clear you doubt regarding this pattern.

So these are the top 10 interview questions, but I will add more questions here. Till then you can also read:

JavaScript Interview Questions and Answers for Experienced

You can bookmark my webpage for more similar stuff, have a good day!

Also read: Cannot Use Import Statement Outside a Module in NodeJS

Post Views: 710

React JS Interview Questions for Senior Developer