Top 130 React Interview Questions And Answers

Question 1

How does React _work_?

Accepted Answer

React creates a virtual DOM. When state changes in a component it firstly runs a "diffing" algorithm, which identifies what has changed in the virtual DOM. The second step is reconciliation, where it updates the DOM with the results of diff.

Question 2

What are the _advantages_ of ReactJS?

Accepted Answer

Below are the advantages of ReactJS:

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

Question 3

What is React?

Accepted Answer

React is an open-source JavaScript library created by Facebook for building complex, interactive UIs in web and mobile applications. React’s core purpose is to build UI components; it is often referred to as just the “V” (View) in an “MVC” architecture.

Question 4

What are React Hooks?

Accepted Answer

**Hooks** are a new addition in React 16.8. They let you use state and other React features without writing a class. With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.

Question 5

What are `props` in React?

Accepted Answer

**Props** are inputs to a React component. They are single values or objects containing a set of values that are passed to React Components on creation using a naming convention similar to HTML-tag attributes. i.e, *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 React component.
2. Trigger `state` changes.
3. Use via `this.props.reactProp` inside component's `render()` method.

For example, let us create an element with reactProp property,
```jsx
 <Element reactProp = "1" />
```

This `reactProp` (or whatever you came up with) name then becomes a property attached to React's native props object which originally already exists on all components created using React library.

```jsx
 props.reactProp;
```

Question 6

How would you write an _inline_ style in React?

Accepted Answer

For example: ```jsx

```

Question 7

What are the major _features_ of ReactJS?

Accepted Answer

The major features of ReactJS are as follows,

- 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

Question 8

What is the use of `refs`?

Accepted Answer

**Refs** provide a way to access DOM nodes or React elements created in the render method. They should be avoided in most cases, however, they can be useful when we need direct access to DOM element or an instance of a component. There are a few good use cases for refs: - Managing focus, text selection, or media playback. - Triggering imperative animations. - Integrating with third-party DOM libraries. Refs are created using `React.createRef()` and attached to React elements via the `ref` attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component. ```js class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return

; } } ```

Question 9

What is _Context API_ in ReactJS?

Accepted Answer

