Let’s face it—React interviews can be a mix of excitement and “Wait, what does this code even do?” moments. While some companies test your algorithm skills and problem-solving prowess, others throw you straight into the React deep end with tricky real-world challenges. Don’t worry, though— I got your back!
Most developers starting out don’t really know what awaits them in technical hands-on coding interviews. That uncertainty often leads to stress and nerves, which can make even the most skilled developers forget everything they know. I’ve personally conducted over 100 interviews, and I’ve seen this happen time and again—talented candidates blanking out.
That’s why I’ve put together this article. It’s here to prepare you for these challenges, help you build confidence, and give you a clear idea of what to expect. With the right preparation, you’ll not only tackle these tasks with ease but also feel calm and ready to showcase your skills.
In this article, we’ll focus solely on React-specific coding challenges. These are the kinds of tasks interviewers use to gauge how well you understand hooks, state management, and common pitfalls in React development. Each challenge comes with a breakdown: the problem, what’s expected, and a step-by-step solution to help you level up.
Let’s dive in, face those challenges head-on, and make React interviews less scary—and maybe even fun! 🚀
#Challenge : Two States with SetTimeout
When you click the Get count with timeout button, the application should show the current count in the **Count from timeout ** section after 2 seconds. Even if you increase the count using the Count button during the timeout had started, the displayed value should reflect the exact number that we have in Count.
The Problem : Right now, when you click “Get count with timeout” and then click the “Count” button several times, the value shown after the timeout is incorrect. Instead of showing the count at the time the “Get count with timeout” button was clicked, it shows an older or outdated count.
Note : In Example above you can ran React app by clicking Click to run in right panel of code
Why This Happens
The issue occurs because of how JavaScript closures work. When the timeout is set, the function inside setTimeout captures the current value of count. If the count changes after the timeout is created, the function inside the timeout doesn’t know about it—it keeps using the old value. This is a common problem when working with asynchronous code in React.
Solution Using useRef
The useRef hook can be used to keep a mutable reference to the latest value of count. This ensures that the callback function inside setTimeout always has access to the most up-to-date value, even if the count changes after the timeout is set.
1import React, { useRef, useState, useEffect } from "react";
2import ReactDOM from "react-dom";
3import "./styles.css";
4
5function App() {
6 const [count, setCount] = useState(0);
7 const [timeoutCount, setTimeoutCount] = useState(null);
8
9 // Create a ref to store the latest count value
10 const countRef = useRef(count);
11
12 // Update the ref whenever count changes
13 useEffect(() => {
14 countRef.current = count;
15 }, [count]);
16
17 const getCountTimeout = () => {
18 setTimeout(() => {
19 // Use the latest value of count from the ref
20 setTimeoutCount(countRef.current);
21 }, 2000);
22 };
23
24 return (
25 <div className="App">
26 Count: <button onClick={() => setCount(count + 1)}>{count} times</button>
27 <br />
28 <br />
29 <button onClick={getCountTimeout}>Get count with timeout</button>
30 <br />
31 <p>Count from timeout: {timeoutCount}</p>
32 </div>
33 );
34}
35
36const rootElement = document.getElementById("root");
37ReactDOM.render(<App />, rootElement);
38Explanation
- What useRef Does : The useRef hook creates a mutable reference object that persists across renders. Unlike state, updating a useRef value doesn’t trigger a re-render.
- Why We Use useRef Here : The countRef is used to store the latest value of count. This ensures that even if count changes after the setTimeout is created, the callback inside the timeout can access the most recent value.
- How It Works : The useEffect hook updates countRef.current whenever count changes. Inside the setTimeout callback, we use countRef.current to get the latest value of count.
- Benefits: No unnecessary re-renders because useRef updates don’t cause the component to re-render. The timeout function always has access to the latest count, fixing the stale closure issue.
#Challenge 2: Find Duplicates and Show
The goal is to identify duplicate values in an array and display them in the browser along with their counts. At first glance, this task seems straightforward, but it comes with hidden complexities. Often, seemingly simple tasks in interviews are designed to evaluate two things:
- Attention to Detail: Can you handle edge cases like empty arrays, special characters, or non-standard input?
- Best Practices: Do you follow clean coding principles, such as modular code, reusability, and efficient solutions?
In this challenge, both aspects are tested. You’ll also need to handle asynchronous data fetching, which introduces an additional layer of complexity.
The challenge is to identify duplicate values in an array, count their occurrences, and display them in the UI. The twist? The array data is fetched asynchronously, and the solution must handle potential memory leaks if the component unmounts during data fetching.
Plan and Approach
-
Reusability:
Extract the duplication detection logic into a separate DuplicateFinder component. This ensures the main component focuses only on fetching and rendering data. By separating responsibilities, the code becomes easier to maintain and reusable for similar tasks. -
Prevent Memory Leaks:
Use an isMounted flag to ensure state updates happen only if the component is still mounted. If the component unmounts while the data is being fetched, the promise resolves silently without affecting the state.Tip: If the interviewer allows modifying the fetchData function, you can also prevent memory leaks using AbortController.
Main Component : App
The main component fetches data asynchronously and renders the DuplicateFinder component.
1/import React, { useEffect, useState } from "react";
2import "./styles.css";
3import DuplicateFinder from "./DuplicateFinder"; // Import the reusable component
4
5// Simulating an API call to fetch data
6function fetchData(): Promise<number[]> {
7 return new Promise((resolve) => {
8 setTimeout(() => resolve([1, 2, 12, 6, 3, 4, 5, 1, 2, 1, 12]), 1000);
9 });
10}
11
12const App: React.FC = () => {
13 const [data, setData] = useState<number[]>([]); // State for fetched data
14 const [loading, setLoading] = useState<boolean>(true); // Loading state
15
16 useEffect(() => {
17 let isMounted = true; // Flag to prevent updates after unmount
18
19 fetchData()
20 .then((response) => {
21 if (isMounted) {
22 setData(response);
23 setLoading(false);
24 }
25 })
26 .catch((error) => {
27 if (isMounted) {
28 console.error("Failed to fetch data:", error);
29 setLoading(false);
30 }
31 });
32
33 // Cleanup function to update isMounted
34 return () => {
35 isMounted = false;
36 };
37 }, []);
38
39 return (
40 <div className="duplicates">
41 <h1>Find Duplicates and Show</h1>
42 {loading ? (
43 <p>Loading data...</p>
44 ) : (
45 <>
46 <h2>Duplicates:</h2>
47 <DuplicateFinder data={data} />
48 </>
49 )}
50 </div>
51 );
52};
53
54export default App;
55Reusable Component: DuplicateFinder The DuplicateFinder component encapsulates the logic for finding and displaying duplicates. It ensures the logic is isolated and can be reused elsewhere.
1import React, { useEffect, useState } from "react";
2
3interface DuplicateFinderProps {
4 data: number[];
5}
6
7const DuplicateFinder: React.FC<DuplicateFinderProps> = ({ data }) => {
8 const [duplicates, setDuplicates] = useState<Map<number, number> | null>(null);
9
10 useEffect(() => {
11 if (data.length > 0) {
12 const duplicateMap = new Map<number, number>();
13
14 data.forEach((num) => {
15 duplicateMap.set(num, (duplicateMap.get(num) || 0) + 1);
16 });
17
18 setDuplicates(duplicateMap);
19 }
20 }, [data]);
21
22 return (
23 <>
24 {duplicates ? (
25 [...duplicates.entries()]
26 .filter(([_, count]) => count > 1) // Filter duplicates
27 .map(([value, count]) => (
28 <p key={value}>
29 <strong>{value}</strong>: {count} times
30 </p>
31 ))
32 ) : (
33 <p>No duplicates found.</p>
34 )}
35 </>
36 );
37};
38
39export default DuplicateFinder;
40Do you like this solution? Personally, I find it less ideal—not because of the implementation style but due to its inefficiency with large arrays (e.g., more than 100,000 elements). The current approach involves three separate iterations (map, forEach, and filter) and uses a spread operator with duplicates.entries(). Additionally, it stores non-duplicate numbers in the state, which wastes memory. These practices can significantly impact performance and scalability.
Let’s address these issues by optimizing the DuplicateFinder component into its final, more efficient version.
1import React, { useEffect, useState } from "react";
2
3interface DuplicateFinderProps {
4 data: number[];
5}
6
7const DuplicateFinder: React.FC<DuplicateFinderProps> = ({ data }) => {
8 const [duplicates, setDuplicates] = useState<[number, number][]>([]); // Store only duplicates
9
10 useEffect(() => {
11 if (data.length > 0) {
12 const counts = new Map<number, number>();
13 const duplicateEntries: [number, number][] = [];
14
15 // Single pass to count and find duplicates
16 data.forEach((num) => {
17 const count = (counts.get(num) || 0) + 1;
18 counts.set(num, count);
19
20 // Add to duplicates only if count is exactly 2 (to avoid adding multiple times)
21 if (count === 2) {
22 duplicateEntries.push([num, count]);
23 } else if (count > 2) {
24 // Update the count in the duplicates array for existing duplicate
25 const index = duplicateEntries.findIndex(([key]) => key === num);
26 if (index !== -1) {
27 duplicateEntries[index][1] = count;
28 }
29 }
30 });
31
32 setDuplicates(duplicateEntries); // Only store duplicates
33 }
34 }, [data]);
35
36 return (
37 <>
38 {duplicates.length > 0 ? (
39 duplicates.map(([value, count]) => (
40 <p key={value}>
41 <strong>{value}</strong>: {count} times
42 </p>
43 ))
44 ) : (
45 <p>No duplicates found.</p>
46 )}
47 </>
48 );
49};
50
51export default DuplicateFinder;
52Benefits of the Final Solution
- Modularity : Logic is broken into manageable, reusable components.
- Efficiency : The use of a Map ensures the duplicates are found with O(n) complexity.
- Best Practices : Avoids memory leaks and keeps the code clean and focused.
- Scalability : Can handle larger datasets without performance degradation.
#Challenge 3: Show Users List
The objective is to create a Users Dashboard that efficiently handles a large list of users while adhering to best practices for performance and scalability. The application will consist of the following functionalities:
- Render a List of Users: Display all users inside a component called UsersList. Each user should be shown as a clickable list item.
- Display Selected User: When a user clicks on an item in the list, the selected user’s name should appear in the parent component (App).
- Add New Users: Provide an input field and a button in the parent component to allow the addition of new usernames to the list dynamically.
- Handle Large User Lists: Ensure the solution can manage lists with thousands of users without degrading performance.
The solution should address these requirements efficiently while maintaining clean and modular code.
This challenge includes three important points that most developers ignores and just start doing implementation. Key Points
- Memory Allocation Issue :
Handling click events for a large list of users is a common scenario, but many developers make the mistake of attaching an event listener to each individual item in the list. This approach may seem straightforward, but it results in excessive memory usage because each event listener occupies space in the browser’s memory. As the number of items grows (e.g., over 1,000), the memory consumption can spiral out of control, slowing down the application and potentially causing performance issues or crashes. The solution to this problem is to leverage event bubbling. Instead of attaching a separate click handler to every list item, you can attach a single event listener to the parent container. Since events in the DOM naturally “bubble up” from the target element to its ancestors, you can detect which child element triggered the event in the parent. This approach is more efficient and ensures the app performs well, even with large lists. - Using forwardRef and useImperativeHandle :
There’s a requirement to dynamically add new users to the list by clicking the “Add User” button in the parent component (App). A common approach is to pass a function as a prop to the child component (UsersList) that handles adding users. However, this can make the code tightly coupled and harder to maintain. Instead, the best practice in this case is to use forwardRef combined with useImperativeHandle. This allows you to expose specific methods (like adding a user) from the child component to the parent, without directly exposing the child’s internal state or logic. This way, the parent can call the child’s methods (e.g., addUser) in a clean and modular manner. This pattern keeps the child component reusable, avoids unnecessary prop drilling, and ensures the parent and child remain loosely coupled. - Virtualisation :
Rendering a large number of DOM elements (e.g., a list with thousands of items) can significantly degrade the browser’s performance. Each DOM node takes up memory, and when the number of nodes increases, the browser spends more time rendering and re-rendering these elements. This can cause the application to lag, become unresponsive, or freeze entirely. Virtualization solves this problem by rendering only the visible portion of the list at any given time. Instead of creating a DOM node for every single item, it creates nodes only for the items currently visible in the viewport, and dynamically updates these nodes as the user scrolls. Libraries like react-window make it easy to implement virtualization. They handle the logic of managing which items to render and which to ignore, ensuring the app remains smooth and responsive, even with extremely large datasets. - Memoization :
Without optimization, the UsersList component might re-render unnecessarily whenever the parent (App) updates, even if those updates are unrelated to the UsersList. This happens because React re-renders child components by default whenever the parent re-renders. Memoization is the solution to this problem. Wrapping the UsersList component in React.memo ensures it only re-renders when its props (onUserClick) or internal state (users) change. This significantly improves performance by avoiding redundant rendering and ensures the app remains efficient. Memoization is especially important in scenarios like this where the child component handles large datasets or performs resource-intensive operations like rendering virtualized lists.
1import React, { useRef, useState } from "react";
2import "./styles.css";
3import UsersList from "./UsersList";
4
5export default function App() {
6 const [selectedUser, setSelectedUser] = useState(""); // Track selected user
7 const userListRef = useRef(null); // Ref to UsersList for adding users
8 const [newUserName, setNewUserName] = useState(""); // Track input value
9
10 const handleAddUser = () => {
11 if (userListRef.current && newUserName.trim()) {
12 userListRef.current.addUser(newUserName); // Call exposed method
13 setNewUserName(""); // Reset input
14 }
15 };
16
17 return (
18 <div className="App">
19 <h3 align="left">Users Dashboard</h3>
20 <div className="addUserBlock">
21 <input
22 name="userName"
23 type="text"
24 value={newUserName}
25 onChange={(e) => setNewUserName(e.target.value)}
26 placeholder="Enter new user"
27 />
28 <button onClick={handleAddUser}>Add User</button>
29 </div>
30 <h4 align="left">Selected User: {selectedUser || "None"}</h4>
31 <UsersList ref={userListRef} onUserClick={setSelectedUser} />
32 </div>
33 );
34}
351import React, {
2 forwardRef,
3 memo,
4 useEffect,
5 useImperativeHandle,
6 useState,
7} from "react";
8import { FixedSizeList as List } from "react-window";
9import "./styles.css";
10
11// Initial list of users
12const initialUsers = Array.from({ length: 20 }, (_, i) => ({
13 id: i,
14 name: `User ${i + 1}`,
15}));
16
17const UsersList = forwardRef(
18 ({ onUserClick }: { onUserClick: (name: string) => void }, ref) => {
19 const [users, setUsers] = useState(initialUsers);
20
21 // Expose methods to the parent using useImperativeHandle
22 useImperativeHandle(ref, () => ({
23 addUser(newUserName: string) {
24 setUsers((prev) => [...prev, { id: prev.length, name: newUserName }]);
25 },
26 }));
27
28 // Event Bubbling: Attach a single handler to the parent
29 const handleUserClick = (e: React.MouseEvent<HTMLDivElement>) => {
30 const userId = e.target.getAttribute("data-id");
31 const userName = e.target.getAttribute("data-name");
32 if (userId && userName) {
33 onUserClick(userName);
34 }
35 };
36
37 // Virtualized list row renderer
38 const Row = ({ index, style }: { index: number; style: React.CSSProperties }) => {
39 const user = users[index];
40 return (
41 <div
42 style={{ ...style, padding: "10px", borderBottom: "1px solid #ddd" }}
43 data-id={user.id}
44 data-name={user.name}
45 className="userItem"
46 >
47 {user.name}
48 </div>
49 );
50 };
51
52 return (
53 <>
54 <h4 align="left">All Users</h4>
55 <div className="usersList" onClick={handleUserClick}>
56 <List
57 height={400} // Visible height
58 itemCount={users.length}
59 itemSize={35} // Height of each row
60 width="100%"
61 >
62 {Row}
63 </List>
64 </div>
65 </>
66 );
67 }
68);
69
70// Wrap UsersList with React.memo to prevent unnecessary re-renders
71export default memo(UsersList);
72#Conclusion
Congratulations! You’ve made it through some tricky yet realistic React challenges that test your understanding of Javascript, ReactJs and some problems in apps. These tasks reflect real-world problems you’re likely to face in your career as a React developer, and mastering them ensures you’re well-prepared for technical interviews.
Remember, the key to excelling in interviews isn’t just solving problems—it’s showing that you understand why a solution works and can scale it effectively. With these challenges under your belt, you’re ready to tackle React interviews with confidence.
And hey, if you’re ever stuck in a real interview, just remember: even seasoned developers have those moments. The secret is to stay calm, think logically, and maybe crack a joke to lighten the mood. Speaking of jokes: Why did React break up with Angular? Because React had too many hooks! 😁👍
Good luck, and may your next React interview be as smooth as a virtualized list! 🚀