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?
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.
- Understanding the Virtual DOM
- Virtual DOM Explained
2. What’s JSX?
Take this JSX:
<div className="sidebar" />
React.createElement( 'div', className: 'sidebar' )
- 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?
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.
shouldComponentUpdate). A class-based component is an ES6 class that extends React’s
Component class and, at minimum, implements a
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.
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).
- Functional Components vs Class Components in React
- Functional vs Class-Components in React
4. What are keys used for?
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.
- Lists and Keys
- Understanding React’s key prop
5. What’s the difference between state and props?
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.
- props vs state
6. Why call setState instead of directly mutating state?
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.
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
props as its two arguments:
this.setState((state, props) => ( counter: state.counter + props.increment ));
15 React Interview Questions with Solutions