Context provides a way to pass data through the component tree without having to pass props down manually at every level. Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language. Using context, we can avoid passing props through intermediate elements. ```jsx // Context lets us pass a value deep into the component tree // without explicitly threading it through every component. // Create a context for the current theme (with "light" as the default). const ThemeContext = React.createContext('light'); class App extends React.Component { render() { // Use a Provider to pass the current theme to the tree below. // Any component can read it, no matter how deep it is. // In this example, we're passing "dark" as the current value. return ( ); } } // A component in the middle doesn't have to // pass the theme down explicitly anymore. function Toolbar() { return (

); } class ThemedButton extends React.Component { // Assign a contextType to read the current theme context. // React will find the closest theme Provider above and use its value. // In this example, the current theme is "dark". static contextType = ThemeContext; render() { return

Question 10

What are the differences between a _Class component_ and _Functional component_?

Accepted Answer

**Class Components**

- Class-based Components uses ES6 class syntax. It can make use of the lifecycle methods.
    
- Class components extend from React.Component.
    
- In here you have to use this keyword to access the props and functions that you declare inside the class components.

**Functional Components**

- Functional Components are simpler comparing to class-based functions.
    
- Functional Components mainly focuses on the UI of the application, not on the behavior.
    
- To be more precise these are basically render function in the class component.
    
- Functional Components can have state and mimic lifecycle events using Reach Hooks

![](https://i.stack.imgur.com/qvr7T.png)

Top 130 React Interview Questions

What are props in React?

What are the major features of ReactJS?

How does React work?

What is React?

What are React Hooks?

What is the use of refs?

What are the advantages of ReactJS?

What is Context API in ReactJS?

How would you write an inline style in React?

What are inline conditional expressions in ReactJS?

What are Stateful components in React?

What is Reconciliation in ReactJS?

What is the purpose of using super constructor with props argument in React?

What happens when you call setState?

What is the difference between Element and Component in ReactJS?

What are Higher-Order Components (HOC) in React?

What are the advantages of using React?

What is the difference between Component and Container in Redux?

What is JSX?

What are the limitations of React?

What happens during the lifecycle of a React component?

What are advantages of using React Hooks?

What are portals in React and when do we need them?

What is the purpose of callback function as an argument of setState?

What are Stateless components in React?

How is React different from AngularJS (1.x)?

What are two types of components in ReactJS?

What is the difference between state and props?

What are the differences between a Class component and Functional component?

What does it mean for a component to be mounted in React?

What are refs used for in React?

What is the difference between a Presentational component and a Container component?

What's the difference between a Controlled component and an Uncontrolled one in React?

What is useState() in React?

What are Controlled components in ReactJS?

What is state in React?

How to call loading function with React useEffect only once?

How to access DOM elements in React?

What is the difference between state and props?

What are Fragments in React?

When rendering a list what is a key and what is it's purpose?

How to create refs in React?

What is the difference between createElement and cloneElement?

When would you use useRef?

Which lifecycle methods of class component is replaced by useEffect in functional component?

What is the significance of keys in ReactJS?

What is StrictMode in React?

What's the difference between useRef and createRef?

How would you pass data from child to parent component in React?

What would be the common mistake of function being called every time the component renders?

How can I make use of Error Boundaries in functional React components?

Why we should not update state directly?

Do React Hooks cover all use cases for class components?

Compare useState and useReducer implementations

Are you familiar with Flux in the context of React?

What are the advantages of Batching in ReactJS?

What is the difference between HTML and React event handling?

What are Error Boundaries in ReactJS?

What does Batching mean in ReactJS?

What is Components Composition in React?

What's wrong with using Context in React?

What are Uncontrolled components?

What's the difference between an Element and a Component in React?

What do these three dots (...) in React do?

What's the typical flow of data like in a React + Redux app?

What are some limitations of things you shouldn't do in the component's render method in React?

What is Lifting State Up in ReactJS?

What are Pure Components?

What is prop drilling and how can you avoid it?

What are the lifecycle methods of ReactJS class components?

What are the different phases of ReactJS component lifecycle?

What is Key and benefit of using it in lists?

What's the typical pattern for rendering a list of components from an array in React?

What are forward refs?

How would you prevent a component from rendering in React?

What is the difference between ShadowDOM and VirtualDOM?

Why do class methods need to be bound to a class instance?

What is {this.props.children} and when you should use it?

What are Stateless components in React?

What are `props` in React?

What is the use of `refs`?

What is the purpose of using `super` constructor with `props` argument in React?

What happens when you call `setState`?

What is the purpose of callback function as an argument of `setState`?

What is the difference between `state` and `props`?

What are `refs` used for in React?

What is `useState()` in React?

What is `state` in React?

How to call loading function with React `useEffect` only once?

What is the difference between `state` and `props`?

When rendering a list what is a `key` and what is it's purpose?

How to create `refs` in React?

What is the difference between `createElement` and `cloneElement`?

When would you use `useRef`?

Which lifecycle methods of class component is replaced by `useEffect` in functional component?

What is the significance of `key`s in ReactJS?

What is `StrictMode` in React?

What's the difference between `useRef` and `createRef`?

Why we should not update `state` directly?

Do React `Hooks` cover all use cases for class components?

Compare `useState` and `useReducer` implementations

What do these three dots (`...`) in React do?

What is `Key` and benefit of using it in lists?

What are forward `refs`?

What is `{this.props.children}` and when you should use it?

What is children `prop`?

Why React uses `className` over `class` attribute?

What does `shouldComponentUpdate` do and why is it important?

What is the point of `shouldComponentUpdate()` method?

When to use `useCallback`, `useMemo` and `useEffect`?

Explain why and when would you use `useMemo()`?

Can you force a React component to rerender without calling `setState`?

When would you use `flushSync` in ReactJS?

When shall we use `useReducer` hook in ReactJS?

When to use `useState` vs `useReducer`?

What is the purpose of `super(props)`?

What is the difference between using constructor vs `getInitialState` in React?

Why would you need to bind event handlers to `this`?

Why doesn't `this.props.children.map` work?

When is it important to pass props to `super()`, and why?

What is the second argument that can optionally be passed to `setState` and what is its purpose?

What's the difference between `useCallback` and `useMemo` in practice?

Why does React use `SyntheticEvents`?

How to apply validation on `props` in ReactJS?

When would you use `StrictMode` component in React?

What is the order of `useInsertionEffect`, `useEffect` and `useLayoutEffect` hooks at component generation ?

How to use `React.memo()`?

How does React renderer work exactly when we call `setState`?

What is equivalent of the following using `React.createElement`?

How to mitigate multiple component re-renders when using multiple `useState` calls?