What to answer when questions about React appear at job interview?

1
2
3
4
5
6
7
8
9

const Component = () => {
    return (
        <React.Fragment>
            <ComponentA />
            <ComponentB />
            <ComponentC />
        </React.Fragment>
    )
};

Alternatively, you can use the following syntax:

1
2
3
4
5
6
7
8
9

const Component = () => {
    return (
        <>
            <ComponentA />
            <ComponentB />
            <ComponentC />
        </>
    )
};

I prefer the latter one.

React Context API (v.16.3.0)

This feature is one of the most important ones. It solves the problem of passing data down from the parent component to the bottom level child component. Drilling down props is one of the biggest challenges in regular React development. Basically, it means that you have to pass some values from a parent component to deeply nested component, while the values are not used by any components in between them.

You would have to define props validation for each component or just pass the props without a validation (risky!), without thinking about what kind of props is really needed.

Let's take a look at the example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const NestedChild = ({ importantProp }) => <h3>{importantProp}</h3>;
const Child = ({ importantProp }) => {
    return (
        <div>
            <h2>Child</h2>
            <NestedChild importantProp={importantProp}/>
        </div>
    );
}
const Parent = ({ importantProp }) => {
    return (
        <div>
            <h1>Parent</h1>
            <Child importantProp={importantProp} />
        </div>
    )
}

In the sample above you can see a classic case of props drilling. The importanProp is not used by both Parent and Child components, but it's used only by NestedChild component.

When there's not so many props drilling down, then we can live with it, but when there's much more of them, then it becomes difficult to maintain in the long term.

The React Context API is coming to the rescue in such situations.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

const initialValue = 'some-important-prop'
const ImportPropContext = React.createContext(initialValue);
 
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
 
        this.state = {
            importantProp: initialValue
        }
    }
 
    render() {
        return (
            <ImportantPropContext.Provider value={this.state.importantProp}>
                <Parent />
            </ImportantPropContext.Provider>
        );
    }
}
 
const NestedChild = () => {
    return (
        <ImportantPropContext.Consumer>
            {(importantProp) => <h3>{importantProp}</h3>}
        </ImportantPropContext.Consumer>
    )
}

As you can see, there's no need to define importantProp prop in intermediate components. We've defined a context in the topmost component, passed the value through the context provider and consumed with the context consumer.

One thing different here is that in the NestedChild component, in order to consume a value, you have to pass a function as a children. Then, inside the function you can get the value and render it.

With hooks it will get even simpler (in React 16.8).

React.lazy() (v.16.6.0)

Developing apps in React is not very complicated task and it's relatively easy to add new features to an existing codebase. But when the codebase grows, the app weight grows as well. Oftentimes you don't need all the app features loaded at the same time. This is the place where the code-splitting comes to the rescue.

With React, since version 16.6.x, you can tell React and bundlers which components are lazily loaded and can be loaded on demand. That version introduced React.lazy() function converts a function rendering a component to a JS Promise, that will be resolved when needed.

The React.lazy() function has to be used along with Suspense React component, that knows how to handle lazy-loaded components. See the example:

1
2
3
4
5
6
7
8

const Child = React.lazy(() => import('./Child'));
const Parent = () => {
    return (
        <React.Suspense fallback={<div>Loading Child component ...</div>}>
            <Child />
        </React.Suspense> 
    )
};

The React.Suspense component takes one prop: fallback. This prop accepts any React element as a value and it's used to display a fallback view while loading children component.

This feature can be extremely useful while loading heavy features on demand. With small components the difference will be unnoticed.

React hooks (v.16.8.0)

This is a real game changer in React development. I still remember the first time when I heard about it. At first it was a strange concept, that I started to like. IMO, it is easier to develop new features with it now.

The concepts of handling state in React apps by using hooks was englightening. For the simple state management you can omit using Redux and start using hooks like React.useState, React.useReducer and React.useContext. With these 3 hooks you can simulate Redux in simpler use cases.

The list of hooks coming out of the box with React 16.8.x is as follows:

• useState - for handling state management for a single property,
• useReducer - for handling action-like state management,
• useContext - for dealing with contexts in the codebase,
• useEffect - a kind of replacement for componentDidMount, componentDidUpdate, componentWillUnmount,
• useRef - allows to deal with keeping references to variables that would be overwritten by component re-renders,
• useCallback - makes a reference to instance of component's inner function,
• useMemo - especially useful when component's inner function has to make a lot of heavy calculations. Stores the output of calculations.
• useLayoutEffect,
• useDebugValue,
• useImperativeHandle

The last three hooks have never been used by myself in web app development. I suggest reading about them in the hooks docs.

Another cool fact is you can develop own hooks that fulfil project needs.

React developer position sample questions

In this section I will provide some sample questions that might appear during any job interviews for a React developer position. Answers to these questions will be provided as well.

What is JSX?

JSX is a shorthand for JavaScript XML. This syntax allows using HTML markup and JS code next to each other. It's a React approach for templating components.

How to manage state in React apps?

There are many ways of managing component state in React. Some of them were already mentioned earlier, like:

• using specific hooks for state management,
• using specifc hooks for working with context,
• using Redux or any other library that allows to work with state in a specific way.

It's worth to mention, that state is responsible for dealing with internal component state. Cannot be directly affected from outside of component.

What's the difference between state and props?

Props are variables injected to a component from another component that wraps it. Props look like HTML attributes, but they allow to pass a reference to any kind of values. While native HTML attributes cannot pass information from complicated types like functions or objects (unless it's stringified). You can control a child component by changing props values passed to a child component.

Meanwhile, state is internally scoped to a component. State variables cannot leak outside of a component, unless a component author decides so. It can be updated by props changes if desired.

Summary

I hope that after reading this article you'll get some basic knowledge regarding React features (or at least it's a refreshment of you already know). I wrote this article because during the recruitment processes I've been involved as a recruiter (building my frontend team) many people say that the only feature that came with React 16.x are hooks. I wanted to list some of the most useful features available in React. Because React 16.x is not only about hooks (while they're stars obviously).

At the end of the article, I decided to list some questions and answers to them. These questions often appear at screenings and first phases of technical interviews. It's good to know the answers.

If you have any comments, please do not hesitate to put them under this article.