Top 4 Mistakes in React Interviews

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.

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

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

<>
  {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.

<>
  {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

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.

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:

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?

<>
  {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:

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