3 React Interview Questions for Junior Devs
Tags: react, javascript, interviewprep
Published: 2019-06-03 15:34:44

---
title: 3 React Interview Questions for Junior Devs
published: true
description: Three React questions you might see in interviews for entry-level developer positions.
tags: React, Javascript, Interview prep
---

I was asking some friends about tricky React questions they encountered during their job search and here are a few that stuck out. (Please note that these were all questions for entry-level jobs, so more advanced developers might find these questions less difficult.) Take a minute to guess the answers for yourself before scrolling to see the solutions at the bottom!

### 1) Inside of a class component, if state is initialized outside of the constructor function as well as inside of the constructor, which state object will override the other? 

For example:

```
class Example extends Component {
   constructor(props){
      super(props)

      this.state = {
         location: "inside constructor"
      }
   }

   state = {
      location: "outside constructor"
   }
}

```

If you were to console.log state inside of render, would the value of location be "inside constructor" or "outside constructor"?

### 2) When creating a functional component, why do we still need to import the React library?

```
import React from 'react'

const Example = (props) => {
   return (
      <div>Example</div>
   )
}
```

Unlike class components, functional components do not extend the Component class from React. So why do we still import the React library?

### 3) Given the following example, in what order will the console.logs run?

```
class One extends Component {
   componentDidMount(){
      console.log("One is mounted")
   }

   render(){
      <Two />
      <Three />
   }
}

class Two extends Component {
   componentDidMount(){
      console.log("Two is mounted")
   }
}

class Three extends Component {
   componentDidMount(){
      console.log("Three is mounted")
   }
}
```

Take a minute to guess the answers! When you're ready, scroll below.

## Solutions!

### 1) Which state object will override the other?

**Answer:** The state that is initialized inside the constructor will override the state that is initialized outside the constructor. This is because, in terms of how the code compiles, the class will *first* initialize all variables and *then* run the constructor lifecycle method.

So concerning this example:

```
class Example extends Component {
   constructor(props){
      super(props)

      this.state = {
         location: "inside constructor"
      }
   }

   state = {
      location: "outside constructor"
   }
}

```

Inside of render, if we were to use console.log to inspect our state, we would see "inside constructor" as the value of location.

### 2) When creating a functional component, why do we still need to import the React library?

**Answer:** Because we need the React library in order to interpret the JSX that the functional component is returning. After all, JSX is syntactic sugar for the old method of creating objects in the React DOM, i.e. React.createElement(). So even though we are not extending the Component class, we still need the React library in order to create elements on our webpage.

### 3) In what order will the console.logs run?

**Answer:** The logs will run in this order:

```
"Two is mounted"
"Three is mounted"
"One is mounted"
```

In other words, the parent component is the last one to finish mounting. This is because the children components need to mount before the parent is considered fully mounted.

If we were to take note of when the components begin to mount and when they finish mounting, it would look something like this:

```
** One begins mounting **

** Two begins mounting **
// Two finished mounting

** Three begins mounting **
// Three finished mounting

// One finished mounting

```

And that's it! If you've run into tricky React questions that aren't on this list, feel free to mention them in the comments.