15 React Interview Questions with Solutions

Here’s a great article from SitePoint

React’s popularity shows no sign of waning, with the demand for developers still outstripping the supply in many cities around the world. For less-experienced developers (or those who’ve been out of the job market for a while), demonstrating your knowledge at the interview stage can be daunting.

In this article, we’ll look at fifteen questions covering a range of knowledge that’s central to understanding and working effectively with React. For each question, I’ll summarize the answer and give links to additional resources where you can find out more.

1. What’s the virtual DOM?

Answer

The virtual DOM is an in-memory representation of the actual HTML elements that make up your application’s UI. When a component is re-rendered, the virtual DOM compares the changes to its model of the DOM in order to create a list of updates to be applied. The main advantage is that it’s highly efficient, only making the minimum necessary changes to the actual DOM, rather than having to re-render large chunks.

Further reading

• Understanding the Virtual DOM
• Virtual DOM Explained

2. What’s JSX?

Answer

JSX is an extension to JavaScript syntax that allows for writing code that looks like HTML. It compiles down to regular JavaScript function calls, providing a nicer way to create the markup for your components.

Take this JSX:

<div className="sidebar" />

It translates to the following JavaScript:

React.createElement(
  'div',
  {className: 'sidebar'}
)

Further reading

• What is JSX?
• JSX in Depth
• JSX in React Design Patterns and Best Practices

3. What’s the difference between a class component and a functional one?

Answer

Prior to React 16.8 (the introduction of hooks), class-based components were used to create components that needed to maintain internal state, or utilize lifecycle methods (i.e. componentDidMount and shouldComponentUpdate). A class-based component is an ES6 class that extends React’s Component class and, at minimum, implements a render() method.

Class component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Functional components are stateless (again, < React 16.8) and return the output to be rendered. They are preferred for rendering UI that only depends on props, as they’re simpler and more performant than class-based components.

Functional component:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Note: the introduction of hooks in React 16.8 means that these distinctions no longer apply (see questions 14 and 15).

Further reading

• Functional Components vs Class Components in React
• Functional vs Class-Components in React

4. What are keys used for?

Answer

When rendering out collections in React, adding a key to each repeated element is important to help React track the association between elements and data. The key should be a unique ID, ideally a UUID or other unique string from the collection item, but which can be an array index as a last resort:

<ul>
  {todos.map((todo) =>
    <li key={todo.id}>
      {todo.text}
    </li>
  )};
</ul>

Not using a key can result in strange behavior when adding and removing items from the collection.

Further reading

• Lists and Keys
• Understanding React’s key prop

5. What’s the difference between state and props?

Answer

props are data that are passed into a component from its parent. They should not be mutated, but rather only displayed or used to calculate other values. State is a component’s internal data that can be modified during the lifetime of the component, and is maintained between re-renders.

Further reading

• props vs state

6. Why call setState instead of directly mutating state?

Answer

If you try to mutate a component’s state directly, React has no way of knowing that it needs to re-render the component. By using the setState() method, React can update the component’s UI.

Bonus

As a bonus, you can also talk about how state updates are not guaranteed to be synchronous. If you need to update a component’s state based on another piece of state (or props), pass a function to setState() that takes state and props as its two arguments:

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

Further reading

Continue reading
15 React Interview Questions with Solutions
on SitePoint.

Source link