React Live Coding Interview Tips

This blog post is not about how one should ace or nail the live coding interview for the junior frontend developer, but the practical advices on how to prepare for it and some tasks which might have been given.

All information in this post is based on my own experience and some research which I did in advance. It is not a set of rules of how you should do it, but more like what you can expect and how you can prepare.

Alright, with all that being said, let's imagine we have received that invitation to the next stage of job interview and it would be live coding technical interview. We have a mixture of excitement and fear and impostor syndrome all at once - that is totally fine, just give it a time to settle down :)

Now that we can think clearly again, we understand that there is a level of uncertainty and frustration connected with how we should prepare and what. There are few steps to get rid of those.

Analysing the Given Info

Let's analyse what info do we actually have on your hands.

1. We know it's a junior position - it means it doesn't have to be that difficult technical-wise.
2. We know you will be using React library - we are familiar with it, we used it so many times.
3. We know it would be live coding - it means they will ask us to share our screen and give us tasks which we have to code on the go.

But we still don't know what exactly gonna happen and what we should prepare or repeat. It's a good practice to ask the interviewer about it.

We can write a nice answer back, in which we say thank you for the invitation and ask politely what we should prepare. In most cases they will answer back with some detailed info like "you should write Hello World in a simple CRA project, you should also know how to work with data and events and how to fetch data from API".

Here we go! We have more info now on our hands and that removed uncertainty and frustration, so we can go ahead and make a plan for interview preparation.

Making a Plan for Interview Preparation

1. Go through the email from interviewer again and write down bullet points from it. Usually it contains a lot of clues of what we should prepare.
2. Google top 50 React interview questions and save the link - we want to repeat theory as well
3. Write down and save a coding solution for each bullet point (for example - fetch data from API - write down a code for fetching data with Fetch or Axios; events - write down a code for creating onClick() event and so on.)
4. Think about and find a person who could perform a mock interview for you - if you have such possibility of course. Otherwise find similar mock interview on YouTube and watch it.

Now that we have a precise plan, we can start your preparations and we will be more confident and calm right now, since we know exactly what we should repeat or prepare.

Preparing for the Interview

Here what we do:

• repeat the theory of React library

Keep in mind that the interviewer might ask to explain what is React, its main features, what is component, state, props and JSX. The purpose of that is mostly to see how to you can explain these concepts to another person. It's a good practice to say those loud while preparing.

• create a project in advance

It takes time to install CRA with package manager, so to avoid waiting time it's a good practice to do it in advance. remove all unnecessary code from it, so your App function has only return() in it with one div. Install all other dependancies which you think might be helpful to you or can be used (like axios, react-router-dom, bootstrap etc.)

• code the solutions for the bullet points

While coding the solutions, try to talk about what are you doing. Here is the example of possible explanation:
"In the return() function of App component we add a button with text Add Count. We add onClick()event to this button and this event will accept a function handleClick. Now we need to create this function. We create an arrow function handleClick and inside the function we increase the counter to 1. We use method setCounter to change the previous value of counter object to the new value".

• ask your friend/relative/fellow developer to make a mock interview This is a great way to prepare for the interview. It is possible to find out your weak sides and to improve them, as well as to improve your communication skills.

The Interview Day

So, during these 3-4 days before the interview we have prepared theory, practice and communication and feel ourselves much confident than before. Note, that live coding interview is done with timer (usually it's 45 minutes), so the interviewer will appreciate you being fast and to the point.

There are some good tips to use during the interview:

• always ask how the interviewer prefer you to do something (for example, if you have been asked to make a button, it's a good practice to ask if they want you to make a component or just simple JSX element).

• listen attentively to the given assignment
  If you didn't understand the task, ask to explain you once again. You can explain that by being nervous, not because you don't know how to do it. If the task is long, write down on paper the main points

• use shortcuts
  Its a very good practice to use keyboard shortcuts in your project. it shows that you are aware of how to save time and that you use your keyboard/text editor easily.

• know how to google
  Junior position doesn't expect that you know everything (it could be different for higher levels though). So you are definitely allowed to google. Make it your advantage. Instead of trying to remember the syntax of that function, don't waste your and interviewer time - just google it.

Possible Assignments

There is a list of possible tasks which the interviewer might ask to code:

• write "Hello World" on the page
• create a counter and increase it by clicking on button
• fetch data from given API and store it in variable
• fetch data from API on the first render of the component
• fetch data from given API when you click a button
• render fetched data to the page as a string
• if the data are Books for example, render only name and author of the book to the page
• transform the properties of a book you have just rendered into separate Book component
• render Book component to the page
• create another component which is a collection of books which contains Book component
• render collection of books component to the page
• give it some styling so it looks nice (usually here the margins/paddings/colour or grid/flex would be enough)

Conclusion

The live coding interview is an important part of hiring process. It gives the interviewer a quick possibility to see if we really understand the technology, which we claimed we know. Besides the coding part, it shows how we can explain and communicate our code to others, thus give them an impression how we will collaborate with other team mates. It shows also how quick we can understand the task and what we will use to perform it quick and effective.

I wish you all good luck in getting that dream job!

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

Comments

[john1625b]

great article. I've done a few of these and pretty much all of them is some variation of fetching API data, displaying it in a table and adding filtering to that table. Also just a Todo list app.

i recommend learning how to do parallel api fetches cause that gets asked often