Top 4 Mistakes in React Interviews
Tags: react, beginners, javascript, webdev
Published: 2021-10-25 07:26:35

These are four common mistakes in React interviews. Sometimes the pressure of the interview makes us make silly mistakes. Hopefully reviewing this post will help before your next interview.

## 1. Map

When we have to render a list of items, we can use map within JSX.

```js
<>
  {list.map((item) => {
    return <p key={item.id}>{item.name}</p>
  })
</>
```

We can use this shortened syntax too which lets us omit the return.

```js
<>
  {list.map((item) => (
    <p key={item.id}>{item.name}</p>
  ))
</>
```

However, many candidates forget to return inside of the map and get frustrated why the list isn't rendering.

```js
<>
  {list.map((item) => {
    <p key={item.id}>{item.name}</p>  // need to return here
  })
</>
```

It's hard to locate this typo in an interview sometimes.

## 2. Updating Arrays and Objects

Whenever we mutate an array or object that's stored as a React state, we have to create a new instance. We run into errors when we mutate the state directly.

A part of me feels like this should have been abstracted away from developers completely so that we can just mutate the array. I made a cheatsheet on how to update arrays and objects in React: [https://dev.to/andyrewlee/cheat-sheet-for-updating-objects-and-arrays-in-react-state-48np](https://dev.to/andyrewlee/cheat-sheet-for-updating-objects-and-arrays-in-react-state-48np)

## 3. Making a network call

The fetch API is a tricky one to remember/implement on the spot during the interview, especially if we are used to using different libraries.

Sometimes, we have to do a quick fetch an API and it might seem silly to reach for a third party library. Remember fetch returns a promise of its response, and we have to convert it into JSON before we can read from it.

```js
const res = await fetch("https://someurl.com");
const json = await res.json();
```

To make a request when the component loads we can do something like the following:

```js
const SomeComponent = () => {
  const [list, setList] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch("https://someurl.com");
      const json = await res.json();
      setList(json);
    };
    fetchData();
  }, []);

  return (
    <>
      {list.map((item) => {
        return <p key={item.id}>{item.name}</p>
      })
    </>
  );
}
```

Fetch the data inside of a `useEffect` and update the state that we want to iterate over. `await` cannot be directly used inside of a `useEffect` so we have to create an async function first and then call it.

## 4. On click on a list item

Sometimes we have to render a list of items that mutates the state of the parent element. For example lets say we have a list of todo items. When we click on one of them we have to update the state in the parent.

Sometimes candidates get stuck on when happens on the `onClick`. How do we know which item was clicked?

```js
<>
  {list.map((item) => {
    return (
      <button
        key={item.id}
        onClick={onItemClick}
      >
        {item.name}
      </button>
    );
  })
</>
```

We do this by passing in the item to the click handler:

```js
<>
  {list.map((item) => {
    return (
      <button
        key={item.id}
        onClick={() => onItemClick(item)}
      >
        {item.name}
      </button>
    );
  })
</>
```