DEV Community

Andrew Lee
Andrew Lee

Posted on • Updated on

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>
  })
</>
Enter fullscreen mode Exit fullscreen mode

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

<>
  {list.map((item) => (
    <p key={item.id}>{item.name}</p>
  ))
</>
Enter fullscreen mode Exit fullscreen mode

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
  })
</>
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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>
      })
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
    );
  })
</>
Enter fullscreen mode Exit fullscreen mode

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>
    );
  })
</>
Enter fullscreen mode Exit fullscreen mode

Top comments (8)

Collapse
 
ronicastro profile image
Roni Castro • Edited

I believe the code on problem 3 will not work, because 'await' is only allowed within async functions.
This would work:

  useEffect(() => {
    const fetchData = async () => {
         const res = await fetch("https://someurl.com");
         const json = await res.json();
         setList(json);
     }
    fetchData();
  }, []);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
andyrewlee profile image
Andrew Lee

Yup! Fixing it now..

Collapse
 
anatame profile image
Anatame

Bruh, these are like too newb things.

Collapse
 
rkallan profile image
RRKallan

I would never use a different tag other then button for clickEvents.
When using button there is no need to use the data attribute, there you can use the value attribute

My suggestion would be use button and value attribute
Or create for button a separate component

Collapse
 
andersbjorkland profile image
Anders Björkland

These are some nice little hurdles. Have you done these yourself ever once in a while?

For myself, I think the reducer pattern is my weak spot. Redux with classes works fine for me, but doing it the functional way... O boy, I should do this more often!

Collapse
 
andyrewlee profile image
Andrew Lee

These are great points! I'll update the article with your suggestions.

Collapse
 
abhishekraj272 profile image
Abhishek Raj

Never add onClick on each element unless necessary.

Put onClick on parent element and use Event Bubbling and Event Capturing.

javascript.info/bubbling-and-captu...

Collapse
 
akashsingh profile image
AKASH SINGH B • Edited

This is so much informative. Thank you