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

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

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

Instead

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

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

Instead of

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

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.

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

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

Type definition in Array.map 20:06

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

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

Pagination 25:53

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.

useRef 33:10

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!