React Re-Rendering & Performance Mastery (2026 Edition)

Your Component Function
        │
        ▼
   React calls it  ──► produces JSX (Virtual DOM nodes)
        │
        ▼
 React diffs old vs new Virtual DOM  ──► finds the delta
        │
        ▼
 React updates the real DOM only where needed (Commit phase)

// Your JSX
<div className="card">
  <h1>Hello</h1>
  <p>World</p>
</div>

{
  type: "div",
  props: { className: "card" },
  children: [
    { type: "h1", props: {}, children: ["Hello"] },
    { type: "p",  props: {}, children: ["World"] }
  ]
}

// Before
<div><Counter /></div>
// After
<span><Counter /></span>

// Before
<Button color="blue" />
// After
<Button color="red" />

// Bad — React has to guess what changed
{items.map(item => <Item label={item.label} />)}
// Good — React knows exactly what changed
{items.map(item => <Item key={item.id} label={item.label} />)}

1. State changes       → useState / useReducer setter is called
2. Props change        → parent passes new value
3. Context changes     → a Provider value updates
4. Parent re-renders   → child re-renders by default (even if props didn't change)

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>Click</button>
      <Child />  {/* No props passed — but this re-renders anyway */}
    </>
  );
}
function Child() {
  console.log("Child rendered"); // fires every time Parent re-renders
  return <p>I am the child</p>;
}

graph TD
    A[State / Props / Context Change] --> B[Schedule Re-render]
    B --> C[Render Phase: Call component function]
    C --> D[Produce new Virtual DOM tree]
    D --> E[Reconciliation: Diff old vs new tree]
    E --> F{Any changes?}
    F -- No --> G[Skip DOM update]
    F -- Yes --> H[Commit Phase: Update real DOM]
    H --> I[Run useLayoutEffect]
    I --> J[Browser paints]
    J --> K[Run useEffect]

// Without memo — re-renders every time Parent does
function UserCard({ user }) {
  return <div>{user.name}</div>;
}
// With memo — only re-renders when `user` prop changes (shallow compare)
const UserCard = React.memo(function UserCard({ user }) {
  return <div>{user.name}</div>;
});

// This defeats memo every time — new function reference on every parent render
<UserCard onClick={() => handleClick(user.id)} />
// Fix: stabilize the callback with useCallback
const handleClick = useCallback((id) => doSomething(id), []);
<UserCard onClick={handleClick} />

// Recalculates on every render — even if products didn't change
const filtered = products.filter(p => p.inStock && p.price < budget);
// Only recalculates when products or budget changes
const filtered = useMemo(
  () => products.filter(p => p.inStock && p.price < budget),
  [products, budget]
);

// Over-engineered — this is actually slower due to memo overhead
const greeting = useMemo(() => `Hello, ${name}!`, [name]);
// Just do this
const greeting = `Hello, ${name}!`;

// New reference every render — breaks UserCard's memo
function Parent() {
  const handleDelete = (id) => deleteUser(id);
  return <UserCard onDelete={handleDelete} />;
}
// Stable reference — UserCard's memo works correctly
function Parent() {
  const handleDelete = useCallback((id) => deleteUser(id), []);
  return <UserCard onDelete={handleDelete} />;
}

function Timer() {
  const intervalRef = useRef(null); // updating this doesn't cause re-render
  useEffect(() => {
    intervalRef.current = setInterval(() => tick(), 1000);
    return () => clearInterval(intervalRef.current);
  }, []);
}

function Component({ value }) {
  const prevValue = useRef(value);
  useEffect(() => {
    prevValue.current = value;
  });
  return <p>Prev: {prevValue.current}, Current: {value}</p>;
}

// Search state in App re-renders Header and Sidebar unnecessarily
function App() {
  const [search, setSearch] = useState("");
  return (
    <div>
      <Header />         {/* Re-renders unnecessarily */}
      <Sidebar />        {/* Re-renders unnecessarily */}
      <SearchBar search={search} onChange={setSearch} />
      <Results search={search} />
    </div>
  );
}
// Search state colocated — only SearchBar and Results re-render
function App() {
  return (
    <div>
      <Header />   {/* Never re-renders due to search */}
      <Sidebar />  {/* Never re-renders due to search */}
      <SearchSection />
    </div>
  );
}
function SearchSection() {
  const [search, setSearch] = useState("");
  return (
    <>
      <SearchBar search={search} onChange={setSearch} />
      <Results search={search} />
    </>
  );
}

// SlowChild re-renders whenever App re-renders
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <SlowChild />
    </div>
  );
}
// SlowChild is passed as children — App doesn't own it
function Counter({ children }) {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      {children}
    </div>
  );
}
function App() {
  return (
    <Counter>
      <SlowChild /> {/* Created in App's scope — not re-rendered when Counter updates */}
    </Counter>
  );
}

