State Colocation & Lifting State

// ❌ State too high — search input state in App

function App() {
  const [searchQuery, setSearchQuery] = useState("");
  const [user, setUser] = useState(null);

  // Every keystroke in the search box re-renders EVERYTHING:
  // Header, Sidebar, MainContent, Footer, all their children...
  return (
    <div>
      <Header user={user} />
      <Sidebar />
      <MainContent>
        <SearchBar
          query={searchQuery}
          onChange={setSearchQuery}
        />
        <SearchResults query={searchQuery} />
      </MainContent>
      <Footer />
    </div>
  );
}

// Typing "react" = 5 keystrokes = 5 full tree re-renders
// Header, Sidebar, Footer re-render 5 times for nothing.

// ❌ State duplicated — two components track the same thing

function ProductPage() {
  return (
    <div>
      <ProductFilters />   {/* has its own selectedCategory state */}
      <ProductList />      {/* ALSO has its own selectedCategory state */}
    </div>
  );
}

function ProductFilters() {
  const [selectedCategory, setSelectedCategory] = useState("all");
  // User selects "Electronics"...
  return <select onChange={e => setSelectedCategory(e.target.value)}>...</select>;
}

function ProductList() {
  const [selectedCategory, setSelectedCategory] = useState("all");
  // ...but this still shows "all" — out of sync!
  return <ul>{products.filter(p => p.category === selectedCategory)...}</ul>;
}

// Two sources of truth for the same data = guaranteed bugs.

// ❌ BEFORE: Search state lives in the parent

function Dashboard() {
  const [searchQuery, setSearchQuery] = useState("");
  const [dashboardData, setDashboardData] = useState(null);

  // Every keystroke re-renders Dashboard + ALL children
  return (
    <div>
      <StatsPanel data={dashboardData} />     {/* re-renders! */}
      <RecentActivity />                       {/* re-renders! */}
      <SearchBar
        query={searchQuery}
        onChange={setSearchQuery}
      />
      <SearchResults query={searchQuery} />
      <NotificationBell />                     {/* re-renders! */}
    </div>
  );
}

// 5 keystrokes × 5 components = 25 component renders
// Only SearchBar and SearchResults actually need the query.

// ✅ AFTER: Search state colocated in its own component

function Dashboard() {
  const [dashboardData, setDashboardData] = useState(null);

  // Dashboard only re-renders when dashboardData changes
  return (
    <div>
      <StatsPanel data={dashboardData} />
      <RecentActivity />
      <SearchSection />          {/* self-contained */}
      <NotificationBell />
    </div>
  );
}

function SearchSection() {
  // State lives here — only SearchSection re-renders on keystrokes
  const [searchQuery, setSearchQuery] = useState("");

  return (
    <div>
      <SearchBar
        query={searchQuery}
        onChange={setSearchQuery}
      />
      <SearchResults query={searchQuery} />
    </div>
  );
}

// 5 keystrokes × 2 components = 10 component renders
// StatsPanel, RecentActivity, NotificationBell: 0 re-renders
// 60% fewer renders — no memo, no useCallback, just moved state.

// ❌ BEFORE: Each input has its own state — they can't sync

function TemperatureConverter() {
  return (
    <div>
      <CelsiusInput />
      <FahrenheitInput />
    </div>
  );
}

function CelsiusInput() {
  const [celsius, setCelsius] = useState("");
  return <input value={celsius} onChange={e => setCelsius(e.target.value)} />;
}

function FahrenheitInput() {
  const [fahrenheit, setFahrenheit] = useState("");
  return <input value={fahrenheit} onChange={e => setFahrenheit(e.target.value)} />;
}

// Problem: typing in Celsius doesn't update Fahrenheit.
// They're independent — no shared state.

// ✅ AFTER: State lifted to parent — both inputs stay in sync

function TemperatureConverter() {
  // Single source of truth: temperature in Celsius
  const [celsius, setCelsius] = useState("");

  const fahrenheit = celsius ? ((parseFloat(celsius) * 9/5) + 32).toFixed(1) : "";

  const handleCelsiusChange = (value) => setCelsius(value);
  const handleFahrenheitChange = (value) => {
    setCelsius(value ? ((parseFloat(value) - 32) * 5/9).toFixed(1) : "");
  };

  return (
    <div>
      <TemperatureInput
        label="Celsius"
        value={celsius}
        onChange={handleCelsiusChange}
      />
      <TemperatureInput
        label="Fahrenheit"
        value={fahrenheit}
        onChange={handleFahrenheitChange}
      />
    </div>
  );
}

// Child is now "controlled" — it doesn't own state
function TemperatureInput({ label, value, onChange }) {
  return (
    <label>
      {label}:
      <input value={value} onChange={e => onChange(e.target.value)} />
    </label>
  );
}

