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: We can type in any number from 0 to 9. input Based on which number we type in we will see in the corresponding number of options. Users can choose any option in select. input select After selecting any option the become enabled. We can click on it and see in which option we have selected. After such a click, all components should move to the initial state. button span Third task - counter The description is next: We have 3 small components: and 2 , and main component . We need to implement a counter which will countdown every second from the typed number to 0: input buttons Countdown 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?

Fetch

Practical tasks for JavaScript interview

React: Redux Reducer With Object

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

3 Practical Tasks for Your Next React Interview

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Making HTTP Requests With Axios in TypeScript

10 Repositories to Help You 10x Your Performance on Technical Interviews

10 Repositories that Will Transform the Way You Approach Technical Interviews

10 JavaScript Interview Questions and Answers to Help you Land Your Next Role

10 GitHub Repositories to Follow

Making HTTP Requests With Axios in TypeScript

10 Repositories to Help You 10x Your Performance on Technical Interviews

10 Repositories that Will Transform the Way You Approach Technical Interviews

10 JavaScript Interview Questions and Answers to Help you Land Your Next Role

10 GitHub Repositories to Follow

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps