DEV Community

Cover image for Youtube Review: Beginner React.js Coding Interview (ft. Clément Mihailescu)
SeongKuk Han
SeongKuk Han

Posted on • Updated on

Youtube Review: Beginner React.js Coding Interview (ft. Clément Mihailescu)

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

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


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


<button onClick={increaseCounter}>Increase Counter</button>
Enter fullscreen mode Exit fullscreen mode

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

Instead of

setCounter(counter + 1);
Enter fullscreen mode Exit fullscreen mode

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('');
  } catch (err) {
    return null; // I used null to clarify there is no data. but it could be different if the function had a return type.
Enter fullscreen mode Exit fullscreen mode

Combining Data 18:06


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

Type definition in 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 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.

Axios Param 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.

API response structure

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!

Top comments (0)