3 React Interview Questions for Junior Devs

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.

Comments

[PlayBossWar]

Thanks a lot for this.
This has helped me gaining a bit of self estime in myself.
I've correctly answered everything so maybe I'm not a noob after all.

[Eugene Karataev]

Thanks for the post, I think all three questions are good to ask on an interview.

Recently I asked myself the question 2. It's true that you need to import React because the JSX <div /> is React.createElement('div') under the hood. But it's not necessary to import React in every file, you can just make React globally available.

Eugene Karataev

Jun 1

Here's a dirty hack to avoid importing React in every file with JSX. Just add React to window before ReactDOM.render.

import ReactDOM from 'react-dom';
import React from 'react';
import App from './App';

window.React = React;
ReactDOM.render(<App/>, document.querySelector('#mount'));

Now App.js works without throwing a React is not defined error.

// App.js 
export default function() {
  return <div>I am App!</div>
}

This hack is just to illustrate React dependency management. Don't use it in the production code! 😄

[Demian Sims]

Helen, you rock!!

[Edwin Lin]

Amazing! Thanks for posting these.

[Lucas Olivera]

I only got right number 2, guess I'll have to practice more! Please make more articles like this!

[bvmcode]

Great post! Just curious...Does this knowledge com from studying up on interview questions out there or from experience of digging into React internals?

[Helen Liutongco]

These are actual interview questions that my friends were asked during their job search. I think you can definitely encounter the answer to question #2 just by building React apps normally (and forgetting to import React), but the other two would require research or testing things out manually. I vaguely remember being taught the answer to #3 when I was first learning React, but I personally was clueless about #1 until I was asked this question.