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>
);
})
</>
Top comments (8)
I believe the code on problem 3 will not work, because 'await' is only allowed within async functions.
This would work:
Yup! Fixing it now..
Bruh, these are like too newb things.
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
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!
These are great points! I'll update the article with your suggestions.
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...
This is so much informative. Thank you