App
├── FilterBar (owns searchQuery — but ProductGrid also needs it)
└── ProductGrid (needs searchQuery — currently can't access it)

// ✅ searchQuery lifted to App — the lowest common ancestor of FilterBar and ProductGrid
function App() {
  const [searchQuery, setSearchQuery] = useState('')

  return (
    <>
      <FilterBar query={searchQuery} onQueryChange={setSearchQuery} />
      <ProductGrid query={searchQuery} />
    </>
  )
}

// Define the shape of what's injected
type ThemeContextValue = {
  theme: 'light' | 'dark'
  setTheme: (t: 'light' | 'dark') => void
}

const ThemeContext = createContext<ThemeContextValue | null>(null)

// The provider owns the state — Context is just the injection mechanism
export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark')
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}

// A typed hook that throws if used outside the provider — fail fast
export function useTheme(): ThemeContextValue {
  const ctx = useContext(ThemeContext)
  if (!ctx) throw new Error('useTheme must be used within ThemeProvider')
  return ctx
}

type State = { count: number; theme: 'light' | 'dark' }
type Action = { type: 'INCREMENT' } | { type: 'SET_THEME'; payload: 'light' | 'dark' }

const StateContext = createContext<State | null>(null)
const DispatchContext = createContext<React.Dispatch<Action> | null>(null)

export function AppProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(reducer, { count: 0, theme: 'dark' })

  return (
    <DispatchContext.Provider value={dispatch}>
      <StateContext.Provider value={state}>
        {children}
      </StateContext.Provider>
    </DispatchContext.Provider>
  )
}

// This button NEVER re-renders when count changes — it only dispatches
function IncrementButton() {
  const dispatch = useContext(DispatchContext)!
  return <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
}

// This display re-renders only when count changes
function CountDisplay() {
  const { count } = useContext(StateContext)!
  return <span>{count}</span>
}

import { createSlice, createSelector, PayloadAction } from '@reduxjs/toolkit'

type CartItem = { id: string; name: string; quantity: number; price: number }
type CartState = { items: CartItem[] }

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [] } as CartState,
  reducers: {
    addItem(state, action: PayloadAction<CartItem>) {
      // RTK uses Immer internally — mutable syntax produces immutable updates
      state.items.push(action.payload)
    },
    removeItem(state, action: PayloadAction<string>) {
      state.items = state.items.filter((i) => i.id !== action.payload)
    },
    updateQuantity(state, action: PayloadAction<{ id: string; quantity: number }>) {
      const item = state.items.find((i) => i.id === action.payload.id)
      if (item) item.quantity = action.payload.quantity
    },
  },
})

// Memoized selector — derived state computed once per state change, not per component render
export const selectCartTotal = createSelector(
  (state: RootState) => state.cart.items,
  (items) => items.reduce((total, i) => total + i.price * i.quantity, 0)
)

export const { addItem, removeItem, updateQuantity } = cartSlice.actions
export default cartSlice.reducer

import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'

// Primitive atoms — independent state units
const countAtom = atom(0)
const themeAtom = atom<'light' | 'dark'>('dark')

// Derived atom — computed from other atoms (like createSelector, but reactive)
const doubleCountAtom = atom((get) => get(countAtom) * 2)

// Async atom — fetches data, suspends while loading
const userAtom = atom(async (get) => {
  const res = await fetch(`/api/users/${get(userIdAtom)}`)
  return res.json() as Promise<User>
})

function Counter() {
  const [count, setCount] = useAtom(countAtom)
  // Only re-renders when countAtom changes — themeAtom changes are invisible here
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>
}

function ThemeToggle() {
  const setTheme = useSetAtom(themeAtom)
  // Never re-renders — it only writes, never reads
  return <button onClick={() => setTheme((t) => t === 'dark' ? 'light' : 'dark')}>Toggle</button>
}

import { create } from 'zustand'

type BearStore = {
  bears: number
  fish: number
  addBear: () => void
  eatFish: () => void
}

const useStore = create<BearStore>((set) => ({
  bears: 0,
  fish: 100,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
  eatFish: () => set((state) => ({ fish: state.fish - 1 })),
}))

// This component only re-renders when `bears` changes — `fish` changes are ignored
function BearCounter() {
  const bears = useStore((state) => state.bears)
  return <div>Bears: {bears}</div>
}

// This component only re-renders when `fish` changes
function FishCounter() {
  const fish = useStore((state) => state.fish)
  return <div>Fish: {fish}</div>
}