3 Coding Interview Challenges for Mid-level React Developers

November 12th 2021 new story

5

Listen to this story

Speed:

Read by:

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.

0 reactions

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. 

0 reactions

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.

0 reactions

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. 

0 reactions

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. 

0 reactions

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

0 reactions

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

0 reactions

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

0 reactions

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. 

0 reactions

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

0 reactions

First, the context is created. 

0 reactions

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

export default CountContext;

Then, a provider is used in the parent component. 

0 reactions

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. 

0 reactions

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. 

0 reactions

Add and Delete Items From the List 

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

0 reactions

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

0 reactions

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. 

0 reactions

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

0 reactions

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

0 reactions

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.

0 reactions

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. 

0 reactions

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.

0 reactions

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

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

0 reactions

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.

0 reactions

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.

0 reactions

• 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. 

0 reactions

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.

0 reactions

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

0 reactions

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.

0 reactions

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. 

0 reactions

5