State Colocation as Optimization

The Most Underrated Optimization

Ask a React developer how to fix unnecessary re-renders and they'll say React.memo. Ask a senior React developer and they'll say "move the state down."

// BEFORE: state at the top cascades to everything
function App() {
  const [isTooltipOpen, setIsTooltipOpen] = useState(false);

  return (
    <div>
      <Header />           {/* Re-renders when tooltip toggles */}
      <Sidebar />          {/* Re-renders when tooltip toggles */}
      <MainContent />      {/* Re-renders when tooltip toggles */}
      <HelpButton
        isOpen={isTooltipOpen}
        onToggle={() => setIsTooltipOpen(!isTooltipOpen)}
      />
      <Footer />           {/* Re-renders when tooltip toggles */}
    </div>
  );
}

// AFTER: state colocated with where it's used
function App() {
  return (
    <div>
      <Header />           {/* Never re-renders from tooltip */}
      <Sidebar />          {/* Never re-renders from tooltip */}
      <MainContent />      {/* Never re-renders from tooltip */}
      <HelpButton />       {/* Only this re-renders */}
      <Footer />           {/* Never re-renders from tooltip */}
    </div>
  );
}

function HelpButton() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Help</button>
      {isOpen && <Tooltip content="..." />}
    </div>
  );
}

Zero imports added. Zero APIs learned. Just moved the state to where it belongs. The performance impact can be dramatic: from re-rendering 50 components to re-rendering 2.

The Mental Model

The Colocation Principle

State placement follows a clear rule:

If only ComponentA uses the state → state lives in ComponentA
If ComponentA and ComponentB use the state → state lives in their nearest common ancestor
If the whole app uses the state → state lives at the app level (or in context/external store)

Every level you move state UP beyond where it's needed creates unnecessary re-renders in sibling and cousin components.

// State used by one component — colocate IN that component
function SearchBar() {
  const [query, setQuery] = useState('');  // Only SearchBar needs this
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

// State used by two siblings — colocate in their parent
function FilterSection() {
  const [filter, setFilter] = useState('all');  // Shared by FilterButtons and ResultCount
  return (
    <>
      <FilterButtons active={filter} onChange={setFilter} />
      <ResultCount filter={filter} />
    </>
  );
}

// State used by distant components — context or external store
// (This is the ONLY case where lifting state high is justified)

Pattern: Extract State Into a Wrapper

When state is coupled with a small part of the UI, extract that part:

// BEFORE: count state re-renders the expensive list
function Page() {
  const [count, setCount] = useState(0);
  const [items] = useState(() => generateExpensiveItems(1000));

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <ExpensiveList items={items} />  {/* Re-renders on every click */}
    </div>
  );
}

// AFTER: extract the counter into its own component
function Page() {
  const [items] = useState(() => generateExpensiveItems(1000));

  return (
    <div>
      <Counter />  {/* Manages its own state */}
      <ExpensiveList items={items} />  {/* Never re-renders from count changes */}
    </div>
  );
}

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

Pattern: Children as Props

When a parent needs state but its children don't use it:

// BEFORE: children re-render because of parent state
function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handler = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  }, []);

  return (
    <div>
      <ProgressBar progress={scrollY / maxScroll} />
      <Header />        {/* Re-renders on scroll — hundreds of times! */}
      <MainContent />   {/* Re-renders on scroll */}
      <Footer />        {/* Re-renders on scroll */}
    </div>
  );
}

// AFTER: children passed from outside don't re-render
function ScrollTracker({ children }) {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handler = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  }, []);

  return (
    <div>
      <ProgressBar progress={scrollY / maxScroll} />
      {children}  {/* Same React element reference — skipped in reconciliation */}
    </div>
  );
}

// Usage
function Page() {
  return (
    <ScrollTracker>
      <Header />        {/* Created by Page, not ScrollTracker */}
      <MainContent />   {/* Never re-renders from scroll */}
      <Footer />        {/* Never re-renders from scroll */}
    </ScrollTracker>
  );
}

