30 React.js Interview Questions You Should Know Before Your Next Frontend Interview ⚛️

Whether you're preparing for a frontend interview or simply want to brush up on your React.js knowledge, this guide covers 30 real-world, scenario-based React interview questions that interviewers frequently ask.

The goal isn't just to memorize definitions.

These questions are designed to help you understand how and when to apply React concepts in real-world applications.

📌 Bookmark this article and come back to it during your next interview preparation session.

---

📚 What We'll Cover

In this guide, we'll explore questions around:

• Conditional rendering
• API calls and side effects
• Form validation
• Performance optimization
• State management
• Component re-rendering
• Keys and lists
• Dark mode
• Dynamic components
• useEffect vs useLayoutEffect
• Large-list optimization
• And much more...

---

1. How do you handle conditional rendering in React?

Conditional rendering allows you to render different UI based on application state or conditions.

You can use standard JavaScript techniques such as:

• if...else
• Ternary operators
• Logical &&

Example

{isLoggedIn ? <Dashboard /> : <Login />}

💡 Interview Tip

For simple conditions, a ternary operator or && is usually sufficient.

For more complex conditions, consider moving the logic outside the JSX to keep the component readable.

---

2. You need to fetch API data when a component mounts. What's the best way to do it?

💡 Key Concept

The typical approach is to perform the API request inside a useEffect hook when the component needs to fetch data after rendering.

A common pattern is:

useEffect(() => {
  // Fetch API data
}, []);

The empty dependency array indicates that the effect is intended to run after the initial render.

Note: In modern React applications, the best approach can also depend on the framework or data-fetching library you're using.

---

3. How would you handle form validation in React?

A common approach is to use controlled inputs and perform validation during events such as onChange or onSubmit.

For example:

const [email, setEmail] = useState("");

const handleSubmit = (e) => {
  e.preventDefault();

  if (!email.includes("@")) {
    // Show validation error
  }
};

For larger forms, you can also use libraries such as:

• Formik
• Yup

💡 Interview Tip

Explain why you would choose a validation library.

For a simple form, manual validation may be sufficient.

For complex forms with many fields and validation rules, a dedicated library can improve maintainability.

---

4. How do you prevent unnecessary re-renders?

React provides several tools for optimizing component rendering.

Commonly used techniques include:

React.memo

Prevents a component from re-rendering when its props haven't changed.

const UserCard = React.memo(({ user }) => {
  return <div>{user.name}</div>;
});

useMemo

Memoizes an expensive calculation.

const filteredUsers = useMemo(() => {
  return users.filter(user => user.active);
}, [users]);

useCallback

Memoizes a function reference.

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

💡 Interview Tip

Don't say:

"I always use useMemo and useCallback."

Instead, explain that these tools should be used when profiling shows a meaningful performance benefit.

---

5. How do you manage state in a deeply nested component?

If state needs to be shared across multiple levels of the component tree, one option is to lift the state up to the nearest common ancestor.

For application-wide or cross-cutting state, you can also consider:

• Context API
• Redux
• Other state-management libraries

Example

                    App
                     │
                ┌────┴────┐
                │         │
             Header     Dashboard
                           │
                        Profile
                           │
                         Button

If the Button needs state owned by App, passing props through every intermediate component can result in prop drilling.

Context or a state-management solution can help when the state genuinely needs to be shared broadly.

---

6. A component's prop hasn't changed, but it re-renders. Why?

A common reason is that the parent component re-rendered.

By default, when a parent renders, React may also render its child components.

For example:

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        {count}
      </button>

      <UserCard user={user} />
    </>
  );
}

Even if user hasn't changed, UserCard may render again because its parent rendered.

One possible optimization is:

const UserCard = React.memo(({ user }) => {
  return <div>{user.name}</div>;
});

💡 Important

React.memo isn't a guarantee that a component will never render again. It provides a memoization optimization based on props.

---

7. What are keys in React and why are they important?

Keys help React identify which items in a list have:

• Changed
• Been added
• Been removed

Example

users.map(user => (
  <UserCard
    key={user.id}
    user={user}
  />
))

