3 Practical Tasks for Your Next React Interview

During the last months, I was involved in many technical interviews. Every interview is like a small challenge not only for the candidate but also for the interviewer and it’s not easy as it looks like. I spend several hours on every interview. Because you need to prepare for it: prepare questions based on candidates’ experience, prepare general topics to discuss, and practical tasks.

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. And all this during a live sessions. In most cases, I split practical tasks into 2 parts: JS Core tasks and React tasks. In this article, I want to share React tasks.

Previously I’ve tried to create tasks in my mind during the interview, but this is not a very effective way, cause I need to concentrate on the discussion and don’t have the ability to think also about the code.

So that’s why I’ve created 3 tasks and use them for most of my interviews. Sometimes I can make updates for every particular case, or ask for something else. But in general, I used a basic approach.

First task - 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 class component or functional. Candidates can use ‘fetch‘ or ‘Axios‘. More experienced developers can try to move to fetch logic to custom hook. I think it’s a good starting point to see if does candidate can use React

Second task - 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>
        </>
    );
};

And the description for this task is next:

1. We can type in input any number from 0 to 9.
2. Based on which number we type in input we will see in select the corresponding number of options. Users can choose any option in select.
3. After selecting any option the button become 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.

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

• 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 - counting should be stopped and buttons return to the default state

• Click 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. In the next articles if it will be interesting we can try to implement the last task

What do you think about examples? Which tasks do you use for React interviews?