26 React+Redux Interview Questions You Should Know (in 2018)
Tags: react, javascript, career, interview
Published: 2018-10-02 11:55:06

---
title: 26 React+Redux Interview Questions You Should Know (in 2018)
published: true
description: 26 React and Redux Interview Questions You Should Know (in 2018)
tags: #react #javascript #career #interview
canonical_url: https://www.fullstack.cafe/blog/top-26-react-redux-interview-questions-to-brush-up-2018
---
![26 React Interview Questions and Answers in 2018](https://images.pexels.com/photos/3702/graffiti-door-closed-greece.jpg?auto=compress&cs=tinysrgb&dpr=2&h=350)
"Lead JavaScript Developer (React JS) - $130,000 AUD/year". That's a typical job vacancy description for an experienced Full Stack React Dev in Sydney, Australia. Come along and follow the most common React and Redux Interview Questions and Answers from [FullStack.Cafe](https://www.fullstack.cafe) to stand out on your next Full Stack interview.

> 🔴 Originally published on [FullStack.Cafe - Kill Your Tech & Coding Interview](https://www.fullstack.cafe/?utm_source=dev&utm_medium=blog)

### Q1: What is React?
> Topic: **React**<br/>Difficulty: ⭐

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. 

🔗 **Source:** [codementor.io](https://www.codementor.io/blog/5-essential-reactjs-interview-questions-du1084ym1)
### Q2: What is Redux?
> Topic: **Redux**<br/>Difficulty: ⭐

**Redux** is a predictable state container for JavaScript apps based on the Flux design pattern. Redux can be used together with ReactJS, or with any other view library. It is tiny (about 2kB) and has no dependencies.

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/reactjs-interview-questions)
### Q3: What is virtual DOM?
> Topic: **React**<br/>Difficulty: ⭐

**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.

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/reactjs-interview-questions)
### Q4: What is Flux?
> Topic: **Redux**<br/>Difficulty: ⭐

**Flux** is an application design paradigm used as a replacement for the more traditional mvc pattern. It is not a framework or a library but a new kind of architecture that complements React and the concept of Unidirectional Data Flow. Facebook used this pattern internally when working with React The workflow between dispatcher, stores and views components with distinct inputs and outputs as follows:

<img src="https://github.com/sudheerj/reactjs-interview-questions/raw/master/images/flux.png" class="img-fluid"/> 

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/reactjs-interview-questions)
### Q5: What are the advantages of ReactJS?
> Topic: **React**<br/>Difficulty: ⭐

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.

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/reactjs-interview-questions)
### Q6: What are the major features of ReactJS?
> Topic: **React**<br/>Difficulty: ⭐

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