// Every consumer re-renders on any context change
const AppContext = createContext();
function App() {
  const [theme, setTheme] = useState("dark");
  const [user, setUser] = useState(null);
  return (
    <AppContext.Provider value={{ theme, setTheme, user, setUser }}>
      <Everything />
    </AppContext.Provider>
  );
}
// Split contexts by concern — consumers only re-render for their data
const ThemeContext = createContext();
const UserContext = createContext();
function App() {
  const [theme, setTheme] = useState("dark");
  const [user, setUser] = useState(null);
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <UserContext.Provider value={{ user, setUser }}>
        <Everything />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

const value = useMemo(() => ({ theme, setTheme }), [theme]);
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;

// Using index as key causes remount bugs when list order changes
{todos.map((todo, index) => <TodoItem key={index} todo={todo} />)}
// Use a stable unique ID
{todos.map(todo => <TodoItem key={todo.id} todo={todo} />)}

// Before: Every card re-renders on any dashboard state change
function Dashboard() {
  const [filter, setFilter] = useState("all");
  const [sortBy, setSortBy] = useState("name");
  const data = useDataFetch();
  return (
    <div>
      <FilterBar filter={filter} onFilter={setFilter} />
      <SortBar sortBy={sortBy} onSort={setSortBy} />
      {data.map(item => (
        <DashboardCard key={item.id} item={item} />
      ))}
    </div>
  );
}

// After: Memoized card + stable callbacks
const DashboardCard = React.memo(function DashboardCard({ item, onView }) {
  return (
    <div className="card">
      <h3>{item.title}</h3>
      <button onClick={() => onView(item.id)}>View</button>
    </div>
  );
});
function Dashboard() {
  const [filter, setFilter] = useState("all");
  const [sortBy, setSortBy] = useState("name");
  const data = useDataFetch();
  const handleView = useCallback((id) => navigate(`/item/${id}`), []);
  const filteredData = useMemo(
    () => data
      .filter(item => filter === "all" || item.status === filter)
      .sort((a, b) => a[sortBy].localeCompare(b[sortBy])),
    [data, filter, sortBy]
  );
  return (
    <div>
      <FilterBar filter={filter} onFilter={setFilter} />
      <SortBar sortBy={sortBy} onSort={setSortBy} />
      {filteredData.map(item => (
        <DashboardCard key={item.id} item={item} onView={handleView} />
      ))}
    </div>
  );
}

// Classic controlled form — every keystroke re-renders the entire form
function SlowForm() {
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    // ... 25 more fields
  });
  const handleChange = (e) => {
    setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));
  };
  return (
    <form>
      <input name="firstName" value={formData.firstName} onChange={handleChange} />
      <input name="lastName"  value={formData.lastName}  onChange={handleChange} />
      {/* 28 more inputs — all re-render on every keystroke */}
    </form>
  );
}

// Controlled — React owns the value
function ControlledInput() {
  const [value, setValue] = useState("");
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}
// Uncontrolled — DOM owns the value
function UncontrolledInput() {
  const ref = useRef(null);
  const handleSubmit = () => console.log(ref.current.value);
  return <input ref={ref} defaultValue="" />;
}

npm install react-hook-form

import { useForm } from "react-hook-form";
function LoginForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting }
  } = useForm({
    defaultValues: { email: "", password: "" }
  });
  const onSubmit = async (data) => {
    await loginUser(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("email", {
          required: "Email is required",
          pattern: { value: /\S+@\S+\.\S+/, message: "Invalid email" }
        })}
        placeholder="Email"
      />
      {errors.email && <p>{errors.email.message}</p>}
      <input
        type="password"
        {...register("password", {
          required: "Password is required",
          minLength: { value: 8, message: "Min 8 characters" }
        })}
        placeholder="Password"
      />
      {errors.password && <p>{errors.password.message}</p>}
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Logging in..." : "Login"}
      </button>
    </form>
  );
}

graph LR
    A[User types] --> B[DOM Input]
    B --> C[RHF ref tracks value]
    C --> D{Validation trigger?}
    D -- onChange mode --> E[Validate + update errors state]
    D -- onBlur mode --> F[Validate on blur only]
    D -- onSubmit mode --> G[Validate on submit only]
    E --> H[Re-render only error section]
    F --> H
    G --> H

