Rendering Basics

Preview — 3 of 10 questions

What triggers a React component to re-render?

javascript

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <ExpensiveChild />  {/* no props from Parent */}
    </>
  );
}

function ExpensiveChild() {
  console.log("ExpensiveChild rendered");
  return <div>Static content</div>;
}

AExpensiveChild only re-renders when its own props change

BExpensiveChild never re-renders because it has no props

CBy default, ExpensiveChild re-renders every time Parent re-renders — React re-renders all children when a parent's state changes, regardless of whether the child's output changes

DReact skips re-rendering static components automatically

What does React.memo do?

javascript

const ProductCard = React.memo(function ProductCard({ product }) {
  console.log(`Rendering ${product.name}`);
  return (
    <div>
      <h3>{product.name}</h3>
      <p>${product.price}</p>
    </div>
  );
});

AReact.memo prevents the component from ever re-rendering

BReact.memo wraps a component with a shallow prop comparison — if props haven't changed (by reference for objects, by value for primitives), React skips the re-render

CReact.memo caches the component's DOM output

DReact.memo only works with class components

What is code splitting and when should you use it?

javascript

// Without code splitting — ALL routes in main bundle:
import HomePage from "./pages/HomePage";
import AdminDashboard from "./pages/AdminDashboard"; // large, rarely used
import UserProfile from "./pages/UserProfile";

// With code splitting:
const AdminDashboard = lazy(() => import("./pages/AdminDashboard"));

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/admin" element={
        <Suspense fallback={<Loading />}>
          <AdminDashboard />
        </Suspense>
      } />
    </Routes>
  );
}

ACode splitting splits the bundle into smaller chunks loaded on demand — AdminDashboard is only downloaded when the user navigates to /admin, reducing initial load time

BCode splitting increases the total bundle size

CReact.lazy downloads all chunks at startup for faster navigation later

DCode splitting requires a different React version per chunk

Answer all 10 questions (7 more), see explanations for every answer, and track your score.