Practical React JS Interview Questions and Answers
Hands-on React.js interview questions and answers to test real development skills
This Q&A is up to date as of April 2026
Developed by Olivia Cook
Preparing for real-world React interviews requires more than theoretical knowledge. Modern React.js interview questions and answers are increasingly focused on practical coding ability - how you structure components, manage state, handle side effects, and solve real UI problems under time constraints. Instead of abstract definitions, candidates are expected to write working code, debug issues, and explain decisions clearly.
In practical interviews, you may be asked to implement features such as dynamic forms, API data fetching, performance optimizations, or reusable component patterns. These tasks simulate real work environments where you must think critically, write clean code, and adapt quickly. The goal is not just to see if you know React, but whether you can apply it effectively in real scenarios.
This guide focuses specifically on hands-on challenges. It helps you understand what to expect, how to approach coding tasks, and how to structure your answers in a way that demonstrates both technical depth and practical experience.
Who Should Use These Practical React Questions?
These questions are designed for developers who want to strengthen their real coding skills and prepare for hands-on technical interviews. Unlike theoretical quizzes, React.js interview questions in this guide are focused on implementation, debugging, and real application logic. If you want to improve how you perform during live coding sessions, this material will be especially useful.
- Developers preparing for technical interviews that include live coding or take-home React tasks
- Frontend engineers who understand basics but struggle to apply knowledge in real scenarios
- Candidates transitioning from theory-based learning to practical, production-level coding
- React developers aiming to improve code quality, structure, and problem-solving skills
- Engineers preparing for product companies where real-world coding ability is heavily evaluated
What Are React JS Interview Questions?
In modern frontend hiring, interview questions ReactJS are no longer limited to definitions or simple examples. Instead, they focus on how developers solve real problems using code. Interviewers want to see how you structure components, manage state, handle asynchronous logic, and debug issues under realistic conditions. Practical React interviews simulate tasks you would face in production, requiring both coding skills and clear reasoning.
Below are the most common practical areas tested in React interviews:
-
Component logic and state handling. Candidates are often asked to build components that manage dynamic state, such as forms, counters, filters, or interactive
UI elements. These tasks test how well you use hooks like
useStateanduseReducer, and whether you understand controlled vs uncontrolled components. Interviewers also evaluate how cleanly you structure logic and avoid unnecessary re-renders or overly complex state management. -
Working with APIs and async data. A common task is fetching data from an API and displaying it in the UI. You may be asked to handle loading states, errors,
retries, and edge cases like empty responses. Interviewers want to see how you use
useEffect, manage side effects, and structure asynchronous code. Clean separation of concerns and proper error handling are key indicators of experience. - Form handling and validation. Practical interviews frequently include building forms with validation logic. This can involve controlled inputs, dynamic fields, and real-time validation feedback. You may need to implement custom validation rules, handle submission states, and ensure a good user experience. These tasks test your ability to manage complex state and user interactions efficiently.
-
Performance optimization in React. Interviewers may ask you to optimize a component that renders too often or handles large datasets inefficiently. You should
understand when to use
React.memo,useMemo, oruseCallback, and when optimization is unnecessary. Being able to explain performance trade-offs and demonstrate profiling awareness is important for mid to senior roles. - Reusable component design. You may be asked to create reusable UI components such as modals, dropdowns, or lists. This tests your understanding of props, composition, and separation of concerns. Interviewers look for flexibility, scalability, and clean APIs in your components. Writing reusable code is a key skill in real-world React development.
- Debugging and fixing broken code. Another common scenario is being given buggy code and asked to fix it. This tests your debugging skills, understanding of React behavior, and attention to detail. You may need to identify issues related to state updates, effects, or rendering logic. Strong debugging ability is often more valuable than writing code from scratch.
You can highlight the questions you’ve already completed to easily monitor your progress over time. Every selection is saved automatically, giving you a clear picture of how your preparation is improving step by step. Your progress and answers are stored securely, so you can pause whenever needed and continue later without losing anything. This approach keeps your learning process well-organized, supports consistent practice, and helps you stay in full control of your interview preparation.
React.js Interview Questions for Beginners
1. How would you render a dynamic list of items in React using JSX?
Normal explanation
Simple explanation
Rendering dynamic lists is considered one of the most fundamental practical skills in React. The correct approach involves using JavaScript array methods such as
map() to transform data into JSX elements. Each element must include a stable key property to help React efficiently reconcile changes. Without
proper keys, React may re-render unnecessarily or produce UI inconsistencies.
Example:
const users = ["Alice", "Bob", "Charlie"];
function UserList() {
return (
<ul>
{users.map((user, index) => (
<li key={index}>{user}</li>
))}
</ul>
);
}
In production code, using indexes as keys is discouraged when the list can change order. Instead, use unique identifiers such as IDs. This ensures stable identity and prevents subtle bugs. Interviewers ask this question to verify that candidates understand both syntax and rendering behavior.
To render a list in React, you usually use the map() function. It takes each item from an array and returns JSX. This allows React to display multiple elements
dynamically instead of writing them manually.
const items = ["Apple", "Banana", "Orange"];
function List() {
return (
<ul>
{items.map((item, i) => (
<li key={i}>{item}</li>
))}
</ul>
);
}
The key helps React track each item. Beginners often use the index, but in real apps, it is better to use a unique ID. Interviewers ask this to check if you
can work with dynamic data in React.
2. How do you create and update state using useState in a functional component?
Normal explanation
Simple explanation
Managing state is considered a core concept in React. The useState hook allows functional components to store and update local state. It returns a state value
and a setter function. State updates must be treated as immutable operations to ensure React correctly detects changes.
Example:
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
For complex updates, using a functional update pattern is recommended:
setCount(prev => prev + 1);
This ensures correct behavior when updates depend on previous state. Interviewers expect candidates to demonstrate proper state handling and update patterns.
In React, you use useState to store values inside a component. It gives you a variable and a function to update it. When the state changes, the component
re-renders automatically.
const [count, setCount] = useState(0);
You can update the state like this:
setCount(count + 1);
A better way is using a function:
setCount(prev => prev + 1);
This ensures correct updates. Interviewers ask this to check if you understand how React updates the UI based on state.
3. How do you handle user input in a controlled React form?
Normal explanation
Simple explanation
Controlled components are considered the standard approach for handling forms in React. The form input value is stored in state, and updates are handled through event handlers. This ensures that React fully controls the input.
import { useState } from "react";
function Form() {
const [value, setValue] = useState("");
return (
<input
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
}
This pattern allows validation, formatting, and side effects to be applied easily. Interviewers expect candidates to understand controlled inputs as a foundation for building forms.
A controlled input means React controls the value of the field. You store the value in state and update it when the user types.
const [text, setText] = useState("");
<input value={text} onChange={(e) => setText(e.target.value)} />
This helps keep the UI and data in sync. Interviewers ask this to see if you understand how forms work in React.
4. How do you pass data between components using props?
Normal explanation
Simple explanation
Props are considered the primary mechanism for passing data between components. Data flows from parent to child, ensuring predictable unidirectional data flow.
function Child({ name }) {
return <p>Hello, {name}</p>;
}
function Parent() {
return <Child name="John" />;
}
Props are read-only and should not be modified inside child components. This ensures consistency and maintainability.
Props let you send data from one component to another. Usually, a parent sends data to a child.
<Child name="John" />
The child receives it like this:
function Child(props) {
return <p>{props.name}</p>;
}
Interviewers ask this to check if you understand component communication.
5. How do you conditionally render elements in React?
Normal explanation
Simple explanation
Conditional rendering is considered essential for building dynamic interfaces. It allows components to display different UI based on state or props.
function App() {
const isLoggedIn = true;
return (
<div>
{isLoggedIn ? <p>Welcome back</p> : <p>Please log in</p>}
</div>
);
}
Logical AND (&&) is also common:
{isLoggedIn && <p>Dashboard</p>}
This technique is widely used in real applications.
Conditional rendering means showing different UI depending on conditions.
{isLoggedIn ? <p>Hello</p> : <p>Login</p>}
You can also use:
{isLoggedIn && <p>Welcome</p>}
Interviewers ask this to see if you can control UI behavior.
6. How do you fetch data from an API using useEffect?
Normal explanation
Simple explanation
Fetching data is considered a core real-world skill. The useEffect hook is used to run side effects like API calls.
import { useState, useEffect } from "react";
function Users() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://api.example.com/users")
.then(res => res.json())
.then(data => setUsers(data));
}, []);
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
Proper error handling and loading states should also be implemented in production.
You can fetch data using useEffect. It runs after the component renders.
useEffect(() => {
fetch("url")
.then(res => res.json())
.then(data => setData(data));
}, []);
This loads data once. Interviewers ask this to check if you can work with APIs.
7. How would you pass a function from a parent component to a child component and use it to update the parent state?
Normal explanation
Simple explanation
Passing functions through props is considered one of the most important practical patterns in React because it allows child components to trigger changes in parent state without breaking React’s one-way data flow. In real applications, this is used in buttons, forms, filters, modal windows, and reusable UI components. The parent component owns the state, while the child component receives a function and calls it when the user interacts with the interface.
This pattern keeps the data flow predictable. Instead of letting the child directly modify the parent’s data, the parent defines the update logic and passes down only what the child needs. That makes the application easier to debug and easier to scale. It also reinforces one of React’s core principles: state should live in the component that owns it.
Example:
import { useState } from "react";
function Parent() {
const [count, setCount] = useState(0);
function handleIncrease() {
setCount(prev => prev + 1);
}
return (
<div>
<h2>Count: {count}</h2>
<Child onIncrease={handleIncrease} />
</div>
);
}
function Child({ onIncrease }) {
return (
<button onClick={onIncrease}>
Add 1
</button>
);
}
You can also pass parameters when needed:
function Parent() {
const [message, setMessage] = useState("Hello");
function updateMessage(newMessage) {
setMessage(newMessage);
}
return (
<div>
<p>{message}</p>
<Child onChangeMessage={updateMessage} />
</div>
);
}
function Child({ onChangeMessage }) {
return (
<button onClick={() => onChangeMessage("Welcome to React")}>
Change message
</button>
);
}
Interviewers ask this question because it checks whether a candidate understands practical component communication. A beginner should know that data usually moves down through props, while actions can move up through callback functions. This is a foundational pattern that appears constantly in everyday React development.
In React, a child component cannot directly change the parent’s state. The normal solution is to create a function inside the parent and pass that function to the child through props. Then the child can call that function when something happens, such as a button click. This is a very common pattern in real projects.
Here is a basic example. The parent stores a counter, and the child receives a function that increases the counter:
function Parent() {
const [count, setCount] = useState(0);
function handleIncrease() {
setCount(count + 1);
}
return (
<div>
<p>{count}</p>
<Child onIncrease={handleIncrease} />
</div>
);
}
function Child({ onIncrease }) {
return <button onClick={onIncrease}>Increase</button>;
}
This works because the parent still controls the state, but the child can trigger the update. That keeps the code organized and predictable. Interviewers ask this question to see if you understand how components work together in React and how user actions in one component can affect state stored in another component.
8. How would you add and remove items from an array stored in React state?
Normal explanation
Simple explanation
Working with arrays in state is considered a basic practical skill because many real React features depend on it. Todo lists, shopping carts, selected tags, table rows, and
notifications are all common examples of array-based state. The most important rule is that React state should be updated immutably. That means you should not use methods
like push(), pop(), or splice() directly on the existing state array. Instead, you create a new array and pass it to the state
setter.
To add a new item, you usually use the spread operator. To remove an item, you often use filter(). These methods create new arrays, which allows React to
detect the state change and re-render the component correctly.
Example:
import { useState } from "react";
function TodoList() {
const [tasks, setTasks] = useState(["Learn JSX", "Practice useState"]);
const [newTask, setNewTask] = useState("");
function addTask() {
if (!newTask.trim()) return;
setTasks(prevTasks => [...prevTasks, newTask]);
setNewTask("");
}
function removeTask(taskToRemove) {
setTasks(prevTasks =>
prevTasks.filter(task => task !== taskToRemove)
);
}
return (
<div>
<input
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="Enter a task"
/>
<button onClick={addTask}>Add task</button>
<ul>
{tasks.map((task, index) => (
<li key={index}>
{task}
<button onClick={() => removeTask(task)}>Remove</button>
</li>
))}
</ul>
</div>
);
}
In practice, it is better to store objects with unique IDs instead of plain strings, especially when you need stable keys or when different items may have the same text.
const [tasks, setTasks] = useState([
{ id: 1, text: "Learn JSX" },
{ id: 2, text: "Practice useState" }
]);
function removeTask(id) {
setTasks(prev => prev.filter(task => task.id !== id));
}
Interviewers ask this question because it checks understanding of immutable state updates, list rendering, event handling, and practical UI logic. A strong beginner answer should show both the correct code pattern and the reason React needs a new array instead of a mutated one.
Arrays in React state are very common. You may use them for todo items, product lists, user names, or anything that contains several values. The main rule is that you should not change the old array directly. Instead, you create a new array and save it in state.
To add an item, you can use the spread operator:
setTasks(prev => [...prev, "New Task"]);
To remove an item, you can use filter():
setTasks(prev => prev.filter(task => task !== "Old Task"));
Full example:
function ListExample() {
const [items, setItems] = useState(["HTML", "CSS"]);
function addItem() {
setItems(prev => [...prev, "JavaScript"]);
}
function removeItem(itemToDelete) {
setItems(prev => prev.filter(item => item !== itemToDelete));
}
return (
<div>
<button onClick={addItem}>Add</button>
{items.map((item, index) => (
<div key={index}>
{item}
<button onClick={() => removeItem(item)}>Delete</button>
</div>
))}
</div>
);
}
Interviewers ask this question to see if you know how to work with lists in a real interface. It also shows whether you understand that React needs new state values, not direct changes to old ones.
9. How would you use useEffect to run code when a component loads and clean it up when the component is removed?
Normal explanation
Simple explanation
The useEffect hook is considered the standard way to handle side effects in React function components. A side effect is any operation that interacts with
something outside the normal rendering process. Common examples include timers, event listeners, API calls, subscriptions, and browser APIs. A beginner should understand
that useEffect can run code after the component renders, and it can also return a cleanup function that runs when the component is removed from the page.
To run code only once when the component loads, you pass an empty dependency array. React will run the effect after the first render. If you return a function from that effect, React will call it during unmount. This is very useful for cleaning up timers or removing event listeners, because it prevents memory leaks and duplicate behavior.
Example with a timer:
import { useEffect, useState } from "react";
function TimerExample() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setSeconds(prev => prev + 1);
}, 1000);
return () => {
clearInterval(intervalId);
};
}, []);
return <p>Seconds: {seconds}</p>;
}
Example with a browser event listener:
import { useEffect, useState } from "react";
function WindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
function handleResize() {
setWidth(window.innerWidth);
}
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return <p>Window width: {width}px</p>;
}
Interviewers ask this question because it tests practical understanding of component lifecycle in function components. A strong answer shows that the candidate knows how to run logic after render, how to prevent leaks with cleanup, and how to connect React components to external browser behavior in a safe way.
useEffect is used when you want to run code after React renders a component. This is useful for things like timers, API calls, or browser event listeners. If
you want the code to run only once when the component first appears, you use an empty dependency array: [].
You can also return a cleanup function. React will run that cleanup when the component disappears. This is important because some things, like timers and event listeners, should be removed when the component is no longer on the screen.
useEffect(() => {
const id = setInterval(() => {
console.log("Running...");
}, 1000);
return () => clearInterval(id);
}, []);
Another example is a resize listener:
useEffect(() => {
function onResize() {
console.log(window.innerWidth);
}
window.addEventListener("resize", onResize);
return () => {
window.removeEventListener("resize", onResize);
};
}, []);
Interviewers ask this question because it shows whether you understand how React handles side effects and cleanup. That is a very practical skill, because real components often need to work with timers, subscriptions, and browser events.
10. How would you fetch data from an API in React and display loading and error states correctly?
Normal explanation
Simple explanation
Fetching data from an API is considered one of the most practical beginner-level React tasks because it appears in almost every real project. It is not enough to simply
call fetch() and display the result. A good implementation should also handle loading state and error state so the user understands what is happening. Without
those states, the interface may look broken, empty, or confusing while data is being loaded or if the request fails. The standard pattern uses useState to
store the data, a loading flag, and an error message. Then useEffect is used to run the request after the component mounts.
import { useEffect, useState } from "react";
function UsersList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
useEffect(() => {
async function fetchUsers() {
try {
setLoading(true);
setError("");
const response = await fetch("https://jsonplaceholder.typicode.com/users");
if (!response.ok) {
throw new Error("Failed to load users");
}
const data = await response.json();
setUsers(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
fetchUsers();
}, []);
if (loading) {
return <p>Loading users...</p>;
}
if (error) {
return <p>Error: {error}</p>;
}
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
This pattern is important because it reflects how real user interfaces behave. First, the user sees a loading message. If the request fails, the user gets a meaningful error message. If it succeeds, the data is displayed. In more advanced applications, developers may also add retry buttons, empty states, or request cancellation, but this basic pattern is the correct starting point.
Interviewers ask this question because it tests several practical React skills at once: state management, side effects, async JavaScript, conditional rendering, and list rendering. A strong beginner answer should show not only how to fetch data, but how to build a user-friendly interface around that request.
In React, API requests are usually made inside useEffect. But a good solution should also include loading and error states. That way, the user knows whether
the data is still loading, whether something went wrong, or whether the result is ready.
You usually need three pieces of state: one for the data, one for loading, and one for errors.
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
Then you fetch the data:
useEffect(() => {
async function loadData() {
try {
const res = await fetch("https://jsonplaceholder.typicode.com/posts");
if (!res.ok) {
throw new Error("Request failed");
}
const result = await res.json();
setData(result);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
loadData();
}, []);
After that, you render different UI depending on the state:
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error}</p>;
Interviewers ask this question because it shows whether you can build a realistic component, not just a simple demo. In practice, users need feedback while data is loading, and they need a clear message if something fails.
Intermediate-Level Interview Questions on ReactJS
1. How would you update a nested object in React state without mutating it?
Normal explanation
Simple explanation
Updating nested state is considered a frequent real-world challenge because React relies on reference comparison to detect changes. If a developer mutates an object directly, React may not detect any change, which leads to UI not updating or behaving inconsistently. This becomes especially problematic in complex forms, dashboards, and data-driven interfaces where multiple levels of state are involved.
The correct approach is to create a new object at every level that changes. This ensures immutability and allows React to trigger a re-render correctly. Developers should think of state updates as creating a new version of data rather than modifying the existing one.
const [user, setUser] = useState({
name: "John",
address: {
city: "New York",
zip: "10001"
}
});
function updateCity() {
setUser(prev => ({
...prev,
address: {
...prev.address,
city: "Los Angeles"
}
}));
}
In large applications, manually copying nested objects can become verbose and error-prone. Libraries like Immer are often used to simplify immutable updates while preserving readability. Interviewers ask this question to evaluate whether candidates understand immutability deeply, not just syntactically but conceptually in terms of how React detects changes.
When working with nested state, you should never change the original object directly. React depends on new object references to know that something changed. If you modify the existing object, React may not re-render the component correctly.
Instead, you copy each level of the object and update only the part you need. This ensures React sees a new version of the state.
setUser(prev => ({
...prev,
address: {
...prev.address,
city: "LA"
}
}));
This approach may look repetitive at first, but it is necessary for predictable updates. Interviewers ask this question to check if you understand how React tracks state changes and why immutability is important for stable UI behavior.
2. How do you correctly handle dependencies in useEffect to avoid infinite loops?
Normal explanation
Simple explanation
The dependency array in useEffect is considered one of the most misunderstood parts of React. It determines when the effect should run, and incorrect usage
often leads to infinite loops, stale closures, or missing updates. A common issue appears when developers include values that change on every render, such as inline
functions or objects, causing the effect to run repeatedly.
To handle dependencies correctly, developers must understand what values the effect depends on and ensure those values are stable. If a function is used inside the effect,
it should be memoized using useCallback to prevent unnecessary re-renders.
const fetchData = useCallback(() => {
// fetch logic
}, [id]);
useEffect(() => {
fetchData();
}, [fetchData]);
Additionally, developers should avoid suppressing ESLint warnings without understanding them. These warnings are designed to prevent bugs related to stale state or missed updates. Interviewers ask this question to assess whether candidates can write predictable side effects and understand the lifecycle of React components.
The dependency array in useEffect controls when the effect runs. If you include something that changes every render, the effect will run again and again, which
can create an infinite loop.
For example, if you define a function inside the component, it gets recreated every render. If you add it to dependencies, the effect keeps running. To fix this, you can
use useCallback to keep the function stable.
const fn = useCallback(() => {}, []);
Understanding dependencies is very important because many bugs come from incorrect effect behavior. Interviewers ask this to see if you can manage side effects properly and avoid common mistakes.
3. How would you build a reusable input component that supports validation?
Normal explanation
Simple explanation
Building reusable form components is considered a key step toward scalable React architecture. Instead of duplicating logic across multiple inputs, developers should encapsulate behavior such as validation, error display, and event handling into reusable components. This improves maintainability and consistency across the application.
function Input({ value, onChange, error }) {
return (
<div>
<input value={value} onChange={onChange} />
{error && <span>{error}</span>}
</div>
);
}
Usage:
const [email, setEmail] = useState("");
const [error, setError] = useState("");
function handleChange(e) {
const val = e.target.value;
setEmail(val);
setError(val.includes("@") ? "" : "Invalid email");
}
This design separates UI from logic, making the component reusable across different forms. In production systems, validation logic may also include async checks, schema validation, and integration with form libraries. Interviewers expect candidates to understand how to design reusable components rather than writing repetitive code.
A reusable input component helps avoid repeating the same code in many places. Instead of writing validation logic inside every form, you create one component and pass data to it using props.
<Input value={email} onChange={handleChange} error={error} />
Inside the component, you show the input field and an error message if needed. This keeps your code cleaner and easier to maintain.
Interviewers ask this question to check if you understand component reusability and separation of concerns. This is an important skill when building real-world applications.
4. How would you optimize expensive calculations in a component?
Normal explanation
Simple explanation
Expensive calculations can degrade performance if they run on every render. React re-renders components frequently, so computations inside render logic should be optimized
when necessary. The useMemo hook is considered a solution for memoizing results and avoiding unnecessary recalculations.
const result = useMemo(() => {
return heavyCalculation(data);
}, [data]);
This ensures the calculation runs only when dependencies change. However, useMemo should not be overused. It introduces overhead, and developers should apply
it only when there is a measurable performance issue. Profiling tools should guide optimization decisions.
Interviewers ask this question to evaluate understanding of performance optimization and the ability to balance complexity with real-world needs.
If your component has a slow function, it may run every time the component re-renders. This can make the app feel slow. You can use useMemo to save the result
of the calculation.
const value = useMemo(() => compute(), []);
Now React will not run the function again unless dependencies change. This improves performance.
Interviewers ask this to check if you understand how to make your app faster and avoid unnecessary work.
5. How would you create a custom hook for fetching data?
Normal explanation
Simple explanation
Custom hooks are considered a powerful way to extract and reuse logic across multiple components. Instead of duplicating data-fetching logic, a custom hook encapsulates it into a reusable function.
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(setData);
}, [url]);
return data;
}
This simplifies component logic and improves readability:
const data = useFetch("/api/users");
In real applications, this hook should include error handling, loading state, and possibly caching logic. Interviewers ask this question to assess understanding of abstraction and reusable architecture.
A custom hook lets you reuse logic in different components. Instead of writing the same fetch code everywhere, you write it once inside a hook.
const data = useFetch("/api");
The hook handles fetching and returns the result. This makes your components cleaner and easier to read.
Interviewers ask this to see if you understand how to organize code and avoid duplication in React projects.
6. How would you derive and synchronize state based on props without causing bugs or unnecessary re-renders?
Normal explanation
Simple explanation
Deriving state from props is considered a common but often misused pattern in React. Many developers attempt to copy props into state directly, which leads to bugs, stale data, and unnecessary re-renders. The core principle is that state should represent data that changes over time independently, while props are inputs controlled by the parent. If state simply mirrors props, it usually indicates a design problem.
In most cases, derived values should be calculated during render instead of stored in state. This ensures consistency and avoids synchronization issues.
function Price({ amount, taxRate }) {
const total = amount + amount * taxRate;
return <p>Total: {total}</p>;
}
However, there are valid scenarios where derived state is needed, such as when initializing local editable state from props. In such cases, synchronization should be
handled carefully using useEffect.
import { useState, useEffect } from "react";
function EditableInput({ initialValue }) {
const [value, setValue] = useState(initialValue);
useEffect(() => {
setValue(initialValue);
}, [initialValue]);
return (
<input
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
}
This ensures that state updates when props change, but still allows local edits. Another advanced pattern is using useMemo for expensive derived computations:
const filteredItems = useMemo(() => {
return items.filter(item => item.active);
}, [items]);
Senior engineers avoid unnecessary duplication of data and focus on single sources of truth. They carefully analyze whether state is truly needed or if a computed value is sufficient. Interviewers ask this question to evaluate architectural thinking, understanding of React data flow, and the ability to avoid subtle bugs in real applications.
Sometimes developers try to copy props into state, but this often causes problems. If you store the same data in two places, it can get out of sync. In most cases, you should calculate values directly instead of saving them in state. For example, instead of storing a calculated value, just compute it:
const total = amount + amount * taxRate;
However, there are cases where you need local state, such as when editing a value that comes from props. In that case, you can sync it with useEffect:
useEffect(() => {
setValue(initialValue);
}, [initialValue]);
You can also use useMemo for calculations that are expensive and should not run on every render. Interviewers ask this question to see if you understand how
React handles data and how to avoid common mistakes with duplicated state. A strong answer shows that you know when to store data and when to calculate it instead.
7. How would you extract reusable logic into a custom hook in React?
Normal explanation
Simple explanation
Extracting reusable logic into custom hooks is considered a fundamental intermediate-level skill because it directly impacts code maintainability, readability, and
scalability. In real-world applications, developers frequently encounter duplicated logic across multiple components, such as data fetching, form handling, or event
subscriptions. Instead of repeating that logic, a custom hook allows you to encapsulate it in a reusable and composable function. A custom hook is simply a function that
uses React hooks internally and follows the naming convention starting with use. This ensures React can correctly apply its rules of hooks. The goal is to
separate logic from UI while keeping the API simple and predictable.
Example: creating a reusable data-fetching hook:
import { useEffect, useState } from "react";
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
useEffect(() => {
let isMounted = true;
async function fetchData() {
try {
setLoading(true);
const res = await fetch(url);
if (!res.ok) {
throw new Error("Request failed");
}
const result = await res.json();
if (isMounted) {
setData(result);
}
} catch (err) {
if (isMounted) {
setError(err.message);
}
} finally {
if (isMounted) {
setLoading(false);
}
}
}
fetchData();
return () => {
isMounted = false;
};
}, [url]);
return { data, loading, error };
}
Usage:
function Users() {
const { data, loading, error } = useFetch("/api/users");
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error}</p>;
return data.map(user => <div key={user.id}>{user.name}</div>);
}
This pattern improves code reuse and ensures consistency across the application. Senior engineers design hooks with clear APIs, proper cleanup, and minimal side effects. Interviewers ask this question to evaluate abstraction skills and the ability to design maintainable React code.
A custom hook is a way to reuse logic between components. Instead of copying the same code into multiple places, you create a function that contains that logic and use it
wherever needed. The function must start with the word use, like useFetch.
For example, if you fetch data in many components, you can move that logic into one hook:
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(setData);
}, [url]);
return data;
}
Then you use it:
const data = useFetch("/api/users");
This makes your code cleaner and easier to maintain. Interviewers ask this to check if you understand how to organize logic and avoid duplication in React applications.
8. How would you build a controlled form with validation in React?
Normal explanation
Simple explanation
Building controlled forms is considered a core intermediate skill because forms are central to most web applications. A controlled form means that React fully manages the input values through state. This gives developers full control over validation, formatting, and submission logic. Unlike uncontrolled components, controlled inputs ensure that UI always reflects the current application state.
A typical implementation uses a single state object to manage multiple fields. Validation can be applied on change, on blur, or on submit depending on requirements.
import { useState } from "react";
function LoginForm() {
const [form, setForm] = useState({
email: "",
password: ""
});
const [errors, setErrors] = useState({});
function handleChange(e) {
const { name, value } = e.target;
setForm(prev => ({
...prev,
[name]: value
}));
}
function validate() {
const newErrors = {};
if (!form.email.includes("@")) {
newErrors.email = "Invalid email";
}
if (form.password.length < 6) {
newErrors.password = "Password too short";
}
return newErrors;
}
function handleSubmit(e) {
e.preventDefault();
const validationErrors = validate();
if (Object.keys(validationErrors).length > 0) {
setErrors(validationErrors);
return;
}
console.log("Form submitted", form);
}
return (
<form onSubmit={handleSubmit}>
<input name="email" value={form.email} onChange={handleChange} />
{errors.email && <p>{errors.email}</p>}
<input name="password" type="password" value={form.password} onChange={handleChange} />
{errors.password && <p>{errors.password}</p>}
<button type="submit">Submit</button>
</form>
);
}
This approach ensures consistent validation and predictable behavior. Senior engineers also consider performance, accessibility, and UX feedback. Interviewers ask this question to assess real-world form handling and validation logic.
A controlled form means that React controls the input values using state. Every time a user types something, React updates the state and then updates the input value.
You store all form data in state and update it with onChange. Then you can validate the data before submitting.
const [form, setForm] = useState({ email: "", password: "" });
When the user submits the form, you check if the data is valid. If not, you show an error message.
This gives you full control over the form behavior. Interviewers ask this question to see if you can build real forms, not just simple UI components.
9. Why are keys important in React lists, and how do you choose the correct key?
Normal explanation
Simple explanation
Keys are considered essential for React’s reconciliation algorithm because they help identify which elements have changed, been added, or removed. Without stable keys, React may re-render more elements than necessary or even produce incorrect UI behavior. This becomes especially problematic in dynamic lists where items are reordered, inserted, or removed. A good key should be unique and stable across renders. Using array indices is generally discouraged because it breaks when the list order changes.
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
Using index as key:
{items.map((item, index) => (
<li key={index}>{item.name}</li>
))}
This can cause bugs such as incorrect state persistence or unexpected UI updates. Senior engineers always ensure stable identifiers are used. Interviewers ask this to evaluate understanding of React internals and rendering behavior.
Keys help React understand which items in a list have changed. When you render a list, React needs a way to track each item.
The best key is something unique, like an ID:
<li key={item.id}>{item.name}</li>
Using the index is not recommended because it can cause problems if the list changes.
Interviewers ask this to see if you understand how React updates lists efficiently.
10. How would you implement debouncing in a React input field?
Normal explanation
Simple explanation
Debouncing is considered an important performance technique used to limit how often a function executes, especially in scenarios like search inputs or API calls. Without debouncing, every keystroke can trigger a request, leading to unnecessary network load and degraded performance.
A common implementation uses useEffect with setTimeout. The idea is to delay execution until the user stops typing.
import { useEffect, useState } from "react";
function Search() {
const [query, setQuery] = useState("");
const [debouncedQuery, setDebouncedQuery] = useState("");
useEffect(() => {
const timeout = setTimeout(() => {
setDebouncedQuery(query);
}, 500);
return () => clearTimeout(timeout);
}, [query]);
useEffect(() => {
if (!debouncedQuery) return;
console.log("API call:", debouncedQuery);
}, [debouncedQuery]);
return (
<input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search..."
/>
);
}
This pattern reduces unnecessary calls and improves UX. In production systems, developers may use libraries like lodash or custom hooks for better reuse. Interviewers ask this question to evaluate performance awareness and handling of real-time user input.
Debouncing means delaying a function until the user stops typing. This is useful in search inputs where you don’t want to call the API on every keystroke.
You can use setTimeout inside useEffect:
useEffect(() => {
const timeout = setTimeout(() => {
setDebouncedQuery(query);
}, 500);
return () => clearTimeout(timeout);
}, [query]);
This way, the function runs only after the user pauses typing.
Interviewers ask this because it shows you understand performance optimization in real user interactions.
Advanced React.js Questions and Answers
1. How would you prevent unnecessary re-renders in a deeply nested React component tree?
Normal explanation
Simple explanation
Preventing unnecessary re-renders is considered one of the most important optimization skills in large React applications. In deeply nested component trees, even a small state change at a high level can propagate down and trigger dozens or hundreds of component updates. This leads to wasted rendering work, increased CPU usage, and degraded user experience, especially on lower-end devices. The root causes typically include unstable props, inline function creation, and lack of memoization at critical boundaries.
One of the primary tools is React.memo, which memoizes functional components and prevents re-rendering unless props actually change. However, this only works
effectively if props themselves are stable. That means functions passed as props should be memoized using useCallback, and expensive computed values should be
memoized with useMemo. Otherwise, React will treat them as new values on every render, defeating memoization.
const Child = React.memo(({ value, onClick }) => {
return <button onClick={onClick}>{value}</button>;
});
const handleClick = useCallback(() => {
console.log("clicked");
}, []);
Another critical strategy is proper state placement. When state is lifted too high in the tree, it forces unnecessary updates across unrelated components. Keeping state close to where it is used reduces the rendering scope. Senior engineers also use techniques such as component splitting, selective context usage, and render profiling to identify bottlenecks. Interviewers ask this question to evaluate deep understanding of React’s rendering model and the ability to optimize real-world applications.
React re-renders components whenever state or props change. In large component trees, this can cause many unnecessary updates, which slows down the application. The goal is to prevent components from re-rendering when their data has not actually changed.
One common solution is React.memo, which tells React to skip rendering if props stay the same. However, this only works if props are stable. For example,
functions should be wrapped with useCallback, and computed values can use useMemo.
const memoFn = useCallback(() => {}, []);
Another important idea is not lifting state too high. If state is closer to where it is used, fewer components will re-render. Interviewers ask this question to check if you understand how React updates the UI and how to improve performance in real applications.
2. How do you handle race conditions when fetching data in React?
Normal explanation
Simple explanation
Race conditions are considered a common and often overlooked issue in React applications that rely on asynchronous data fetching. They occur when multiple requests are triggered in sequence, but responses arrive out of order. This leads to outdated data overwriting newer state, creating inconsistent UI behavior. This is especially problematic in search inputs, filters, or rapidly changing parameters where multiple requests can be in flight simultaneously.
One robust solution is using AbortController to cancel previous requests when a new one is initiated. This ensures that only the latest request remains active.
useEffect(() => {
const controller = new AbortController();
fetch(`/api?q=${query}`, { signal: controller.signal })
.then(res => res.json())
.then(data => setData(data))
.catch(err => {
if (err.name !== "AbortError") {
console.error(err);
}
});
return () => controller.abort();
}, [query]);
Another strategy is tracking request IDs and ignoring stale responses. Advanced solutions include libraries like React Query, which manage caching, deduplication, and cancellation automatically. Senior engineers understand that handling async state is not just about fetching data but ensuring UI consistency under rapid updates. Interviewers ask this question to test understanding of real-world async challenges.
Race conditions happen when multiple API calls return in the wrong order. For example, if a user types quickly, an older request may finish after a newer one and overwrite the correct data.
One solution is cancelling old requests using AbortController. When a new request starts, the previous one is cancelled.
return () => controller.abort();
Another way is checking if the response is still relevant before updating state. Interviewers ask this question because handling async behavior correctly is critical in real applications.
3. How do you optimize React Context to avoid unnecessary re-renders?
Normal explanation
Simple explanation
React Context is considered a convenient mechanism for sharing data across components, but it introduces performance challenges when misused. Every time the provider value changes, all consumers re-render, regardless of whether they use the updated data. In large applications, this can lead to significant performance degradation.
A common optimization strategy is splitting context into smaller, more focused providers. Instead of one global context, separate concerns such as authentication, theme, and user data.
<AuthProvider>
<ThemeProvider>
<App />
</ThemeProvider>
</AuthProvider>
Another approach is memoizing the provider value:
const value = useMemo(() => ({ user }), [user]);
This ensures that consumers re-render only when necessary. In advanced scenarios, developers may use selector patterns or external state libraries. Interviewers ask this question to evaluate architectural thinking and performance awareness.
Context is useful for sharing data, but it can cause many components to update at once. When the context value changes, all components using it re-render.
To fix this, you can split context into smaller pieces and use useMemo:
const value = useMemo(() => ({ user }), [user]);
This reduces unnecessary updates. Interviewers ask this to check if you understand performance optimization in React.
4. How do you safely render user-generated HTML in React?
Normal explanation
Simple explanation
Rendering user-generated HTML is considered a high-risk operation because it can introduce cross-site scripting (XSS) vulnerabilities. By default, React escapes all values
rendered in JSX, preventing malicious scripts from executing. However, using dangerouslySetInnerHTML bypasses this protection and requires careful handling.
<div dangerouslySetInnerHTML={{ __html: cleanHtml }} />
To ensure safety, developers must sanitize HTML before rendering. Libraries such as DOMPurify are commonly used to remove unsafe elements and attributes. Additionally, implementing Content Security Policy (CSP) provides an extra layer of protection.
Senior engineers understand that frontend protection is not sufficient alone. Backend validation, proper encoding, and secure data handling are also necessary. Interviewers ask this question to assess knowledge of web security and safe rendering practices in React.
React protects you from XSS by escaping content, but if you use dangerouslySetInnerHTML, you must be careful.
Always clean HTML before rendering it:
<div dangerouslySetInnerHTML={{ __html: safeHtml }} />
Use libraries like DOMPurify to remove dangerous code. Interviewers ask this to check if you understand security basics in React.
5. When would you use useReducer instead of useState, and how do you design scalable state logic with reducers in complex React applications?
Normal explanation
Simple explanation
The decision to use useReducer instead of useState is considered an architectural choice that becomes critical as application complexity grows.
While useState works well for simple, isolated updates, it becomes difficult to manage when multiple state values depend on each other or when updates follow
structured business logic. In such cases, useReducer provides a predictable and centralized way to manage state transitions.
The reducer pattern enforces a clear contract: state changes are triggered by actions, and a pure function determines how state evolves. This improves maintainability and makes debugging easier because every state transition is explicit.
const initialState = {
items: [],
loading: false,
error: null
};
function reducer(state, action) {
switch (action.type) {
case "FETCH_START":
return { ...state, loading: true, error: null };
case "FETCH_SUCCESS":
return { ...state, loading: false, items: action.payload };
case "FETCH_ERROR":
return { ...state, loading: false, error: action.payload };
default:
return state;
}
}
In complex applications, reducers can be composed, split by domain, or integrated with Context to create a global store. This approach mirrors patterns from Redux but remains lightweight. Senior engineers use reducers to avoid scattered state updates, enforce consistency, and simplify testing. Interviewers ask this question to assess whether candidates can design scalable state logic rather than relying on ad-hoc updates.
useReducer is useful when state is complex or when many actions can change it. Instead of updating state directly, you send an action, and a function called a
reducer decides how to update the state.
This helps organize logic in one place. For example:
dispatch({ type: "FETCH_SUCCESS", payload: data });
The reducer processes the action and returns new state. This makes the code easier to understand and maintain. Interviewers ask this question to check if you can manage complex state in a structured and scalable way.
6. How does React Suspense coordinate asynchronous rendering, and how would you apply it in real-world data fetching scenarios?
Normal explanation
Simple explanation
React Suspense is considered a declarative mechanism for coordinating asynchronous rendering in modern React applications. Instead of manually managing loading states across multiple components, Suspense allows components to “pause” rendering until required data is available. This is achieved by throwing a promise during rendering, which React catches and uses to suspend the component tree until the promise resolves.
The core idea is to define boundaries where asynchronous behavior is handled. Inside these boundaries, React can show fallback UI while data is loading.
import { Suspense } from "react";
function App() {
return (
<Suspense fallback={<p>Loading user...</p>}>
<UserProfile />
</Suspense>
);
}
In production, Suspense is often used with frameworks or libraries that support it, such as React Query or Relay. It shifts the mental model from imperative loading flags to declarative async boundaries. However, it introduces trade-offs, including debugging complexity and stricter separation between synchronous and asynchronous components.
Senior engineers treat Suspense as an architectural tool that simplifies async coordination while improving UI consistency. Interviewers ask this question to evaluate knowledge of concurrent rendering and modern React patterns.
Suspense helps React wait for data before showing a component. Instead of writing loading logic everywhere, you wrap parts of your app with a fallback UI.
<Suspense fallback="Loading...">
<Profile />
</Suspense>
React will show the fallback until the data is ready. This makes code cleaner and easier to manage. Interviewers ask this question to check if you understand modern async patterns in React.
7. How would you efficiently render and manage extremely large lists in React without degrading performance?
Normal explanation
Simple explanation
Rendering large lists is considered one of the most common performance bottlenecks in React applications. If thousands of elements are rendered simultaneously, it increases memory usage and slows down the browser’s rendering pipeline. The primary solution is virtualization, which limits rendering to only the visible portion of the list.
Libraries like react-window implement this efficiently by calculating which items are visible and rendering only those elements.
import { FixedSizeList as List } from "react-window";
const Row = ({ index, style }) => (
<div style={style}>Item {index}</div>
);
function App() {
return (
<List height={400} itemCount={10000} itemSize={35} width={300}>
{Row}
</List>
);
}
Additional optimizations include memoizing row components, avoiding inline functions, and implementing pagination or infinite scrolling. Senior engineers evaluate trade-offs between UX and performance and ensure smooth scrolling even under heavy loads. Interviewers ask this to assess deep performance optimization knowledge.
If you render too many items at once, your app becomes slow. The solution is to render only what the user can see.
Tools like react-window help by showing only visible items:
<List itemCount={10000}>{Row}</List>
This keeps the app fast. Interviewers ask this question to check if you understand performance optimization in real apps.
8. How would you test components that depend on asynchronous data and side effects in React?
Normal explanation
Simple explanation
Testing asynchronous behavior in React is considered a critical skill because most real-world components rely on data fetching, timers, or external APIs. The key challenge is that updates do not happen immediately, so tests must wait for the UI to settle before making assertions.
React Testing Library provides utilities such as waitFor and findBy queries to handle async updates.
import { render, screen, waitFor } from "@testing-library/react";
test("loads data", async () => {
render(<Component />);
await waitFor(() => {
expect(screen.getByText("Loaded")).toBeInTheDocument();
});
});
Best practices include mocking API calls, testing user-visible behavior instead of implementation details, and avoiding fragile timing assumptions. Senior engineers design tests that are stable, deterministic, and aligned with real user interactions. Interviewers ask this question to evaluate practical testing experience.
When testing async code, you need to wait until the UI updates. React Testing Library provides tools like waitFor to help with this.
await waitFor(() => {
expect(screen.getByText("Loaded")).toBeInTheDocument();
});
This ensures your test checks the result after data is loaded. Interviewers ask this to see if you understand how to test real components.
9. How would you implement code splitting and lazy loading in React to improve performance?
Normal explanation
Simple explanation
Code splitting is considered a key performance optimization technique that reduces initial bundle size by loading code only when it is needed. In React, this is typically
achieved using React.lazy combined with Suspense.
const LazyComponent = React.lazy(() => import("./Component"));
function App() {
return (
<Suspense fallback={<p>Loading...</p>}>
<LazyComponent />
</Suspense>
);
}
This approach ensures that large components are loaded only when required, improving initial load time. In advanced setups, developers combine route-based splitting, dynamic imports, and caching strategies. Senior engineers analyze bundle size and loading patterns to deliver optimal performance. Interviewers ask this to assess knowledge of frontend optimization strategies.
Code splitting means loading parts of your app only when needed. This makes the app faster.
const LazyComponent = React.lazy(() => import("./Component"));
You wrap it in Suspense to show a loading state. Interviewers ask this to check if you understand performance improvements.
10. What are the Rules of Hooks, and what problems do they prevent in React applications?
Normal explanation
Simple explanation
The Rules of Hooks are considered foundational constraints that ensure React’s hook system works predictably. There are two main rules: hooks must be called at the top level of a component, and hooks must only be used inside React function components or custom hooks. These rules exist because React relies on the order of hook calls to associate state with components.
Violating these rules leads to bugs where state becomes misaligned between renders. For example:
if (condition) {
useEffect(() => {
console.log("This breaks rules");
});
}
This causes inconsistent hook ordering and unpredictable behavior. Correct usage ensures that hooks are always called in the same order.
useEffect(() => {
if (condition) {
console.log("Safe usage");
}
}, [condition]);
Senior engineers rely on linting tools and disciplined code structure to enforce these rules. Interviewers ask this question to ensure that candidates understand how React internally tracks state and why consistent hook usage is critical.
Hooks must follow strict rules. They should always be called at the top level and not inside loops or conditions.
This is important because React depends on the order of hooks to track state correctly.
// Wrong
if (condition) {
useEffect(() => {});
}
// Correct
useEffect(() => {
if (condition) {}
}, [condition]);
If you break these rules, your app may behave incorrectly. Interviewers ask this question to check if you understand how hooks work internally.
How to Prepare for Real-World React Coding Interviews?
Preparing for practical React interviews requires a shift from passive learning to active coding. When working with interview questions on ReactJS, you need to simulate real conditions: time pressure, incomplete requirements, and the need to explain your decisions clearly. It’s not enough to know concepts - you must apply them confidently in working code. Practicing React.js interview questions with a focus on real scenarios will help you develop both speed and clarity. The key is consistency: build, debug, refactor, and explain your solutions as if you were already in an interview.
| Preparation Strategy | Detailed Explanation |
| Practice building real UI components | Instead of solving isolated problems, build complete components like forms, modals, dashboards, or data tables. Focus on real behavior: validation, error handling, loading states, and edge cases. This mirrors what you will face in interviews and strengthens your ability to think in complete features rather than small code snippets. |
| Simulate live coding sessions | Set a timer and solve problems without external help. Practice explaining your thought process out loud while coding. This builds confidence and prepares you for interviews where communication is just as important as the solution itself. Recording yourself can help identify weak points in both coding and explanation. |
| Focus on debugging skills | Many interviews include fixing broken code rather than writing from scratch. Practice identifying issues in existing components, especially related to state updates, effects, and rendering behavior. Strong debugging skills show real experience and often differentiate candidates more than perfect code writing. |
| Master async logic and data flow | Work with APIs regularly: fetching data, handling loading states, managing errors, and avoiding race conditions. Practice structuring your code so data logic is clean and predictable. Understanding async flows deeply is critical because most real applications rely heavily on external data. |
| Refactor your own code | After solving a problem, revisit your solution and improve it. Simplify logic, extract reusable parts, and improve readability. Interviewers value clean and maintainable code, so showing that you can refine your work is a strong signal of maturity. |
| Learn to explain trade-offs | Practice answering “why” questions. Why use one hook over another? Why split components? Why optimize or not optimize? Being able to explain trade-offs clearly shows senior-level thinking and helps interviewers understand your decision-making process. |
| Review common patterns and mistakes | Study typical React pitfalls such as unnecessary re-renders, incorrect dependency arrays, or improper state structure. Understanding common mistakes helps you avoid them during interviews and also makes you faster at spotting issues in provided code. |