Keys should be stable and unique among sibling elements.

❌ Avoid using array indexes when:

• Items can be reordered
• Items can be inserted or removed
• The list changes dynamically

💡 Interview Tip

The important concept isn't simply:

"Keys must be unique."

It's that keys should provide a stable identity for list items across renders.

---

8. How would you implement dark mode in a React application?

A common approach is to maintain the current theme in shared state and apply the corresponding theme to the application.

For example:

const [darkMode, setDarkMode] = useState(false);

return (
  <div className={darkMode ? "dark" : "light"}>
    <button onClick={() => setDarkMode(!darkMode)}>
      Toggle Theme
    </button>

    <App />
  </div>
);

For larger applications, the theme can be exposed through the Context API.

You can also persist the user's preference using mechanisms such as:

React State
     ↓
Context
     ↓
CSS Classes / Variables
     ↓
UI Theme

💡 Interview Tip

For a production application, also think about:

• Persisting the user's preference
• System theme preference
• Avoiding a flash of the wrong theme during initial load

---

9. How do you dynamically render components from an array of data?

The most common approach is to use JavaScript's map() function.

Example

const data = [
  { id: 1, name: "Product A" },
  { id: 2, name: "Product B" },
  { id: 3, name: "Product C" }
];

return (
  <>
    {data.map(item => (
      <Card
        key={item.id}
        {...item}
      />
    ))}
  </>
);

💡 Interview Tip

Always pay attention to the key.

Using a stable identifier such as item.id is generally preferable to using the array index for dynamic lists.

---

10. When should you use useEffect vs useLayoutEffect?

This is a common React interview question.

useEffect

useEffect runs after React has committed the update and, in typical cases, after the browser has painted.

It is commonly used for:

• API calls
• Subscriptions
• Timers
• Synchronizing with external systems

useEffect(() => {
  fetchUser();
}, []);

useLayoutEffect

useLayoutEffect runs synchronously after DOM mutations but before the browser paints.

It is useful when you need to:

• Measure DOM elements
• Read layout information
• Make DOM adjustments before the user sees the result

useLayoutEffect(() => {
  const height = elementRef.current.offsetHeight;
  console.log(height);
}, []);

🧠 Easy way to remember

useEffect → Side effects

useLayoutEffect → Layout / DOM measurement

Use useLayoutEffect sparingly because it can block browser painting.

---

11. How do you optimize a large list of components?

Rendering thousands of DOM elements simultaneously can negatively affect performance.

A common solution is virtualization, also called windowing.

Instead of rendering the entire list:

10,000 items
     ↓
Render all 10,000 ❌

Virtualization renders only the items currently visible:

10,000 items
     ↓
Visible viewport
     ↓
Render ~20–50 items
     ↓
Reuse DOM nodes while scrolling

Popular libraries include:

• React Window
• React Virtualized

💡 Interview Tip

When discussing large-list optimization, don't stop at virtualization.

You can also consider:

• Pagination
• Infinite scrolling
• Memoized list items
• Efficient keys
• Avoiding unnecessary state updates
• Server-side filtering
• Debounced search

The right solution depends on the application's requirements.

---

🚀 Final Thoughts

React interviews are increasingly moving beyond:

"What does this hook do?"

and toward:

"How would you solve this problem in a real application?"

That's why scenario-based preparation is so important.

When answering React interview questions, try to explain:

1. What problem are you solving?

2. What approach would you choose?

3. Why would you choose it?

4. What trade-offs does it introduce?

5. How would you optimize it for production?

That approach demonstrates much more than memorization—it demonstrates engineering judgment.

---

📌 Bookmark this article for your next React interview preparation session.

If you're preparing for a Senior Frontend Developer, Full-Stack Developer, or Software Architect interview, these scenario-based questions can help you think beyond syntax and focus on real-world engineering decisions.

---

💬 Your Turn

What's the most difficult React interview question you've faced?

Share it in the comments. It might become the next question in this series. 👇

React #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #FrontendInterview #ReactInterview #SoftwareEngineering #CodingInterview #FrontendDeveloper