// Type in either input → both update.
// Single source of truth → no sync bugs.

// State lifted to parent because TabBar and TabContent
// both need to know which tab is active

function TabPanel() {
  const [activeTab, setActiveTab] = useState("overview");

  return (
    <div>
      {/* TabBar writes the state (user clicks a tab) */}
      <TabBar active={activeTab} onSelect={setActiveTab} />

      {/* TabContent reads the state (shows the right panel) */}
      <TabContent active={activeTab} />
    </div>
  );
}

function TabBar({ active, onSelect }) {
  return (
    <nav>
      {["overview", "details", "reviews"].map(tab => (
        <button
          key={tab}
          className={active === tab ? "active" : ""}
          onClick={() => onSelect(tab)}
        >
          {tab}
        </button>
      ))}
    </nav>
  );
}

function TabContent({ active }) {
  switch (active) {
    case "overview": return <Overview />;
    case "details":  return <Details />;
    case "reviews":  return <Reviews />;
  }
}

// activeTab lives in TabPanel (closest common ancestor).
// TabBar writes it, TabContent reads it. Clean and minimal.

// ❌ Everything lifted to App — the "god component" anti-pattern

function App() {
  // App manages state for EVERY feature
  const [user, setUser] = useState(null);
  const [searchQuery, setSearchQuery] = useState("");
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedTab, setSelectedTab] = useState("home");
  const [tooltipVisible, setTooltipVisible] = useState(false);
  const [formData, setFormData] = useState({});
  const [dropdownOpen, setDropdownOpen] = useState(false);
  // ... 20 more useState calls

  // EVERY state change re-renders App and ALL children.
  // Typing in search re-renders the tooltip.
  // Opening a dropdown re-renders the form.
  // Nothing is isolated.

  return (
    <div>
      <Header
        user={user}
        searchQuery={searchQuery}
        onSearchChange={setSearchQuery}
        dropdownOpen={dropdownOpen}
        onDropdownToggle={setDropdownOpen}
      />
      <Sidebar selectedTab={selectedTab} onTabSelect={setSelectedTab} />
      <Main
        formData={formData}
        onFormChange={setFormData}
        isModalOpen={isModalOpen}
        onModalToggle={setIsModalOpen}
        tooltipVisible={tooltipVisible}
        onTooltipToggle={setTooltipVisible}
      />
    </div>
  );
}
// This is prop drilling hell + performance disaster.

// ✅ State distributed to where it belongs

function App() {
  // App only manages truly global state
  const [user, setUser] = useState(null);

  return (
    <div>
      <Header user={user} />       {/* Header owns its own dropdown/search state */}
      <Sidebar />                   {/* Sidebar owns selectedTab */}
      <Main />                      {/* Main owns modal, form, tooltip state */}
    </div>
  );
}

function Header({ user }) {
  const [searchQuery, setSearchQuery] = useState("");   // colocated
  const [dropdownOpen, setDropdownOpen] = useState(false); // colocated
  return (/* ... */);
}

function Sidebar() {
  const [selectedTab, setSelectedTab] = useState("home"); // colocated
  return (/* ... */);
}

function Main() {
  const [isModalOpen, setIsModalOpen] = useState(false);  // colocated
  return (/* ... */);
}

// Typing in search only re-renders Header.
// Opening modal only re-renders Main.
// Each feature is isolated. Zero prop drilling.

Who needs this state?
    │
    ├─ Only ONE component
    │   └─ ✅ Colocate: useState inside that component
    │
    ├─ TWO+ siblings (or parent + child)
    │   └─ ⬆️ Lift: useState in their closest common ancestor
    │       │
    │       └─ Is it causing prop drilling (3+ levels)?
    │           ├─ NO  → Keep lifting, pass via props
    │           └─ YES → Consider Context or composition
    │
    ├─ MANY distant components across the tree
    │   └─ 🌐 Context: React.createContext + Provider
    │       │
    │       └─ Does it change very frequently? (typing, scrolling)
    │           ├─ NO  → Context is fine (auth, theme, locale)
    │           └─ YES → State manager (Zustand, Jotai) or
    │                    split into multiple contexts
    │
    └─ Server data (API responses)
        └─ 📡 Server state library: React Query, SWR
            (not component state at all)