npm install zod @hookform/resolvers

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
// Define schema once — reuse for client AND server validation
const registerSchema = z.object({
  username: z.string().min(3, "Username must be at least 3 characters"),
  email: z.string().email("Invalid email address"),
  password: z.string()
    .min(8, "Password must be at least 8 characters")
    .regex(/[A-Z]/, "Must contain at least one uppercase letter")
    .regex(/[0-9]/, "Must contain at least one number"),
  confirmPassword: z.string()
}).refine(data => data.password === data.confirmPassword, {
  message: "Passwords don't match",
  path: ["confirmPassword"]
});
type RegisterFormData = z.infer<typeof registerSchema>;
function RegisterForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<RegisterFormData>({
    resolver: zodResolver(registerSchema)
  });
  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <input {...register("username")} placeholder="Username" />
      {errors.username && <p>{errors.username.message}</p>}
      <input {...register("email")} placeholder="Email" />
      {errors.email && <p>{errors.email.message}</p>}
      <input type="password" {...register("password")} placeholder="Password" />
      {errors.password && <p>{errors.password.message}</p>}
      <input type="password" {...register("confirmPassword")} placeholder="Confirm" />
      {errors.confirmPassword && <p>{errors.confirmPassword.message}</p>}
      <button type="submit">Register</button>
    </form>
  );
}

import { useForm, FormProvider } from "react-hook-form";
const STEPS = ["Personal Info", "Address", "Review"];
function MultiStepForm() {
  const [currentStep, setCurrentStep] = useState(0);
  const methods = useForm({
    defaultValues: {
      firstName: "", lastName: "",
      street: "", city: "", zip: "",
    },
    mode: "onBlur"
  });
  const next = async () => {
    const fieldsForStep = currentStep === 0
      ? ["firstName", "lastName"]
      : ["street", "city", "zip"];
    const valid = await methods.trigger(fieldsForStep);
    if (valid) setCurrentStep(s => s + 1);
  };
  return (
    <FormProvider {...methods}>
      <StepIndicator steps={STEPS} current={currentStep} />
      {currentStep === 0 && <PersonalStep />}
      {currentStep === 1 && <AddressStep />}
      {currentStep === 2 && <ReviewStep />}
      <div className="nav">
        {currentStep > 0 && (
          <button onClick={() => setCurrentStep(s => s - 1)}>Back</button>
        )}
        {currentStep < 2
          ? <button onClick={next}>Next</button>
          : <button onClick={methods.handleSubmit(onFinalSubmit)}>Submit</button>
        }
      </div>
    </FormProvider>
  );
}

import { useForm, useFieldArray } from "react-hook-form";
function TeamForm() {
  const { control, register, handleSubmit } = useForm({
    defaultValues: { members: [{ name: "", role: "" }] }
  });
  const { fields, append, remove } = useFieldArray({
    control,
    name: "members"
  });
  return (
    <form onSubmit={handleSubmit(console.log)}>
      {fields.map((field, index) => (
        <div key={field.id}> {/* field.id is a stable key — not the index */}
          <input {...register(`members.${index}.name`)} placeholder="Name" />
          <input {...register(`members.${index}.role`)} placeholder="Role" />
          <button type="button" onClick={() => remove(index)}>Remove</button>
        </div>
      ))}
      <button type="button" onClick={() => append({ name: "", role: "" })}>
        Add Member
      </button>
      <button type="submit">Save Team</button>
    </form>
  );
}

// What you write — clean, simple code
function ProductList({ products, onSelect }) {
  const sortedProducts = [...products].sort((a, b) =>
    a.name.localeCompare(b.name)
  );
  const handleSelect = (product) => {
    onSelect(product.id);
  };
  const expensiveFiltered = sortedProducts.filter(p => p.price > 100);
  return (
    <ul>
      {expensiveFiltered.map(product => (
        <ProductItem
          key={product.id}
          product={product}
          onSelect={handleSelect}
        />
      ))}
    </ul>
  );
}

// What the compiler generates (conceptually simplified)
function ProductList({ products, onSelect }) {
  const $ = _cache(5);
  let sortedProducts = $[0] !== products
    ? ($[0] = products, $[1] = [...products].sort(...))
    : $[1];
  let handleSelect = $[2] !== onSelect
    ? ($[2] = onSelect, $[3] = (product) => onSelect(product.id))
    : $[3];
  let expensiveFiltered = $[4] !== sortedProducts
    ? ($[4] = sortedProducts, $[5] = sortedProducts.filter(p => p.price > 100))
    : $[5];
  // JSX is also cached
}

// next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
  reactCompiler: true,
};
export default nextConfig;

npm install babel-plugin-react-compiler

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [["babel-plugin-react-compiler"]]
      }
    })
  ]
});

["babel-plugin-react-compiler", {
  sources: (filename) => filename.includes("/src/components/"),
}]

