ReactJS is one of the leading front-end development frameworks in the IT industry. It is part of the open-source development ecosystem and is widely used by many companies.
Today we will discuss how to design technical coding challenges for ReactJS developers. Some ReactJS concepts that should be evaluated include React Component Lifecycle, State management, Virtual DOM, Router, JSX and hooks.
We have divided the coding challenges into three sections based on the experience level of developers; beginner, mid-level and expert. Let’s start with coding challenges for beginner-level developers.
Interview Questions for Beginner ReactJS Developers
When preparing interview questions for beginner-level ReactJS developers, your questions should test basic javascript, props, state, JSX, life cycle methods, routing, and styling. Here are some sample questions in this regard:
Question 1
What will be the output of the below code if the button is clicked:
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Component rendered successfully");
}, []);
return (
<div>
<button onClick={() => setCount(count + 1)}>Click me</button>
<p>You clicked {count} times</p>
</div>
);
}Question 2
Find the issue in the below code snippet after rendering the list of names.
import React from "react";
function App() {
const names = ["Brian", "Paul", "Krug", "Halley"];
const listItems = names.map((name) => <li>{name}</li>);
return <ul>{listItems}</ul>;
}
export default App;
Question 3
Analyze the below code and advise what is wrong with using setState() inside the render() method:
import React, { Component } from "react";
class App extends Component {
state = {
counter: 0,
};
render() {
this.setState({ counter: this.state.counter + 1 });
return <div>Counter: {this.state.counter}</div>;
}
}
export default App;Question 4
Develop a currency converter application that allows users to input an amount in one currency and convert it to another. For the sake of this challenge, you can use a hard-coded exchange rate. Take advantage of React state and event handlers to manage the input and conversion calculations.
Question 5
What will be the output when the user types in the input field:
function App() {
const [value, setValue] = useState("");
function handleChange(event) {
setValue(event.target.value);
}
return (
<div>
<input type="text" value={value} onChange={handleChange} />
<p>You entered: {value}</p>
</div>
);
}Question 6
What is missing in the below code snippet:
import React, { useState } from "react"
function App() {
const [count, setCount] = useState(0)
const increment = () => {
setCount(count + 1)
}
return (
<div>
<button onClick={increment}>Increment</button>
<p>Count: {count}</p>
</div>
)
}
export default AppQuestion 7
Create a stopwatch application through which users can start, pause and reset the timer. Use React state, event handlers and the setTimeout or setInterval functions to manage the timer’s state and actions.
Question 8
Analyze the below code snippet and advise what will be shown on the screen when the App component is rendered with <App name=”Claire” />?
import React from "react";
class App extends React.Component {
render() {
return <div>Hello, {this.props.name}!</div>;
}
}
export default App;Question 9
Find the issue with the form’s input field in the below code snippet:
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = { name: "" };
}
handleSubmit = (event) => {
event.preventDefault();
console.log("Submitted Name:", this.state.name);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" />
</label>
<button type="submit">Submit</button>
</form>
);
}
}
export default App;Question 10
What issue exists in the below code regarding state variable:
import React, { useState } from "react";
function App() {
const [counter, setCounter] = useState(0);
function incrementCounter() {
setCounter(counter + 1);
}
return (
<div>
<button onClick={incrementCounter}>Increment</button>
<p>Counter: 0</p>
</div>
);
}
export default App;Interview Questions for Mid-level ReactJS Developers
When designing interview questions for intermediate-level ReactJS developers, you should design challenges that test a deeper understanding of the framework and advanced features. Some of the areas that should be evaluated include advanced react concepts, Redux, Server-Side Rendering, API Integration, Advanced CSS and CI/CD. Find below some of the challenges that test these concepts:
Question 1
Find the issue in the below code when using the index as a key for list items:
import React from "react";
function App() {
const items = [
{ id: 1, text: "Item 1" },
{ id: 2, text: "Item 2" },
];
const listItems = items.map((item, index) => <li key={index}>{item.text}</li>);
return <ul>{listItems}</ul>;
}
export default App;Question 2
Analyze the below code and advise what will be the value of “Count” when the button is clicked:
class App extends React.Component {
state = { count: 0 };
handleClick = () => {
setTimeout(() => {
this.setState({ count: this.state.count + 1 });
}, 0);
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h1>Count: {this.state.count}</h1>
<button onClick={this.handleClick}>Click me!</button>
</div>
);
}
}Question 3
Develop a messaging application that allows users to send and receive messages in real time. The application should display a list of conversations and allow the user to select a specific conversation to view its messages. The messages should be displayed in a chat interface with the most recent message at the top. Users should be able to send new messages and receive push notifications.
Question 4
Build a weather application that retrieves real-time weather data from any weather API and displays it on the screen. The app should provide a search feature through which users can search for a location by city name or zip code and display the current temperature, humidity, wind speed and other relevant weather data.
Question 5
What is the issue in the below code regarding useMemo hook:
import React, { useMemo } from "react";
function App() {
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = useMemo(() => numbers.map((n) => n * 2), []);
return (
<div>
{doubledNumbers.map((number) => (
<p key={number}>{number}</p>
))}
</div>
);
}
export default App;Question 6
What will be logged to the console after the button is clicked:
class App extends React.Component {
state = { count: 0 };
handleClick = () => {
this.setState({ count: this.state.count + 1 }, () => {
console.log(`Count: ${this.state.count}`);
});
};
render() {
return (
<div>
<h1>Count: {this.state.count}</h1>
<button onClick={this.handleClick}>Click me!</button>
</div>
);
}
}Question 7
Will the below code throw any error when adding a new item to the list? If yes, what error will that be?
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = { list: ["Item1", "Item2"] };
}
addItem() {
const newItem = "Item3";
this.state.list.push(newItem);
this.setState({ list: this.state.list });
}
render() {
return (
<div>
<button onClick={this.addItem.bind(this)}>Add item</button>
<ul>
{this.state.list.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
</div>
);
}
}
export default App;Question 8
Build a simple drag-and-drop interface that allows users to reorder a list of items through drag-and-drop. Implement a visual cue to indicate the new position of the dragged item. Use React state, components and hooks to manage the list’s data and user interactions.
Question 9
What is wrong with the below code:
import React, { useCallback, useState } from "react";
function App() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1);
}, []);
return (
<div>
<button onClick={increment}>Increment</button>
<p>Count: {count}</p>
</div>
);
}
export default App;Question 10
Develop a paginated list view that shows items fetched from an API or a mock dataset. Implement a pagination system through which users can navigate between pages. Also, display the number of items per page. Use React state, components and hooks to manage the data and user interactions.
Interview Questions for Experts
When designing coding challenges for expert-level ReactJS developers, you should evaluate the advanced features of the language and the ability to develop applications in a distributed system. Some of the areas to evaluate include architecture and design patterns, performance optimization, testing, advanced react concepts, security and integration with other technologies. Here are some coding challenges which are suitable for expert ReactJS developers:
Question 1
Find the issue in the below code:
function TestComponent(props) {
const [count, setCount] = useState(props.initialCount);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
}Question 2
What is the output of the Toolbar component in the below code snippet?
import React, { useContext, createContext } from "react";
const ThemeContext = createContext("light");
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
const theme = useContext(ThemeContext);
return <div>Current theme: {theme}</div>;
}
export default App;Question 3
See the below code snippet and advise, will there be any issue making a REST API call in a component’s useEffect hook?
import { useState } from "react";
import axios from "axios";
function MyComponent() {
const [data, setData] = useState([]);
useEffect(() => {
axios.get("/api/data").then((response) => {
setData(response.data);
});
}, []);
return <div>{data.map((d) => <p>{d.text}</p>)}</div>;
}Question 4
What will be the behavior of useEffect hook in the below code:
import React, { useState, useEffect } from "react";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setCount((prevCount) => prevCount + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return <div>Count: {count}</div>;
}
export default App;Question 5
Develop a web application of your choice that makes frequent requests to an external REST API. To improve latency and reduce the load on the API, implement a client-side caching strategy that caches responses to API requests and serves them from the client-side cache when the same request is made again.
Question 6
What is wrong with using async/await in a useEffect hook in reference to the below code snippet?
function TestComponent() {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const response = await fetch("/api/data");
const json = await response.json();
setData(json);
};
fetchData();
}, []);
return <div>{data.map((d) => <p>{d.text}</p>)}</div>;
}Question 7
What will be the behavior of the useRef and useCallback hooks in the below code snippet?
import React, { useState, useRef, useCallback } from "react";
function App() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
const increment = useCallback(() => {
countRef.current = countRef.current + 1;
setCount(countRef.current);
}, []);
return (
<div>
<button onClick={increment}>Increment</button>
<p>Count: {count}</p>
</div>
);
}
export default App;Question 8
Develop a file upload component to upload multiple files simultaneously. It should display progress indicators for each file and should display a success or error message after the upload is complete.
Question 9
How can you optimize the handling of async data promises in the below code?
import { useCallback, useEffect } from "react";
function TestComponent(props) {
const fetchData = useCallback(async () => {
const response = await fetch(`/api/data/${props.id}`);
const json = await response.json();
return json;
}, [props.id]);
useEffect(() => {
const dataPromise = fetchData();
// Do something with the data promise
return () => {
// Cancel the data promise
};
}, [fetchData]);
return <div>My Component</div>;
}Question 10
Develop a dashboard that shows real-time data from multiple sources, including REST APIs and websockets. The data should update in real time without needing to reload. The dashboard should display gracefully on mobile devices and should have a user-friendly UI/UX.
Conclusion
Today we went through 30 coding challenges for ReactJS developers. These coding challenges test the knowledge and skills of ReactJS engineers in various areas of ReactJS, ranging from basic ReacJS concepts to advanced concepts like architecture and design patterns.
By categorizing the coding challenges separately for beginner level to advanced level, we have made it easy for hiring managers to evaluate candidates based on their experience. By completing these challenges, developers can enhance their knowledge of ReactJS and gain valuable experience in solving relevant problems.
Further reading: