10 React Interview Questions for 2020

by michael krasnov | tags: ,

React is the most used UI library right now. It powers Facebook and countless other companies. In this compilation, I will list 10 React questions to help you nail your next interview.

What is the difference between Class-based components and Functional components?

The most obvious difference is syntax and definition. A functional component is a function that returns another component. A class-based component is a class whose render function returns another component. But which one should you use and when?

Prior to React 16.8, before Hooks were introduced, only the class-based components could hold internal state and lifecycle methods, and functional components could only rely on props (thus, they were stateless). So, it was easy: use classes for statefull components and functions for stateless.

Now, however, React Hooks such as useState and useEffect let you have state and lifecycle methods inside functional components. Additionally, React team encourages everyone to move away from class-based components due to performance issues and poor class implementation in JS. There are still a few features still missing from functional components, however. One of those are error boundaries, and in such cases you are forced to use class-based components.

Here are the examples from both approaches. This is the same component, implementing a counter button both in class-based components and in functional:

What is JSX? How is it transformed into JS?

JSX stands for JavaScript XML, and this is something React team came up with to simplify writing React code. JSX is, essentially, a language to define the components that we all love. For example, this is JSX code:

<SomeComponent someProp={someValue} />

This code, of course, cannot be understood by the browser or Node (or Deno). To make it runnable, transpilers like Babel are used. Under the hood, the code above is transformed into something like this:

React.createElement(SomeComponent, {someProp: someValue});

This is why you must have React imported in every file JSX is used. The code will be transpiled into something that calls this library directly, even if you do not see it. You can play around with Babel here, try pasting some of your code and learning what it actually looks like in runtime.

What is Props and how do you access it?

Props is a way to pass data from one component to its children. You can also pass down callbacks to inverse the direction and get data from children. Additionally, the child components will rerender if you change its props. You pass props to components like this:

<MyComponent myProp={myValue} />

You can then access this prop in a functional component:

function MyComponent(props) {
  return <h1>{props.myProp}</h1>;
}

And in a class component:

class MyComponent extends Component {
  render() {
    <h1>{this.props.myProp}</h1>;
  }
}

What is State and how do you use it?

State is a piece of data you need to persist between rerenders. It can be anything from value in a textbox to a timestamp for a timer. The component rerenders every time state is changed, and this creates certain restrictions on how do you update it. Here is how to access state in functional components using the useState hook:

const Field = () => {
  const [text, setText] = useState('');
  return <TextField value={text} onChange={setText} />;
};

useState take in 1 argument, that is the initial state. It returns 2 values: the state value and a function to change it. Now let’s look at how state is implemented in class-based components:

class Field extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <TextField 
        value={this.state.text} 
        onChange={(newText) => this.setState({text: newText})}
      />);
  }
}

Things are slightly different in classes. Firstly, you define the state in the constructor and can later access it using this.state. Note that unlike functions, classes can only have 1 state object (which can have multiple props). The setState function takes in an entirely new state object, replaces it and rerenders the component.

What is Global State and why do we need it?

While components have states, these states are local to them. You cannot directly access a component’s state from another component. Sometimes you have some data that needs to be displayed in many different places, such as user’s name, theme (dark/light mode), locale, and so on.

One way to do that is to define this state somewhere up in the tree and pass it down as props. However, this is hardly possible once you have more than 20+- components. Your code will become an unreadable mess. This is when you need to store global state.

What are some ways of managing Global State?

Two main approaches to managing global state in React applications is Redux and React Context.

Redux is a third-party library that is not part of React. It lets you define a global state object and query it in your components using selectors. Components, on the other hand send actions to modify the state. Redux modifies it and rerenders all the components that care for this particular change.

React Context is something that is part of React, unlike Redux. Context also provides you a way of handling global state. Unlike Redux, you can have multiple Contexts, and access them independently. The concert about Context, however, is performance issues when handling a huge number of actions. On the plus side, Context has much less overhead. You must decide which one to use based on the project requirements and scopes.

What is the difference between Dumb components and Smart components?

Dumb components and smart components are a design pattern in React. Essentially, it boils down to this: smart components handle the business logic and dumb components directly render the UI. Consequently, smart components are stateful and dumb components are stateless and rely solely on props.

What is the difference between Controlled and Uncontrolled components?

When we speak about controlled and uncontrolled components, we usually mean components that handle user input in some way. Uncontrolled is not a very good word, though. Every component is controlled, the question is by whom. For example, this is how we use a controlled component:

const App = () => {
  const [text, setText] = useState('');
  return (
    <Input value={text} onChange={setText} />
  );
}

In this case, we, as a developer, control the Input component. When the user types something, the onChange callback is fired (even before the user sees the text). The state is updated, and the component rerenders with new value. Here is an example of an “uncontrolled” component:

const App = () => {
  return (
    <input type='text' />
  );
}

This is an HTML input component. User can type text and it will display it. However, we do not control the value of it. Who does? The browser engine. Note that we hardly ever use uncontrolled components in React, since it will be notoriously hard now to get the input’s value.

What are the fundamentals of the Flux architecture?

Flux is a design pattern for developing large React applications. This is the continuation of Reactive programming patterns, particularly useful while working with the UI.

Flux consists of a store, which holds the global state of the application. The View then, is a function that takes the state and produces the UI. Ideally, the View must be pure and consistent, i.e. the same state will result in the same UI and UI never changes the state directly. Instead, it sends actions (events) to the Dispatcher. The Dispatcher will receive the actions, make the necessary changes to the State and notify the Views that they now have to rerender. The most popular libraries that implement Flux are Redux and RxJS.

What is the significance of keys when rendering arrays in React?

This is closely related to the React Reconciliation Algorithm. Essentially, if two components between rerenders in a list have the same key, React will treat them as the same component and not update. Additionally, if there is no key, React will not be able to optimize and you will suffer from many unnecessary rerenders. So, never use indexes as keys since indexes may change if items are rearranged and break everything. Also, never use random strings generated at runtime as keys since you will have many unnecessary rerenders. I understand that sometimes data you have will not have a unique identifier, but then you should just go and add it.

Closing notes

Thank you for reading, I hope you will have a successful interview soon. Stay subscribed for more articles on JS, React, and everything in between.

Resources

Get new content delivered to your mailbox:

leave a comment