React JS Interview Questions & Answers

React Interview Questions is the perfect guide for you to learn all the concepts required to clear a React interview. But before starting with the React Interview Questions, let’s take a quick look at React’s demand as a UI Developer and also market value being a React JS developer. Currently, in the market of software development, we are having huge demand for React Js, Angular and Vue JS.

React JS Interview Questions & Answers

What is React?

React is an open-source front-end JavaScript library that is used for building user interfaces especially for single-page applications. It is used for handling the view layer for web and mobile apps. 

What are the major features of React?

The major features of React are:

• It uses VirtualDOM instead RealDOM considering that RealDOM manipulations are expensive.
• Supports server-side rendering.
• Follows Unidirectional data flow or data binding.
• Uses reusable/composable UI components to develop the view.

Type of components in React?

There are two possible ways to create a component.

Function Components: This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as the first parameter and return React elements

Class Components: You can also use ES6 class to define a component.

When to use React Class Component over a Function Component?

If the component needs state or lifecycle methods then use the class component otherwise use function component. However, from React 16.8 with the addition of Hooks, you could use state, lifecycle methods and other features that were only available in-class component right in your function component.

What is the state in React?

State of a component is an object that holds some information that may change over the lifetime of the component. We should always try to make our state as simple as possible and minimize the number of stateful components.

State is similar to props, but it is private and fully controlled by the component. i.e, It is not accessible to any component other than the one that owns and sets it.

What are props in React?

Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component.

The primary purpose of props in React is to provide following component functionality:

1. Pass custom data to your component.
2. Trigger state changes.
3. Use via this.props.reactProp inside component’s render() method.

What is the difference between state and props in React?

Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to the component. Props get passed to the component similar to function parameters whereas the state is managed within the component similar to variables declared within a function.

Why should we not update the state directly in React?

If you try to update the state directly then it won’t re-render the component.

//Wrong
this.state.message = 'Hello world'

Instead, use setState() method. It schedules an update to a component’s state object. When state changes, the component responds by re-rendering.

//Correct
this.setState({ message: 'Hello World' })

What is Virtual DOM in React?

The Virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the “real” DOM. It’s a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.

How Virtual DOM works in React?

The Virtual DOM works in three simple steps.

1. Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.
2. Then the difference between the previous DOM representation and the new one is calculated.
3. Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

What are controlled components in React?

A component that controls the input elements within the forms on subsequent user input is called Controlled Component, i.e, every state mutation will have an associated handler function.

What are uncontrolled components in React?

The Uncontrolled Components are the ones that store their own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

What are the different phases of React component lifecycle?

The component lifecycle has three distinct lifecycle phases:

1. Mounting: The component is ready to mount in the browser DOM. This phase covers initialization from constructor(), getDerivedStateFromProps(), render(), and componentDidMount() lifecycle methods.
2. Updating: In this phase, the component get updated in two ways, sending the new props and updating the state either from setState() or forceUpdate(). This phase covers getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() and componentDidUpdate() lifecycle methods.
3. Unmounting: In this last phase, the component is not needed and get unmounted from the browser DOM. This phase includes componentWillUnmount() lifecycle method.

What are the lifecycle methods of React?

React 16.3+

• getDerivedStateFromProps: Invoked right before calling render() and is invoked on every render. This exists for rare use cases where you need a derived state.
• componentDidMount: Executed after first rendering and here all AJAX requests, DOM or state updates, and set up event listeners should occur.
• shouldComponentUpdate: Determines if the component will be updated or not. By default, it returns true. If you are sure that the component doesn’t need to render after state or props are updated, you can return a false value. It is a great place to improve performance as it allows you to prevent a re-render if the component receives a new prop.
• getSnapshotBeforeUpdate: Executed right before the rendered output is committed to the DOM. Any value returned by this will be passed into componentDidUpdate(). This is useful to capture information from the DOM i.e. scroll position.
• componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes. This will not fire if shouldComponentUpdate() returns false.
• componentWillUnmount It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.

Before 16.3

• componentWillMount: Executed before rendering and is used for App-level configuration in your root component.
• componentDidMount: Executed after first rendering and here all AJAX requests, DOM or state updates, and set up event listeners should occur.
• componentWillReceiveProps: Executed when particular prop updates to trigger state transitions.
• shouldComponentUpdate: Determines if the component will be updated or not. By default, it returns true. If you are sure that the component doesn’t need to render after state or props are updated, you can return a false value. It is a great place to improve performance as it allows you to prevent a re-render if the component receives a new prop.
• componentWillUpdate: Executed before re-rendering the component when there are props & state changes confirmed by shouldComponentUpdate() which returns true.
• componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes.
• componentWillUnmount: It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.

What are stateless React components?

If the behavior is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for function components. There are a lot of benefits if you decide to use function components here; they are easy to write, understand, and test, a little faster, and you can avoid the this keyword altogether.

What are stateful React components?

If the behavior of a component is dependent on the state of the component then it can be termed as a stateful component. These stateful components are always class components and have a state that gets initialized in the constructor.

What are the advantages of using React?

1. Increases the application’s performance with Virtual DOM.
2. JSX makes code easy to read and write.
3. It renders both on the client and server-side (SSR).
4. Easy to integrate with frameworks (Angular, Backbone) since it is only a view library.
5. Easy to write unit and integration tests with tools such as Jest.

What are the disadvantages of using React?

1. React is just a view library, not a full framework.
2. There is a learning curve for beginners who are new to web development.
3. Integrating React into a traditional MVC framework requires some additional configuration.
4. The code complexity increases with inline templating and JSX.
5. Too many smaller components leading to over-engineering or boilerplate.

What is Redux?

Redux is a predictable state container for JavaScript apps based on the Flux design pattern. Redux can be used together with React, or with any other view library.

How data flows through Redux ?

Most of the applications have several data flow directories as below:

1. Components: Used for dumb components unaware of Redux.
2. Containers: Used for smart components connected to Redux.
3. Actions: Used for all action creators, where file names correspond to part of the app.
4. Reducers: Used for all reducers, where files name correspond to state key.
5. Store: Used for store initialization.

What are the three principles that Redux follows?

1. Single source of truth: The state of the entire application is stored in an object/ state tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.
2. State is read-only: The only way to change the state is to trigger an action. An action is a plain JS object describing the change. Just like state is the minimal representation of data, the action is the minimal representation of the change to that data. 
3. Changes are made with pure functions: In order to specify how the state tree is transformed by actions, you need pure functions. Pure functions are those whose return value depends solely on the values of their arguments.

What are the components of Redux?

Redux is composed of the following components:

1. Action – It’s an object that describes what happened.
2. Reducer –  It is a place to determine how the state will change.
3. Store – State/ Object tree of the entire application is saved in the Store.
4. View – Simply displays the data provided by the Store.

What is React Router?

React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application. This keeps the URL in sync with the data that’s being displayed on the web page. It maintains a standardized structure and behavior and is used for developing single-page web applications.