This content originally appeared on DEV Community and was authored by Andrew Lee
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>{item}</p>
})
</>
We can use this shortened syntax too which lets us omit the return.
<>
{list.map((item) => (
<p>{item}</p>
))
</>
However, many candidates forget to return inside of the map and get frustrated why the list isn't rendering.
<>
{list.map((item) => {
<p>{item}</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();
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 <p onClick={onItemClick}>{item}</p>
})
</>
We do this by passing in the item to the click handler:
<>
{list.map((item) => {
return <p onClick={() => onItemClick(item)}>{item}</p>
})
</>
This content originally appeared on DEV Community and was authored by Andrew Lee
Andrew Lee | Sciencx (2021-10-25T07:26:35+00:00) Top 4 Mistakes in React Interviews. Retrieved from https://www.scien.cx/2021/10/25/top-4-mistakes-in-react-interviews/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.