DeployU
Interviews / Frontend Engineering / An expensive component is re-rendering unnecessarily. How would you fix this state management issue?

Questions

A critical component is crashing in production. How would you debug it?
Q
This component makes duplicate API calls in development. How does Strict Mode help identify the bug?
Q C
This component is crashing the entire app. Implement an Error Boundary to gracefully handle the error.
Q C
This statically generated page is showing stale data. How do you fetch and display live data on the client?
Q C
This component is failing its test. Fix the component to make the test pass.
Q C
This form doesn't reset correctly. Fix the bug and refactor to a more robust solution.
Q C
Your app's state management is a mess. How would Flux architecture help?
Q
This button should increment twice, but only increments once. How do you fix it?
Q C
This application suffers from 'prop drilling.' How do you fix it?
Q C
This component's UI is not updating. Why is direct state mutation problematic?
Q C
This component's state logic is complex. Refactor it with `useReducer`.
Q C
An expensive component is re-rendering unnecessarily. How would you fix this state management issue?
Q C
This list re-renders inefficiently. How does React's reconciliation algorithm explain why?
Q C
This component re-renders unnecessarily due to context object reference changes. How do you fix it?
Q C
An expensive component is re-rendering unnecessarily. How would you fix this state management issue?
Q C
This optimized component re-renders unnecessarily. How do you fix it with `useCallback`?
Q C
This large component is slowing down initial load. Implement code splitting.
Q C
This component performs expensive calculations unnecessarily. Optimize it with `useMemo`.
Q C
This component re-renders unnecessarily. How do you prevent it?
Q C
This data fetching component has a race condition. How do you fix it?
Q C
This data fetching component is causing an infinite loop. How do you fix it?
Q C
This component causes a hydration mismatch error. Why and how to fix it?
Q C
This component has hardcoded text. Refactor it to support multiple languages.
Q C
This component is not reusable. Refactor it using the composition pattern.
Q C
This modal is clipped by its parent. Fix it using a React Portal.
Q C
This component is breaking layout. Fix it using a React Fragment.
Q C
This custom component is not forwarding its ref. How do you fix it?
Q C
These components duplicate logic. Refactor them using a Higher-Order Component.
Q C
These components duplicate logic. Refactor them using the Render Props pattern.
Q C
This component manages loading state imperatively. Refactor it to use React Suspense.
Q C
This legacy class component mixes logic and UI. Refactor it to a modern functional component using Hooks.
Q C
Why does this component log the old state value after calling a useState setter?
Q C
Clarify the core React concepts: Element, Component, and Node.
Q
Your team is evaluating React. How would you explain its core benefits?
Q
This component is crashing with a JSX syntax error. How do you fix it?
Q C
A child component is failing to update the parent's state. Why is this happening and how do you fix it?
Q C
This component is trying to modify a prop directly. How do you fix it?
Q C
Your UI freezes during large updates. How does React Fiber help?
Q
This component has accessibility ID issues. Fix it with `useId`.
Q C
This component flickers when resizing. Fix it using the correct effect hook.
Q C
This component is crashing due to a 'Rules of Hooks' violation. How do you fix it?
Q C
This `useEffect` is logging a stale value. How do you fix its dependency array?
Q C
This component has issues managing a timer ID. Fix it with `useRef`.
Q C
These components duplicate stateful logic. Refactor them using a custom Hook.
Q C
This form uses an uncontrolled input. Refactor it to be a controlled component.
Q C

An expensive component is re-rendering unnecessarily. How would you fix this state management issue?

debugging Performance Interactive Quiz Code Examples

A junior developer built a new feature using React Context to manage the application’s global state. The state object contains everything: the current user’s info, and the UI theme (light/dark mode).

They’ve noticed a performance problem. The UserWelcome component, which is expensive to render, re-renders every single time the theme is changed. This is making the UI feel sluggish.

You’ve been given the code that demonstrates this issue.

  1. Explain why the UserWelcome component re-renders every time the “Toggle Theme” button is clicked.
  2. Describe two different strategies to fix this performance issue so that UserWelcome only re-renders when the user data it cares about actually changes.
Your Code 
import React, { useState, useContext, createContext } from 'react';

// The monolithic context holding all global state
const AppContext = createContext();

// A component that is "expensive" to render
function UserWelcome() {
  const { user } = useContext(AppContext);
  console.log('Re-rendering UserWelcome (expensive)...');
  return <h1>Welcome, {user.name}!</h1>;
}

// A component to change the theme
function ThemeToggler() {
  const { theme, setTheme } = useContext(AppContext);
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Toggle Theme
    </button>
  );
}

// The main App provider
export default function App() {
  const [user, setUser] = useState({ name: 'Alice' });
  const [theme, setTheme] = useState('light');

  const contextValue = { user, setUser, theme, setTheme };

  return (
    <AppContext.Provider value={contextValue}>
      <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff', padding: '20px' }}>
        <ThemeToggler />
        <hr />
        <UserWelcome />
      </div>
    </AppContext.Provider>
  );
}
Click "Run Code" to see output...
Click "Run Code" to see test results...
How Different Experience Levels Approach This
Junior Engineer
Surface Level

import React, { useState, useContext, createContext } from 'react'; // The monolithic context holding all global state const AppContext = createContext(); // A component that is "expensive" to render function UserWelcome() { const { user } = useContext(AppContext); console.log('Re-rendering UserWelcome (expensive)...'); return <h1>Welcome, {user.name}!</h1>; } // A component to change the theme function ThemeToggler() { const { theme, setTheme } = useContext(AppContext); return ( <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> Toggle Theme </button> ); } // The main App provider export default function App() { const [user, setUser] = useState({ name: 'Alice' }); const [theme, setTheme] = useState('light'); const contextValue = { user, setUser, theme, setTheme }; return ( <AppContext.Provider value={contextValue}> <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff', padding: '20px' }}> <ThemeToggler /> <hr /> <UserWelcome /> </div> </AppContext.Provider> ); }

Senior Engineer
Production Ready

// Solution 1: Split the Contexts (Best Practice) // Create two separate contexts const ThemeContext = createContext(); const UserContext = createContext(); function UserWelcome() { // Subscribe ONLY to the UserContext const { user } = useContext(UserContext); console.log('Re-rendering UserWelcome (expensive)...'); return <h1>Welcome, {user.name}!</h1>; } function ThemeToggler() { // Subscribe ONLY to the ThemeContext const { theme, setTheme } = useContext(ThemeContext); return ( <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> Toggle Theme </button> ); } export default function App() { const [user, setUser] = useState({ name: 'Alice' }); const [theme, setTheme] = useState('light'); // Nest the providers return ( <ThemeContext.Provider value={{ theme, setTheme }}> <UserContext.Provider value={{ user, setUser }}> <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff', padding: '20px' }}> <ThemeToggler /> <hr /> <UserWelcome /> </div> </UserContext.Provider> </ThemeContext.Provider> ); }

What Makes the Difference?
  • Context over facts: Explains when and why, not just what
  • Real examples: Provides specific use cases from production experience
  • Trade-offs: Acknowledges pros, cons, and decision factors

Practice Question

What is the primary performance drawback of using a single, large React Context for unrelated pieces of state?