🚀 React Interview Experience (August 2025): Airtel (Part- 2)

Overview

This document outlines a React developer interview experience from August 2025. The interview covered various aspects of front-end development, including React, JavaScript, and general problem-solving skills. The candidate was evaluated on their ability to implement common UI features, handle asynchronous operations, and optimize application performance.

Interview Rounds

The interview process included questions testing the candidate's understanding of React concepts and their practical application.

Question 1: Traffic Light Implementation

The candidate was asked to build a traffic light component using React, with lights switching colors (green, yellow, red) at predetermined intervals and looping indefinitely. The solution involved using useState to manage the current light and useEffect with setInterval to control the timing. CSS was used for styling.

const TrafficLight = () => {
 const [light, setLight] = useState("green");

 useEffect(() => {
 const interval = setInterval(
 () => {
 switch (light) {
 case "green":
 setLight("yellow");
 break;
 case "yellow":
 setLight("red");
 break;
 case "red":
 setLight("green");
 break;
 default:
 break;
 }
 },
 light === "green" ? 3000 : light === "yellow" ? 500 : 4000
 );
 return () => clearInterval(interval);
 }, [light]);

 const getLightStyle = (color) => ({
 backgroundColor: light === color ? color : "gray",
 height: "100px",
 width: "100px",
 borderRadius: "50%",
 margin: "10px",
 });

 return (
 <div
 style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
 >
 <div style={getLightStyle("red")} />
 <div style={getLightStyle("yellow")} />
 <div style={getLightStyle("green")} />
 </div>
 );
};

export default function App() {
 return (
 <div className="App">
 <TrafficLight />
 </div>
 );
}

Question 2: Handling Asynchronous API Calls

The candidate was presented with a scenario involving two APIs and was asked how to submit data only after both APIs returned successful responses. The answer explored using Promise.all for independent API calls, sequential await for dependent calls, and Promise.allSettled for handling partial failures. Code examples were provided for each approach.

// Using Promise.all
async function submitData() {
 try {
 const [res1, res2] = await Promise.all([
 fetch("/api/endpoint1").then(r => r.json()),
 fetch("/api/endpoint2").then(r => r.json())
 ]);

 console.log("Both API calls succeeded:", res1, res2);
 // now trigger submit
 await fetch("/api/submit", {
 method: "POST",
 body: JSON.stringify({ data1: res1, data2: res2 })
 });

 console.log("Final submit successful");
 } catch (error) {
 console.error("One of the APIs failed:", error);
 }
}

// Using Sequential Calls (If second depends on first)
async function submitData() {
 try {
 const res1 = await fetch("/api/endpoint1").then(r => r.json());
 const res2 = await fetch("/api/endpoint2", {
 method: "POST",
 body: JSON.stringify({ id: res1.id }) // using res1 data
 }).then(r => r.json());

 // now final submit
 await fetch("/api/submit", {
 method: "POST",
 body: JSON.stringify({ res1, res2 })
 });

 console.log("Final submit successful");
 } catch (error) {
 console.error("Error:", error);
 }
}

// Using Promise.allSettled
const results = await Promise.allSettled([apiCall1(), apiCall2()]);
const success = results.every(r => r.status === "fulfilled");

if (success) {
 await submit();
} else {
 console.error("One of the APIs failed:", results);
}