3 Coding Interview Challenges for Mid-level React Developers

React interview

React is one of the most popular front-end web frameworks. It is used to build interactive and dynamic web components. React comes with many benefits. It uses virtual DOM, JSX, and it is comparatively easier to learn and use.

React interviews can be challenging. There are several concepts in React. Most React interviews have coding challenges. These coding challenges depend on the experience of the developer. For a beginner, the coding challenges are focused on the way the developer uses the state or writes the JSX. 

For a mid-level experienced React developer, the coding challenges are aimed to check the working experience of the individual. The developer is expected to understand the challenge in the minimum time possible and solve it in an organized way. In this article, we will list the top 3 React coding challenges for a mid-level experienced developer.

Create a Counter but with a twist

Creating a basic counter with a button that increments the displayed value by 1 is a simple task. But with some added conditions, the same task can become tough. 

Suppose, we have a component, which contains a state variable (declared using the useState React hook) that tracks the value for the counter. The value is also displayed in this component, but the button that increments the value is present in the child component of this component. 

First, the interviewer expects you to find the possible ways to solve this problem. It can be solved using one of the following ways.

The redux way is too complex for such a challenge. But mentioning the global state in front of the interviewer shows your awareness.

Using render props is the easier way but only an experienced developer will be aware of the “render props” technique. 

The function to update the “count” is passed as props to the child component and then, it is used there.  But, the third way is the best and it will impress the interviewer the most because it uses Context. 

Context is one of the best features of React and every experienced React developer is expected to know React Context. 

First, the context is created. 

import React from "react";
const CountContext = React.createContext();

export default CountContext;

Then, a provider is used in the parent component. 

import React, { useState } from "react";
import Child from "./Child";
import CountContext from "./context";

const App = () => {
  const [count, setCount] = useState(0);

  const countHandler = () => {
    setCount(count + 1);
  };

  return (
    <CountContext.Provider value={{ count, countHandler }}>
      <Child />
      <h2>{count}</h2>
    </CountContext.Provider>
  );
};

export default App;

Finally, the useContext hook is used to access the function in the child component. 

import React, { useContext } from "react";
import CountContext from "./context";

const Child = () => {
  const context = useContext(CountContext);
  const { countHandler } = context;

  return (
    <div>
      <button onClick={countHandler}>Increment</button>
    </div>
  );
};
export default Child;

Context consumer can also be used in the child component but instead, use the useContext hook. This is because the hooks are preferred over the older ways. 

Add and Delete Items From the List 

This challenge is perhaps the most commonly asked React coding challenge for mid-level React developers. 

In this challenge, the developer has to create an input field with a button.

When the button is clicked, the text in the input field should be added below in a list. Moreover, whenever any list item is clicked, it should be removed from the list. 

The motive of this challenge is to check how good the developer is with forms, state, and lists. 

First, create the functionality to add the text written in the input field to the list. 

import "./App.css";
import React, { useState } from "react";
const App = () => {
  const [list, setList] = useState([]);
  const [value, setValue] = useState("");

  const changeHandler = (e) => {
    setValue(e.target.value);
  };

  const submitHandler = () => {
    setList([...list, value]);
    setValue("");
  };

  return (
    <div className="App">
      <input type="text" value={value} onChange={changeHandler} />{" "}
      <button onClick={submitHandler}>Add</button>
      <hr />
      <ul>
        {list.length > 0 &&
          list.map((item) => {
            return <li>{item}</li>;
          })}
      </ul>
    </div>
  );
};

export default App;

Try to use the state properly and make use of ES6 syntax like arrow functions and spread operator.

Next, create the functionality to remove the item from the list when it is clicked. This can be tricky but not if you have the experience. 

import "./App.css";
import React, { useState } from "react";
const App = () => {
  const [list, setList] = useState([]);
  const [value, setValue] = useState("");

  const changeHandler = (e) => {
    setValue(e.target.value);
  };

  const submitHandler = () => {
    setList([...list, value]);
    setValue("");
  };

  const deleteHandler = (item) => {
    setList(list.filter((ele) => ele != item));
  };

  return (
    <div className="App">
      <input type="text" value={value} onChange={changeHandler} />{" "}
      <button onClick={submitHandler}>Add</button>
      <hr />
      <ul>
        {list.length > 0 &&
          list.map((item) => {
            return <li onClick={() => deleteHandler(item)}>{item}</li>;
          })}
      </ul>
    </div>
  );
};

export default App;

So here, a function is added, which is invoked when a list item is clicked.

const deleteHandler = (item) => {
  setList(list.filter((ele) => ele != item));
};

Again, using the filter function indicates that you have experience working in React. 

Displaying Data Coming From an API

If you are a mid-level experienced React developer, you must have enough working experience for handling APIs. In this coding challenge, you will be provided with an API that will return some data, maybe, an array of objects. You have to display the data in the UI.

The main motive here is to check how and where the API is called by the developer. In React, there are two ways to call APIs.

• Axios
• fetch API

While fetch API is inbuilt, Axios is installed through NPM and is considered a better option. So first, install Axios using npm and then use the following API to fetch the data. 

https://jsonplaceholder.typicode.com/posts/1/comments

import React, { useState, useEffect } from "react";
import axios from "axios";

const App = () => {
  const [data, setData] = useState([]);
  const fetchData = async () => {
    const { data } = await axios.get(
      "https://jsonplaceholder.typicode.com/posts/1/comments"
    );
    setData(data);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      <ui>
        {data.map((item) => {
          return (
            <>
              <li>Id: {item.id}</li>
              <li>Name: {item.name}</li>
              <li>Email: {item.email}</li>
              <hr />
            </>
          );
        })}
      </ui>
    </div>
  );
};

export default App;

As mentioned earlier, the interviewers want to see how you call the API.

Here, Axios is used. Also, to handle the asynchronous request, ES6 async/await syntax is used. You can also use promises.

Another important part is where you call the API. Here, the API call is made in the useEffect hook with an empty dependency array, meaning, the data will be available when the component is mounted.

Wrapping it up

There is a huge difference between a beginner and a mid-level React developer. A beginner is expected to know React and its concepts while an experienced React developer should know how to use these concepts efficiently. All three coding challenges aim to gauge the experience level of a React developer.