Red bars    = expensive renders (>16ms = dropped frame)
Yellow      = medium cost
Green       = fast renders
Hover a bar to see:
- Component name
- Render duration
- Why it rendered (prop/state/context/parent)
- How many times it rendered

npm install @welldone-software/why-did-you-render

// src/wdyr.js — import this as the FIRST line in index.js
import React from "react";
if (process.env.NODE_ENV === "development") {
  const whyDidYouRender = require("@welldone-software/why-did-you-render");
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

// Flag specific components for tracking
function ExpensiveDashboard() {
  return <div>...</div>;
}
ExpensiveDashboard.whyDidYouRender = true;
// Console now tells you exactly why each render happened

import { useActionState } from "react";
async function submitForm(prevState, formData) {
  const name = formData.get("name");
  try {
    await updateUsername(name);
    return { success: true, message: "Username updated!" };
  } catch (e) {
    return { success: false, message: e.message };
  }
}
function UsernameForm() {
  const [state, formAction, isPending] = useActionState(submitForm, null);
  return (
    <form action={formAction}>
      <input name="name" placeholder="New username" />
      <button type="submit" disabled={isPending}>
        {isPending ? "Saving..." : "Save"}
      </button>
      {state?.message && <p>{state.message}</p>}
    </form>
  );
}

function LikeButton({ post }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    post.likes,
    (state, increment) => state + increment
  );
  const handleLike = async () => {
    addOptimisticLike(1);          // instant UI update
    await likePost(post.id);       // actual API call
    // on failure, React auto-reverts to original state
  };
  return (
    <button onClick={handleLike}>
      {optimisticLikes} likes
    </button>
  );
}

async function handleFetch() {
  const data = await fetchData();
  setLoading(false);   // |
  setData(data);       // | -- single re-render
  setError(null);      // |
}

Build
- [ ] React Compiler enabled
- [ ] Code splitting on routes (React.lazy)
- [ ] Dynamic imports for heavy libraries
- [ ] Bundle analyzer run (source-map-explorer)
Architecture
- [ ] Server Components for non-interactive content
- [ ] State colocated to lowest necessary component
- [ ] Context split by concern
- [ ] Stable keys on all lists (no index as key)
- [ ] React.memo only where profiler confirms need
Forms
- [ ] React Hook Form for medium/large forms
- [ ] Validation mode set to onBlur or onSubmit for non-critical fields
- [ ] Zod schema for complex validation
Lists
- [ ] Virtualization for lists over 100 items (@tanstack/react-virtual)
Monitoring
- [ ] React DevTools Profiler in development
- [ ] Core Web Vitals (LCP, INP, CLS) tracked in production

// New array reference on every render — breaks memo
function Parent() {
  return <Child items={[]} />;
}
// Define outside the component
const EMPTY_ITEMS = [];
function Parent() {
  return <Child items={EMPTY_ITEMS} />;
}

// Spreading creates a new object — all consumers re-render
const [user, setUser] = useState({ name: "", age: 0 });
setUser(prev => ({ ...prev, name: "Alice" }));
// Split into atomic state or use useReducer for complex objects
const [name, setName] = useState("");
const [age, setAge] = useState(0);

// Runs on every render — no dependency array
useEffect(() => { fetchData(userId); });
// Stale closure — uses initial value of userId forever
useEffect(() => { fetchData(userId); }, []);
// Correct
useEffect(() => { fetchData(userId); }, [userId]);

// New component type on every render — full remount every time
function Parent() {
  const Row = ({ item }) => <li>{item.name}</li>; // defined inside Parent
  return <ul>{items.map(i => <Row key={i.id} item={i} />)}</ul>;
}
// Define components at module level
const Row = ({ item }) => <li>{item.name}</li>;
function Parent() {
  return <ul>{items.map(i => <Row key={i.id} item={i} />)}</ul>;
}

// Memoization overhead outweighs any benefit here
const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName]);
// Just do this
const fullName = `${firstName} ${lastName}`;

graph TD
    A[React Performance in 2026] --> B[Architecture Level]
    A --> C[Compiler Level]
    A --> D[Runtime Level]
    B --> B1[Server Components — shift work to server]
    B --> B2[Code Splitting — lazy load routes/features]
    B --> B3[State Colocation — keep state close to usage]
    C --> C1[React Compiler 1.0 — automatic memoization]
    C --> C2[~40% fewer re-renders, zero code change]
    C --> C3[useMemo is now an escape hatch, not the default]
    D --> D1[useOptimistic — instant UI feedback]
    D --> D2[Automatic Batching — fewer render cycles]
    D --> D3[Virtualization — for 100+ item lists]