JS (React) Technical Interview: Structure, Coding Tasks Examples, Tips

Last year I was involved in many technical interviews, and in this article, I want to share my experience.

The first step in every interview is preparation. This is a very important part, and it starts with reading the candidate’s CV. It shouldn’t be very long, but it should contain all the main information about the candidate’s achievements in his previous places and his tech skills. It is very good to check that the CV contains information about skills that are required for the target position. If something is not clear, you can ask HR to clarify these questions before the interview.

When I clarified all the basic information, I started to think about the questions and practical tasks for the candidate. Theoretical questions should cover all target areas, from general knowledge in programming to specific things based on target position needs: target programming language knowledge, programming paradigms, development flow, CI/CD process, frameworks based on target tech stack, etc.

Coding skills are also very important, so it will be very useful to prepare some practical tasks based on requirements. This will help us to check the candidate’s coding skills, and how he can understand requirements and asks questions if something is not clear.

We can split an interview into several parts:

• Introduction
• Candidate’s self-presentation
• Main part: tech and soft skills checks
• Questions and answers

Introduction

Every interview starts with an introduction. I introduce myself and my company and ask some questions about connection quality (if we’re talking about an online interview). Then it’s time for small talk. We can talk about anything, the weather, music, or traveling. The idea of such small talk is to create a good and warm atmosphere and reduce anxiety levels.

For most candidates, tech interviews are always stressful; for some, it’s very small, and for others, very big. Our small talk helps us to relax a little bit. Five minutes is more than enough for this.

Candidate’s Self-Presentation

The next step is the candidate’s self-presentation. Usually, it takes 5-8 minutes. During this part, the candidate talks about his experience, his previous projects, what roles he played, and the duties he had. I like to ask some additional questions. For example, what was the most challenging task during your last project, and how did the candidate resolve it? This helps me create a general picture.

Main Part: Tech and Soft Skills Check

The biggest part is checking tech skills. During the preparation, we create a list of questions, and this helps us. We already know what to ask. Very often, I combine this conversation with some practical tasks. We can discuss some topics and then I propose a small coding task to check the discussed areas from a practical side.

Sometimes I create a conversation around the coding challenge. For some candidates, such a format is easier than theoretical discussion. Of course, very often you need to update the discussion scenario on the fly as, during the conversation, you understand that it’s needed to discuss something else or the same thing but more deeply.

Questions and Answers

This is the final step. In the end, I spend 5-10 minutes answering the candidate's questions. I think this is also a very important part, as an interviewee wants to know some additional information about the potential project or the company. This is also a good time to understand how the candidate asks questions. This is important for us because, during our everyday work, we need to ask a lot of questions: to our team members, our designers, and project managers to clarify a lot of things or requirements.

That was the last part for the interviewee, but not for us. After the interview, the very important step is to provide feedback to the HR team. You need to analyze the interview, and how it went, provide complex information with a description of the candidate’s skills, tech, and soft, and provide information about his gaps.

Also, you need to provide suggestions for candidates as to what they need to improve and where they can find this information.

I prefer to write notes during the interview. This helps me later with writing the feedback.

JavaScript Practical Tasks Examples

