Youtube Review: Beginner React.js Coding Interview (ft. Clément Mihailescu)
Tags: react, beginners, career, techtalks
Published: 2023-08-04 20:54:05

There are amazing videos on their channels. You will definitely find some useful content for yourself. 

https://www.youtube.com/@bawad
https://www.youtube.com/@clem@freeze

---

I have been watching YouTube videos that could help me prepare for my interview as a React developer, and I came across this video. The video was uploaded two years ago, however, if you are learning React, you might find it helpful.

While watching the video, I had thought like "if I were to implement this, I would have done like this.". 

I am going to share my thoughts about some content in the video. I am not saying that my approach is correct or not. These are just my opinions and they could be beneficial or not.

I would also like to hear your opinions. if you have any, please comment down below.

---

### Event Handler [2:41](https://youtu.be/gnkrDse9QKc?t=161)

![Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9660zbamxh0bc1trb72.png)

I'd prefer to define a function instead of inline function.

```javascript
<button onClick={() => {
  // ...
}}>Increase Counter</button>
```

Instead

```javascript
<button onClick={handleIncreaseCounterClick}>Increase Counter</button>

or

<button onClick={increaseCounter}>Increase Counter</button>
```

I believe that with this way, you could give more hints to readers through function nam.

Additionally, if you define function in advance, you can use `useCallback` right away when needed.

Moreover, you can use the setter function here:


```javascript
setCounter((prevCounter) => prevCounter + 1);
```

Instead of

```javascript
setCounter(counter + 1);
```

If you need to refer the previous data, it could be a better choice, and also it could prevent reference mistakes and reduce a dependency `counter`.

---

### Async [12:08](https://youtu.be/gnkrDse9QKc?t=728)

![Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iai6g33mxit22vrxt6q7.png)

The `async` keyword is used where you intend to use the `await` keyword.

In this case, he should have used the `async` keyword in the function of `useEffect`. However, since you shouldn't return a `Promise` from the `useEffect` function, you should use `then` or you can use `async` with an anonymous function for one-time usage.

If I were using `async` for the `fetchRandomData` function, I would have implemented it like this.

```typescript
const fetchRandomData = async () => {
  try {
    const res = await axios.get('https://randomuser.me/api');
    return res.data;
  } catch (err) {
    console.error(err);
    return null; // I used null to clarify there is no data. but it could be different if the function had a return type.
  }
}
```

---

### Combining Data [18:06](https://youtu.be/gnkrDse9QKc?t=1086) 

![Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ka8ntfi0kaxw6wjd0hoz.png)

Depending on situation, I might have considered adding a new field `fullname` to `UserInfo`.

---

### Type definition in Array.map [20:06] (https://youtu.be/gnkrDse9QKc?t=1206)

![Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j81wzyoa7z91ci8pxbg4.png)

If he had defined the type of `userInfos` as `UserInfo`, he wouldn't have needed to specify a type in the parameters of `Array.map`. In fact, he made a mistake. `UserName` should have been `UserInfo`.

---

### Axios params Option [24:10] (https://youtu.be/gnkrDse9QKc?t=1450)

![Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6u8gh7rd6wgyylxf6fn.png)

If you use `axios`, you can send URLParameters through 
 the `params` option.

![Axios Param Option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3m90ic65rf8catlss3t.png)

---

### Pagination [25:53] (https://youtu.be/gnkrDse9QKc?t=1553)

![Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qm3hbk2hlgn7n6noz1a1.png)

There were several ways I thought of to implement the pagination feature. 

One approach is to store all response data.

He could still make `userInfos` from the response list. In this case, `useMemo` would be useful to reduce an unnecessary loop. Consequently, he wouldn't need to manage `page` independently as he could get the lastPage from the last element of the response list.

Here is structure of the API response data.

![API response structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwqld6dzeo9h7lxrr5fa.png)

---

### useRef [33:10](https://youtu.be/gnkrDse9QKc?t=1990)

![Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kf6a02gdbdase42jjo6.png)

It was a good point and it made me think a lot. He used `useRef` to address the linter's warning. However, to be honest, I would rather disable the linter for that line by commenting. This is because `useRef` makes the function independent of any dependencies used within the function.

`useRef` can resolve many tricky situations in `React` such as unnecessary dependencies and re-render. However, if you abuse `useRef`, it might violate some rules of `React`.

---

As someone preparing for frontend interviews, I found this video helpful and enjoyable to watch.

I hope you also find it helpful.

Happy Coding!