function ProductPage() {
  // ALL state in one place
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("all");
  const [sortBy, setSortBy] = useState("price");
  const [cartItems, setCartItems] = useState([]);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const [hoveredProduct, setHoveredProduct] = useState(null);
  const [quickViewProduct, setQuickViewProduct] = useState(null);

  const filtered = products
    .filter(p => p.name.includes(searchQuery))
    .filter(p => selectedCategory === "all" || p.category === selectedCategory)
    .sort((a, b) => a[sortBy] - b[sortBy]);

  return (
    <div>
      <SearchBar query={searchQuery} onChange={setSearchQuery} />
      <CategoryFilter
        selected={selectedCategory}
        onChange={setSelectedCategory}
      />
      <SortDropdown value={sortBy} onChange={setSortBy} />
      <ProductGrid
        products={filtered}
        hoveredProduct={hoveredProduct}
        onHover={setHoveredProduct}
        onQuickView={setQuickViewProduct}
        onAddToCart={(p) => setCartItems([...cartItems, p])}
      />
      <CartSidebar
        items={cartItems}
        isOpen={isCartOpen}
        onToggle={() => setIsCartOpen(!isCartOpen)}
        onRemove={(id) => setCartItems(cartItems.filter(i => i.id !== id))}
      />
      {quickViewProduct && (
        <QuickViewModal
          product={quickViewProduct}
          onClose={() => setQuickViewProduct(null)}
        />
      )}
    </div>
  );
}

// Problems:
// 1. Hovering a product re-renders the cart, search, filters
// 2. Typing in search re-renders the cart and hover state
// 3. Opening cart re-renders the entire product grid
// 4. 7 useState calls = 7 reasons for the whole tree to re-render

function ProductPage() {
  // Only state that MULTIPLE children need lives here
  const [selectedCategory, setSelectedCategory] = useState("all");
  const [cartItems, setCartItems] = useState([]);

  const addToCart = useCallback((product) => {
    setCartItems(prev => [...prev, product]);
  }, []);

  const removeFromCart = useCallback((id) => {
    setCartItems(prev => prev.filter(i => i.id !== id));
  }, []);

  return (
    <div>
      {/* SearchSection owns its own query state */}
      <SearchSection
        category={selectedCategory}
        onAddToCart={addToCart}
      />

      <CategoryFilter
        selected={selectedCategory}
        onChange={setSelectedCategory}
      />

      {/* CartSection owns isOpen state */}
      <CartSection items={cartItems} onRemove={removeFromCart} />
    </div>
  );
}

// Search state: colocated — only SearchSection needs it
function SearchSection({ category, onAddToCart }) {
  const [searchQuery, setSearchQuery] = useState("");  // colocated!
  const [sortBy, setSortBy] = useState("price");       // colocated!

  const filtered = useMemo(() =>
    products
      .filter(p => p.name.includes(searchQuery))
      .filter(p => category === "all" || p.category === category)
      .sort((a, b) => a[sortBy] - b[sortBy]),
    [searchQuery, category, sortBy]
  );

  return (
    <div>
      <SearchBar query={searchQuery} onChange={setSearchQuery} />
      <SortDropdown value={sortBy} onChange={setSortBy} />
      <ProductGrid products={filtered} onAddToCart={onAddToCart} />
    </div>
  );
}

// Hover + quickView: colocated inside ProductGrid
function ProductGrid({ products, onAddToCart }) {
  const [hoveredId, setHoveredId] = useState(null);       // colocated!
  const [quickViewId, setQuickViewId] = useState(null);    // colocated!

  return (
    <div className="grid">
      {products.map(p => (
        <ProductCard
          key={p.id}
          product={p}
          isHovered={hoveredId === p.id}
          onHover={setHoveredId}
          onQuickView={setQuickViewId}
          onAddToCart={onAddToCart}
        />
      ))}
      {quickViewId && (
        <QuickViewModal
          product={products.find(p => p.id === quickViewId)}
          onClose={() => setQuickViewId(null)}
        />
      )}
    </div>
  );
}

// Cart open/close: colocated — only CartSection needs it
function CartSection({ items, onRemove }) {
  const [isOpen, setIsOpen] = useState(false);  // colocated!

  return (
    <>
      <button onClick={() => setIsOpen(!isOpen)}>
        Cart ({items.length})
      </button>
      {isOpen && <CartSidebar items={items} onRemove={onRemove} />}
    </>
  );
}

// Problem: ExpensiveTree re-renders when count changes
// Solution 1: React.memo (works but adds complexity)
// Solution 2: Composition (simpler, zero runtime cost)

// ❌ Before: ExpensiveTree is a child of the stateful component
function Page() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <ExpensiveTree />  {/* re-renders every click! */}
    </div>
  );
}

// ✅ After: Extract stateful part, pass ExpensiveTree as children
function Page() {
  return (
    <Counter>
      <ExpensiveTree />  {/* created here, never re-renders! */}
    </Counter>
  );
}

function Counter({ children }) {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      {children}  {/* children is a prop — same reference, no re-render */}
    </div>
  );
}

// Why this works:
// <ExpensiveTree /> is created in Page (the grandparent).
// When Counter re-renders, children is the same JSX reference.
// React sees the same element → skips re-rendering ExpensiveTree.
// No memo, no useMemo, no useCallback. Just composition.