Every time I need to think about which practical tasks to give. This phase is very important for us. We need to check our coding skills, way of thinking, and ability to create good understandable code, all during live sessions. In most cases, I split practical tasks into 2 parts: JS Core tasks and React tasks (as I'm specialized in this library).

Previously I’ve tried to create tasks in my mind during the interview, but this is not a very effective way, because I need to concentrate on the discussion and don’t have the ability to think also about the code. That’s why I’ve created a couple of tasks and used them for most of my interviews with variations for every particular case. 

I always suggest 2-3 coding tasks in native JS to see how candidates understand the main JavaScript concepts. It’s very good when you know any framework or library, but without perfect JS core knowledge, you can’t be a successful developer.

Task 1: Phrase Reverse

This is a simple task. The main idea is to create logic that will reverse words in the target phrase. For example, we have this sentence: This is an example!. The reversed variant will be sihT si na !elpmaxe. Here we can check how the candidate knows arrays and arrays methods. One of the ways we can implement this is as follows:

function reverseWords(str) {  
    return str.split(' ').map((item) => {    
        return item.split('').reverse().join('');  
    }).join(' ')
}

// shorter variant
const reverseWords = str => str.split(" ").map((item) => item.split("").reverse().join("")).join(' ');

Task 2: Knowledge of Event Loop

This is a theoretical task where we can ask for an order in which we will see logs. Let’s imagine that we have this piece of code:

console.log('1');

setTimeout(function(){    
    console.log('2')
}, 0)

function test() {  
    console.log('3');
}

test();
Promise.resolve().then(function(){console.log('4')})
console.log('5')

The correct order in console.log will be 1, 3, 5, 4, 2. The first 3 numbers are easy. But then we will see 4. This is because promise will be pushed to the microtasks queue in an event loop, and this queue has higher priority before macro tasks. Finally, in the end, we have 2 in timeout.

Task 3: "This" Keyword

This small task helps to check the candidate’s understanding of this keyword: how it works and how we can use it. Here is the code:

const object = {  
    name: 'John Cohnor',  
    printName() {    
        console.log(this.name);  
    }
}
object.printName(); // what we will see here

const printName = object.printName;

printName(); // what we will se in console here

There are two questions: What will we see in object.printName()? Here we call method printName, and this is a point to object. The correct answer is John Cohnor. In the next line, we save our method to the new variable and then call it. In this case, we will lose our context, and we will se undefined. To fix this case we can bind context in const printName = object.printName.bind(object) or we can use call/apply and call the function with the correct context printName.apply(object)

Task 4: JS Core + DOM

The next task is a task to implement a simple timer in Vanilla JS to see how candidates can interact with HTML elements. We have an existing HTML layout. The idea is to create a timer. When we click Start, the timer should start, we should see counting in the display every second, and the Start button transformed to Pause. We can click Pause, and the timer will pause. Then we can click Resume and time will continue. The Stop button will stop the timer and reset the display to the initial value of 0.

<div>  
    <div id="display">0</div>  
    <button id="start">Start</button>  
    <button id="stop">Stop</button>
</div>

The basic solution cab is in imperative style. For more experienced developers, we can try to ask to use more interesting approaches, i.e., use OOP, etc.

const DEFAULT = 0;
const display = document.getElementById('display')
const startButton = document.getElementById('start')
const stopButton = document.getElementById('stop')

let interval;
let timer = 0;

function handleStartClick () {   
    if(/Start|Resume/.test(startButton.textContent)) {    
        startButton.textContent = 'Pause';    
        interval = setInterval(() => {       
            timer += 1;       
            display.textContent = timer;    
        }, 1000);  
     } else {      
         clearInterval(interval);    
         startButton.textContent = 'Resume';  
     }
}

function handleStopClick () {  
    clearInterval(interval);  
    startButton.textContent = 'Start';  
    display.textContent = 0;  
    timer = 0;
}
startButton.addEventListener('click', handleStartClick);
stopButton.addEventListener('click', handleStopClick);

Task 5: Array

Here we have an array of employees with their ids, names, and id of line managers. The task is to create a function that should take the initial array and id of the employee and return an array of all managers' IDs in a hierarchy.

Initial array:

const employees = [   
    { employeeId: 11, name: 'John', managerId: 11 },   
    { employeeId: 50, name: 'Todd', managerId: 73 },   
    { mployeeId: 150, name: 'Alex', managerId: 200 },  
    { employeeId: 73, name: 'Sara', managerId: 11 },   
    { employeeId: 200, name: 'Alex', managerId: 50 },  
    { employeeId: 100, name: 'Alex', managerId: 150 }, 
]; 

How it should work:

• getManagers(employees, 200) should return an array of managers' ids in the hierarchy [50, 73, 11]
• getManagers(employees, 11) should return [11]
• If there are no managers, then should return an empty array []

A simple implementation for this task can be based on a recursion:

function getManagers(employees, id) {        
    const result = [];  
    
    function findManager(employees, id) {       
        const targetEmployee = employees.find((item) => item.employeeId === id);       
        
        if (!targetEmployee) return;          
        if (targetEmployee.managerId !== id) {           
            result.push(targetEmployee.managerId);                
            findManager(employees, targetEmployee.managerId);            
        } else if (!result.includes(targetEmployee.managerId)) {
            result.push(targetEmployee.managerId);            
        }      
    }     

    findManager(employees, id);     
    return result; 
}

React Coding Tasks

As I mentioned I'm an expert in React stack, and I also suggest 1-2 coding tasks in this stack. 

Task 1: Component Which Will Fetch Data and Render It

It is quite easy. I want to see how candidates can create components, use hooks (if we talk about functional components), and create simple logic. The description is next: we need to create a component that should call some fake API on the component mount, get the data, and render it.

Candidates can use any approach. It can be a class component or functional. Candidates can use "fetch" or "Axios." More experienced developers can try to move to fetch logic to a custom hook. I think it’s a good starting point to see if does candidate can use React.

Task 2: Component With Some Interactions

In this task I give the next component:

const Component = () => {    
    return (        
        <>            
            <input type="number" placeholder="Please type any number from 0 to 9" />
            <select />                        
            <span>You select number: </span>
            <button disabled>Show selected option</button>        
        </>    
    );
};

The description for this task is as follows:

1. We can type in input any number from 0 to 9.
2. Based on which number we type in input, we will see select show the corresponding number of options. Users can choose any option in select.
3. After selecting any option, the button becomes enabled. We can click on it and see in span which option we have selected. After such a click, all components should move to the initial state.

Task 3: Seconds Counter

The description is next. We have 3 small components: input and 2 buttons, and main component Countdown. We need to implement a counter which will countdown every second from the typed number to 0:

const Countdown = () => {  
    return (    
        <>      
            <div>Countdown: <span>{"place for countdown"}</span></div>
            <div>
               <InputCount />      
            </div>
            <div>        
               <PauseResumeButton />     
            </div>
            <div>        
                <CancelButton />      
            </div>    
        </>  
     );
};

const InputCount = () => {  
    return <input placeholder="Please set time" />;
};

const PauseResumeButton = () => {  
    return <button>Start</button>;
};

const CancelButton = () => {  
    return <button>Cancel</button>;
};

There are 2 subtasks:

1. We can type in input time in seconds from 1 to 60, for example, 10.  Then we click on the Start button and counter start to count every second from 10 to 0. The display section shows it. Text on the Start button during counting should be changed to Pause. When we click on Pause , the countdown paused, and the Pause button changed to Continue. Click on Continue should continue the countdown, and the button again changed to Pause. When the countdown is 0, the counting should be stopped and buttons return to the default state.
2. Clicking on Cancel should immediately reset counting on any stage and set Buttons to default values.

The last task is a little bit tricky. It looks easy, but there are some hard places. 

I hope that this story will be helpful to someone who is also involved in the interview process.