I remember my first interview for a Junior React Developer job. I was confident because I made simple React projects and practised CSS a lot. But in the interview, I found out I didn't know as much as I thought...

My interview experience

I was asked to do a live coding interview where I had to implement a button that reacted differently to various keystrokes. It sounded pretty simple, right? That's what I initially thought as well!

I implemented the basic button, and my first instinct was to use the onKeyDown event. However, that wouldn't work if the button wasn't focused.

Next, I added a ref to the button and incorporated a window-wide key-down event listener, implementing the functionality. And it worked!

Well, not exactly. Multiple keystrokes caused the event listener to run hundreds of times. Since the useEffect required a dependency on a state, the situation became even messier.

I couldn't figure out what went wrong for the life of me! The interviewer provided a hint about what could fix it (a cleanup return function in the useEffect), but since I didn't understand what the return function even did in the useEffect, I couldn't solve the problem.

Unsurprisingly, I didn't get the job. 😅

You never know everything

When I looked into the topics I messed up during the interview, I realised how many little things that I overlooked as a beginner were used in real-life projects.

That's when I decided to never think that I know everything about anything. Any framework or tool that you use as a developer will have sides of it that you won't see till you have worked for it for a long time in real projects. Even then, there will always be something to learn.

Overlooked topics to know before your first React interview

This is a series of blogs where I will be discussing each topic in detail. These are the initial topics I will be including in the series and will be published in the coming days. Feel free to recommend any more topics if you can think of any!

1. useEffect cleanups

2. Memoization in React

3. Basic inner workings of React

4. Some gotchas while rendering conditionally in React

5. Modularization

6. Gotchas while updating state in React

Conclusion

In conclusion, preparing for a React interview involves more than just knowing the basics and working on simple projects. It's essential to dive deeper into the framework, understand its inner workings, and be aware of common gotchas and best practices. By covering the overlooked topics listed in this article, you'll be better equipped to tackle real-world challenges and ace your first React interview. Remember, there's always something new to learn, so never stop exploring and improving your skills.