🔗 **Source:** [https://github.com/sudheerj](https://github.com/sudheerj/reactjs-interview-questions)
### Q7: What is the difference between a Presentational component and a Container component?
> Topic: **React**<br/>Difficulty: ⭐⭐

* **Presentational components** are concerned with _how things look_. They generally receive data and callbacks exclusively via props. These components rarely have their own state, but when they do it generally concerns UI state, as opposed to data state.

* **Container components** are more concerned with _how things work_. These components provide the data and behavior to presentational or other container components. They call Flux actions and provide these as callbacks to the presentational components. They are also often stateful as they serve as data sources. 

🔗 **Source:** [github.com/Pau1fitz](https://github.com/Pau1fitz/react-interview)
### Q8: Describe how events are handled in React.
> Topic: **React**<br/>Difficulty: ⭐⭐

In order to solve cross browser compatibility issues, your event handlers in React will be passed instances of SyntheticEvent, which is React’s cross-browser wrapper around the browser’s native event. These synthetic events have the same interface as native events you’re used to, except they work identically across all browsers.

What’s mildly interesting is that React doesn’t actually attach events to the child nodes themselves. React will listen to all events at the top level using a single event listener. This is good for performance and it also means that React doesn’t need to worry about keeping track of event listeners when updating the DOM.

🔗 **Source:** [tylermcginnis.com](https://tylermcginnis.com/react-interview-questions/)
### Q9: What is state in ReactJS?
> Topic: **React**<br/>Difficulty: ⭐⭐

**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.

 Let's create user component with message state,

 ```js
 class User extends React.Component {
    constructor(props) {
       super(props);

       this.state = {
          message: "Welcome to React world",
       }
    }
    render() {
       return (
          <div>
             <h1>{this.state.message}</h1>
          </div>
       );
    }
 }
 ```

🔗 **Source:** [https://github.com/sudheerj](https://github.com/sudheerj/reactjs-interview-questions)
### Q10: What is the difference between state and props?
> Topic: **React**<br/>Difficulty: ⭐⭐

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 component. i.e, 
* Props get passed to the component similar to function parameters 
* state is managed within the component similar to variables declared within a function.

🔗 **Source:** [https://github.com/sudheerj](https://github.com/sudheerj/reactjs-interview-questions)
### Q11: What are the limitations of ReactJS?
> Topic: **React**<br/>Difficulty: ⭐⭐

Below are the list of limitations:

1. React is just a view library, not a full-blown framework
2. There is a learning curve for beginners who are new to web development.
3. Integrating React.js 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

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/reactjs-interview-questions)
### Q12: What’s the difference between an "Element" and a "Component" in React?
> Topic: **React**<br/>Difficulty: ⭐⭐

Simply put, a React element describes what you want to see on the screen. Not so simply put, a React element is an object representation of some UI.

A React component is a function or a class which optionally accepts input and returns a React element (typically via JSX which gets transpiled to a createElement invocation).

🔗 **Source:** [medium.freecodecamp.org/](https://medium.freecodecamp.org/react-interview-questions-c8a319ed02bd)
### Q13: How is React different from AngularJS (1.x)?
> Topic: **React**<br/>Difficulty: ⭐⭐

For example, AngularJS (1.x) approaches building an application by extending HTML markup and injecting various constructs (e.g. Directives, Controllers, Services) at runtime. As a result, AngularJS is very opinionated about the greater architecture of your application — these abstractions are certainly useful in some cases, but they come at the cost of flexibility.

By contrast, React focuses exclusively on the creation of components, and has few (if any) opinions about an application’s architecture. This allows a developer an incredible amount of flexibility in choosing the architecture they deem “best” — though it also places the responsibility of choosing (or building) those parts on the developer.

🔗 **Source:** [codementor.io](https://www.codementor.io/blog/5-essential-reactjs-interview-questions-du1084ym1)
### Q14: What are the downsides of Redux over Flux?
> Topic: **Redux**<br/>Difficulty: ⭐⭐⭐

Instead of saying downsides we can say that there are few compromises of using Redux over Flux. Those are as follows:
1. **You will need to learn avoiding mutations:**
Flux is un-opinionated about mutating data, but Redux doesn't like mutations and many packages complementary to Redux assume you never mutate the state. You can enforce this with dev-only packages like redux-immutable-state-invariant, Immutable.js, or your team to write non-mutative code.
2. **You're going to have to carefully pick your packages:**
While Flux explicitly doesn't try to solve problems such as undo/redo, persistence, or forms, Redux has extension points such as middleware and store enhancers, and it has spawned a young but rich ecosystem. This means most packages are new ideas and haven't received the critical mass of usage yet
3. **There is no nice Flow integration yet:**
Flux currently lets you do very impressive static type checks which Redux doesn't support yet.

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/reactjs-interview-questions)
### Q15: What are error boundaries in ReactJS (16)?
> Topic: **React**<br/>Difficulty: ⭐⭐⭐

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

A class component becomes an error boundary if it defines a new lifecycle method called `componentDidCatch(error, info)`
```js
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}
```

After that use it as a regular component

```js
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>
```

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/reactjs-interview-questions)
### Q16: Why ReactJS uses className over class attribute?
> Topic: **React**<br/>Difficulty: ⭐⭐⭐

**class** is a keyword in javascript and JSX is an extension of javascript. That's the principal reason why React uses `className` instead of class. 

```js
render() {
  return <span className="menu navigation-menu">Menu</span>
}
```

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/reactjs-interview-questions)
### Q17: How to access redux store outside a react component?
> Topic: **Redux**<br/>Difficulty: ⭐⭐⭐

Yes.You just need to export the store from the module where it created with `createStore`. Also, it shouldn't pollute the global window object
```js
store = createStore(myReducer);
export default store;
```

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/reactjs-interview-questions)
### Q18: What can you tell me about JSX?
> Topic: **React**<br/>Difficulty: ⭐⭐⭐

When Facebook first released React to the world, they also introduced a new dialect of JavaScript called JSX that embeds raw HTML templates inside JavaScript code. JSX code by itself cannot be read by the browser; it must be transpiled into traditional JavaScript using tools like Babel and webpack. While many developers understandably have initial knee-jerk reactions against it, JSX (in tandem with ES2015) has become the defacto method of defining React components.

```js
class MyComponent extends React.Component {
  render() {
    let props = this.props;  
    return (
      <div className="my-component">
      <a href={props.url}>{props.name}</a>
      </div>
    );
  }
}
```

🔗 **Source:** [codementor.io](https://www.codementor.io/blog/5-essential-reactjs-interview-questions-du1084ym1)
### Q19: Why should not we update the state directly?
> Topic: **React**<br/>Difficulty: ⭐⭐⭐

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

```js
    //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

```js
    //Correct
    This.setState({message: ‘Hello World’});
```

**Note:** The only place you can assign the state is constructor.


🔗 **Source:** [https://github.com/sudheerj](https://github.com/sudheerj/reactjs-interview-questions)
### Q20: What are the different phases of ReactJS component lifecycle?
> Topic: **React**<br/>Difficulty: ⭐⭐⭐

There are four different phases of React component’s lifecycle:
1. **Initialization:** In this phase react component prepares setting up the initial state and default props.
2. **Mounting:** The react component is ready to mount in the browser DOM. This phase covers **componentWillMount** and **componentDidMount** lifecycle methods.
3. **Updating:** In this phase, the component get updated in two ways, sending the new props and updating the state. This phase covers **shouldComponentUpdate, componentWillUpdate and componentDidUpdate** lifecycle methods.
4. **Unmounting:** In this last phase, the component is not needed and get unmounted from the browser DOM. This phase include **componentWillUnmount** lifecycle method.

<div class="text-center">
<img src="https://github.com/sudheerj/reactjs-interview-questions/raw/master/images/phases.png" class="img-fluid"/>
</div>

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/reactjs-interview-questions)
### Q21: Describe Flux vs MVC?
> Topic: **React**<br/>Difficulty: ⭐⭐⭐⭐

Traditional MVC patterns have worked well for separating the concerns of data (Model), UI (View) and logic (Controller) — but MVC architectures frequently encounter two main problems:

*   **Poorly defined data flow:** The cascading updates which occur across views often lead to a tangled web of events which is difficult to debug.
    
*   **Lack of data integrity:** Model data can be mutated from anywhere, yielding unpredictable results across the UI.

With the Flux pattern complex UIs no longer suffer from cascading updates; any given React component will be able to reconstruct its state based on the data provided by the store. The Flux pattern also enforces data integrity by restricting direct access to the shared data.

🔗 **Source:** [codementor.io](https://www.codementor.io/blog/5-essential-reactjs-interview-questions-du1084ym1)
### Q22: Why would you use forceUpdate in a React component?
> Topic: **React**<br/>Difficulty: ⭐⭐⭐⭐

In order to force a re-render if there is some condition React is not detecting that requires an update to the UI. Typically this should not be necessary to call.

🔗 **Source:** [github.com/WebPredict](https://github.com/WebPredict/react-interview-questions)
### Q23: What is wrong with this code?
> Topic: **React**<br/>Difficulty: ⭐⭐⭐⭐

**Questions:**

What is wrong with this code?
```js
this.setState((prevState, props) => {
  return {
    streak: prevState.streak + props.count
  }
})
```
**Answer:**

Nothing is wrong with it. It’s rarely used and not well known, but you can also pass a function to `setState` that receives the previous state and props and returns a new state, just as we’re doing above. And not only is nothing wrong with it, but it’s also actively recommended if you’re setting state based on previous state.

🔗 **Source:** [tylermcginnis.com](https://tylermcginnis.com/react-interview-questions/)
### Q24: What is the difference between a controlled component and an uncontrolled component?
> Topic: **React**<br/>Difficulty: ⭐⭐⭐⭐

* A **controlled component** is a component where React is in control and is the single source of truth for the form data. 
* An **uncontrolled component** is where your form data is handled by the DOM, instead of inside your React component.

Though uncontrolled components are typically easier to implement since you just grab the value from the DOM using refs, it’s typically recommended that you favor controlled components over uncontrolled components. The main reasons for this are that controlled components support instant field validation, allow you to conditionally disable/enable buttons, enforce input formats, and are more “the React way”.


🔗 **Source:** [github.com/Pau1fitz](https://github.com/Pau1fitz/react-interview)
### Q25: Explain some difference between Flux and AngularJS (1.x) approach
> Topic: **React**<br/>Difficulty: ⭐⭐⭐⭐⭐

UI components in AngularJS typically rely on some internal `$scope` to store their data. This data can be directly mutated from within the UI component or anything given access to `$scope` — a risky situation for any part of the component or greater application which relies on that data.

By contrast, the Flux pattern encourages the use of immutable data. Because the store is the central authority on all data, any mutations to that data must occur within the store. The risk of data pollution is greatly reduced.

🔗 **Source:** [codementor.io](https://www.codementor.io/blog/5-essential-reactjs-interview-questions-du1084ym1)
### Q26: What does Side effects mean in React? Provide some examples.
> Topic: **React**<br/>Difficulty: ⭐⭐⭐⭐⭐

A **"side effect"** is anything that affects something outside the scope of the function being executed. These can be, say, a network request, which has your code communicating with a third party (and thus making the request, causing logs to be recorded, caches to be saved or updated, all sorts of effects that are outside the function.

There are more subtle side effects, too. Changing the value of a closure-scoped variable is a side effect. Pushing a new item onto an array that was passed in as an argument is a side effect. Functions that execute without side effects are called "pure" functions: they take in arguments, and they return values. Nothing else happens upon executing the function. This makes the easy to test, simple to reason about, and functions that meet this description have all sorts of useful properties when it comes to optimization or refactoring.

Pure functions are deterministic (meaning that, given an input, they always return the same output), but that doesn't mean that all impure functions have side effects. Generating a random value within a function makes it impure, but isn't a side effect, for example. React is all about pure functions, and asks that you keep several lifecycle methods pure.

🔗 **Source:** [reddit.com](https://www.reddit.com/r/reactjs/comments/8avfej/what_does_side_effects_mean_in_react/)

> *Thanks 🙌 for reading and good luck on your interview!* <br/>*Please share this article with your fellow devs if you like it!* <br/>*Check more FullStack Interview Questions & Answers on 👉 [www.fullstack.cafe](https://www.fullstack.cafe)*