Javascript is required
·
8 min read

My Top React Interview Questions

My Top React Interview Questions Image

This article summarizes a list of React interview questions that I would ask candidates and that I get often asked in interviews.

1. What is React?

React is a "JavaScript library for building user interfaces" which was developed by Facebook in 2011.

It’s the V in the MVC (Model - View -Controller), so it is rather an open-source UI library than a framework.

2. What are the advantages of React?

  • Good performance: due to VDOM, see #17.
  • Easy to learn: with basic JavaScript knowledge you can start building applications. Frameworks like Angular require more knowledge about other technologies and patterns like RxJS, TypeScript, and Dependency Injection.
  • One-way data flow: this flow is also called "parent to child" or "top to bottom" and prevents errors and facilitates debugging.
  • Reusable components: Re-using React components in other parts of the code or even in different projects can be done with little or no changes.
  • Huge community: The community supplies a ton of libraries that can be used to build React applications.
  • It is very popular among developers.

3. What are the disadvantages of React?

  • As React provides only the View part of the MVC model you mostly will rely on other technologies in your projects as well. Therefore, every React project might look quite different.
  • Some people think that JSX is too difficult to grasp and too complex.
  • Often poor documentation for React and its libraries.

4. What is JSX?

JSX (JavaScript XML) allows us to write HTML inside JavaScript. The official docs describe it as "syntax extension to JavaScript".

React recommends using JSX, but it is also possible to create applications without using JSX at all.

A simple JSX example:

const element = <h1>Hello, world!</h1>

5. How to pass data between components?

  1. Use props to pass data from parent to child.
  2. Use callbacks to pass data from child to parent.
  3. Use any of the following methods to pass data among siblings:

6. What are the differences between functional and class components?

Hooks were introduced in React 16.8. In previous versions, functional components were called stateless components and did not provide the same features as class components (e.g., accessing state). Hooks enable functional components to have the same features as class components. There are no plans to remove class components from React.

So let's take a look at the differences:

Declaration & Props

Functional Component

Functional components are JavaScript functions and therefore can be declared using an arrow function or the function keyword. Props are simply function arguments and can be directly used inside JSX:

1const Card = (props) => {
2  return <h2>Title: {props.title}</h2>
3}
4
5function Card(props) {
6  return <h2>Title: {props.title}</h2>
7}

Class component

Class components are declared using the ES6 class keyword. Props need to be accessed using the this keyword:

1class Card extends React.Component {
2  constructor(props) {
3    super(props)
4  }
5
6  render() {
7    return <h2>Title: {this.props.title}</h2>
8  }
9}

Handling state

Functional components

In functional components we need to use the useState hook to be able to handle state:

1const Counter = (props) => {
2  const [counter, setCounter] = useState(0)
3
4  const increment = () => {
5    setCounter(++counter)
6  }
7
8  return (
9    <div>
10      <p>Count: {counter}</p>
11      <button onClick={increment}>Increment Counter</button>
12    </div>
13  )
14}

Class components

It's not possible to use React Hooks inside class components, therefore state handling is done differently in a class component:

1class Counter extends React.Component {
2  constructor(props) {
3    super(props)
4    this.state = { counter: 0 }
5    this.increment = this.increment.bind(this)
6  }
7
8  increment() {
9    this.setState((prevState) => {
10      return { counter: prevState.counter + 1 }
11    })
12  }
13
14  render() {
15    return (
16      <div>
17        <p>Count: {this.state.counter}</p>
18        <button onClick={this.increment}>Increment Counter</button>
19      </div>
20    )
21  }
22}

7. What is the Virtual DOM?

The Virtual DOM (VDOM) is a lightweight JavaScript object and it contains a copy of the real DOM.

Real DOMVirtual DOM
Slow & expensive DOM manipulationFast & inexpensive DOM manipulation
Allows direct updates from HTMLIt cannot be used to update HTML directly
Wastes too much memoryLess memory consumption

8. Is the Shadow DOM the same as the Virtual DOM?

No, they are different.

The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components.

The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.

9. What is "React Fiber"?

Fiber is the new reconciliation engine in React 16.

Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

Read more.

10. How does state differ from props?

Both props and state are plain JavaScript objects.

Props (short for "properties") is an object of arbitrary inputs that are passed to a component by its parent component.

State are variables that are initialized and managed by the component and change over the lifetime of a specific instance of this component.

This article from Kent C. Dodds provides a more detailed explanation.

11. What are the differences between controlled and uncontrolled components?

The value of an input element in a controlled React component is controlled by React.

The value of an input element in an uncontrolled React component is controlled by the DOM.

12. What are the different lifecycle methods in React?

React class components provide these lifecycle methods:

  • <