When ScrollTracker re-renders, children is the same JSX reference (created by Page, which didn't re-render). React sees the same element reference and skips reconciliation for the children subtree.

Production Scenario: Dashboard State Audit

A team profiles their dashboard and finds 200ms render times on hover. State audit reveals:

App (level 0)
├── hoveredWidget: string    ← Used by: WidgetGrid, WidgetTooltip
├── searchQuery: string      ← Used by: SearchBar, SearchResults
├── dateRange: object        ← Used by: All 20 widgets
├── notifications: array     ← Used by: NotificationBell
├── sidebarOpen: boolean     ← Used by: Sidebar
└── selectedTab: string      ← Used by: TabBar, TabContent

All six pieces of state live in App. Any change re-renders everything. The fix:

function App() {
  const [dateRange, setDateRange] = useState(initialRange);

  return (
    <DateContext.Provider value={{ dateRange, setDateRange }}>
      <SidebarSection />       {/* Manages sidebarOpen internally */}
      <NotificationSection />  {/* Manages notifications internally */}
      <SearchSection />        {/* Manages searchQuery internally */}
      <TabSection>             {/* Manages selectedTab internally */}
        <WidgetSection />      {/* Manages hoveredWidget internally */}
      </TabSection>
    </DateContext.Provider>
  );
}

Only dateRange stays at App level (used by all widgets). Everything else moves down. Hover latency drops from 200ms to 3ms because hovering only re-renders WidgetSection, not the entire app.

When NOT to Colocate

State colocation doesn't mean "all state should be local." Sometimes state belongs higher:

// WRONG: colocating state that multiple siblings need
function FilterButtons() {
  const [filter, setFilter] = useState('all'); // ← Only FilterButtons can read this
  return <div>{/* buttons */}</div>;
}

function ResultList() {
  // Can't access filter! It's trapped in FilterButtons
  // Need to lift state to common parent
}

// CORRECT: lift to nearest common ancestor
function FilteredResults() {
  const [filter, setFilter] = useState('all');
  return (
    <>
      <FilterButtons filter={filter} onChange={setFilter} />
      <ResultList filter={filter} />
    </>
  );
}

The principle is "as low as possible, as high as necessary." If lifting state is required for the feature to work, lift it — but only to the nearest common ancestor, not to the root.

Common Mistakes

Challenge

Challenge: Audit and colocate the state

// This component tree has state placement issues.
// Identify which state should move where.

function App() {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  const [modalOpen, setModalOpen] = useState(false);
  const [formData, setFormData] = useState({});
  const [tooltipTarget, setTooltipTarget] = useState(null);

  return (
    <div className={theme}>
      <Navbar user={user} />
      <Settings
        theme=`{theme}`
        onThemeChange=`{setTheme}`
      />
      <MainContent>
        <Form data={formData} onChange={setFormData} />
        <SubmitButton onClick={() => setModalOpen(true)} />
      </MainContent>
      <Tooltip target={tooltipTarget} />
      `{modalOpen && <Modal onClose={() => setModalOpen(false)}` />}
    </div>
  );
}

// Questions:
// 1. Which state values should stay in App?
// 2. Which should move down? To where?

function SubmitSection() {
  const [modalOpen, setModalOpen] = useState(false);
  return (
    <>
      <SubmitButton onClick={() => setModalOpen(true)} />
      {modalOpen && <Modal onClose={() => setModalOpen(false)} />}
    </>
  );
}

function FormSection() {
  const [formData, setFormData] = useState({});
  return <Form data={formData} onChange={setFormData} />;
}

function TooltipManager({ children }) {
  const [target, setTarget] = useState(null);
  return (
    <TooltipContext.Provider value={setTarget}>
      {children}
      <Tooltip target={target} />
    </TooltipContext.Provider>
  );
}

Quiz

Key Rules