diff --git a/apps/registry/app/report/report-bug-form.tsx b/apps/registry/app/report/report-bug-form.tsx
index cefa2d02..50c42237 100644
--- a/apps/registry/app/report/report-bug-form.tsx
+++ b/apps/registry/app/report/report-bug-form.tsx
@@ -121,12 +121,16 @@ function TextField({
   );
 }
 
+function useInitialState<T>(initialValue: T) {
+  return useState(initialValue);
+}
+
 export function ReportBugForm({
   initialComponent = "",
 }: {
   initialComponent?: string;
 }) {
-  const [component, setComponent] = useState(initialComponent);
+  const [component, setComponent] = useInitialState(initialComponent);
   const [summary, setSummary] = useState("");
   const [repro, setRepro] = useState("");
   const [expected, setExpected] = useState("");
diff --git a/apps/registry/components/storybook-embed/storybook-embed.tsx b/apps/registry/components/storybook-embed/storybook-embed.tsx
index 31e02861..ab800090 100644
--- a/apps/registry/components/storybook-embed/storybook-embed.tsx
+++ b/apps/registry/components/storybook-embed/storybook-embed.tsx
@@ -109,10 +109,6 @@ function StorybookIframe({
 }): React.ReactElement {
   const [isLoaded, setIsLoaded] = React.useState(false);
 
-  React.useEffect(() => {
-    setIsLoaded(false);
-  }, [iframeSource]);
-
   return (
     <div style={{ minHeight: height, position: "relative" }}>
       {isLoaded ? null : (
@@ -201,6 +197,7 @@ export function StorybookEmbed({
       />
       {iframeSource ? (
         <StorybookIframe
+          key={iframeSource}
           componentName={componentName}
           height={height}
           iframeSource={iframeSource}
diff --git a/apps/registry/registry/default/ai-sidebar/ai-sidebar.tsx b/apps/registry/registry/default/ai-sidebar/ai-sidebar.tsx
index 5a6218c8..f07724d0 100644
--- a/apps/registry/registry/default/ai-sidebar/ai-sidebar.tsx
+++ b/apps/registry/registry/default/ai-sidebar/ai-sidebar.tsx
@@ -9,11 +9,11 @@ import {
   useContext,
   useEffect,
   useMemo,
-  useState,
 } from "react";
 
 import { Bot, MessageSquarePlus, X } from "lucide-react";
 
+import { useControllableState } from "@vllnt/ui";
 import { cn } from "@vllnt/ui";
 import { Button } from "@vllnt/ui";
 
@@ -131,16 +131,17 @@ export function AISidebarProvider({
     () => ({ ...DEFAULT_LABELS, ...labels }),
     [labels],
   );
-  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
-  const isControlled = controlledOpen !== undefined;
-  const openState = isControlled ? controlledOpen : uncontrolled;
+  const [openState, setOpenState] = useControllableState({
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+    value: controlledOpen,
+  });
 
   const setOpen = useCallback(
     (next: boolean) => {
-      if (!isControlled) setUncontrolled(next);
-      onOpenChange?.(next);
+      setOpenState(next);
     },
-    [isControlled, onOpenChange],
+    [setOpenState],
   );
 
   const open = useCallback(() => {
diff --git a/apps/registry/registry/default/animated-text/animated-text.tsx b/apps/registry/registry/default/animated-text/animated-text.tsx
index 10a4938e..1a92af01 100644
--- a/apps/registry/registry/default/animated-text/animated-text.tsx
+++ b/apps/registry/registry/default/animated-text/animated-text.tsx
@@ -166,7 +166,6 @@ function useRevealProgress(active: boolean, length: number, stagger: number) {
 
   React.useEffect(() => {
     if (!active) {
-      setProgress(length);
       return;
     }
 
@@ -191,7 +190,7 @@ function useRevealProgress(active: boolean, length: number, stagger: number) {
     };
   }, [active, length, stagger]);
 
-  return progress;
+  return active ? progress : length;
 }
 
 function useMatrixFrame({
diff --git a/apps/registry/registry/default/faq/faq.tsx b/apps/registry/registry/default/faq/faq.tsx
index 4d4ecd19..aff20edc 100644
--- a/apps/registry/registry/default/faq/faq.tsx
+++ b/apps/registry/registry/default/faq/faq.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import { useState } from "react";
-
 import { ChevronDown, HelpCircle } from "lucide-react";
 import type { ReactNode } from "react";
 
+import { useUncontrolledState } from "@vllnt/ui";
 import { cn } from "@vllnt/ui";
 
 export type FAQItemProps = {
@@ -14,7 +13,7 @@ export type FAQItemProps = {
 };
 
 function FAQItem({ children, defaultOpen = false, question }: FAQItemProps) {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [isOpen, setIsOpen] = useUncontrolledState(defaultOpen);
 
   return (
     <div className="border-b border-border last:border-b-0">
diff --git a/apps/registry/registry/default/flashcard/flashcard.tsx b/apps/registry/registry/default/flashcard/flashcard.tsx
index c9667126..156f5a7b 100644
--- a/apps/registry/registry/default/flashcard/flashcard.tsx
+++ b/apps/registry/registry/default/flashcard/flashcard.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import { useState } from "react";
-
 import { RefreshCcw } from "lucide-react";
 import type { ReactNode } from "react";
 
+import { useUncontrolledState } from "@vllnt/ui";
 import { cn } from "@vllnt/ui";
 import { Badge } from "@vllnt/ui";
 import { Button } from "@vllnt/ui";
@@ -31,7 +30,7 @@ export function Flashcard({
   question,
   title = "Flashcard",
 }: FlashcardProps): ReactNode {
-  const [flipped, setFlipped] = useState(defaultFlipped);
+  const [flipped, setFlipped] = useUncontrolledState(defaultFlipped);
 
   const toggleFlipped = (): void => {
     const nextValue = !flipped;
diff --git a/apps/registry/registry/default/keyboard-shortcuts-help/keyboard-shortcuts-help.tsx b/apps/registry/registry/default/keyboard-shortcuts-help/keyboard-shortcuts-help.tsx
index 4f74ea1d..e71f960e 100644
--- a/apps/registry/registry/default/keyboard-shortcuts-help/keyboard-shortcuts-help.tsx
+++ b/apps/registry/registry/default/keyboard-shortcuts-help/keyboard-shortcuts-help.tsx
@@ -4,6 +4,10 @@ import { memo, useEffect, useRef } from "react";
 
 import type { ReactNode } from "react";
 
+import {
+  useEventCallback,
+  useWindowEventListener,
+} from "@vllnt/ui";
 import { cn } from "@vllnt/ui";
 
 export type KeyboardShortcut = {
@@ -32,25 +36,21 @@ function KeyboardShortcutsHelpImpl({
   title = "Keyboard Shortcuts",
 }: KeyboardShortcutsHelpProps): React.ReactNode {
   const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const handleEscapeKey = useEventCallback((event: KeyboardEvent): void => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onClose();
+    }
+  });
 
   // Focus trap and close on Escape
   useEffect(() => {
     if (!isOpen) return;
 
     closeButtonRef.current?.focus();
+  }, [isOpen]);
 
-    const handleKeyDown = (event: KeyboardEvent): void => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onClose();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen, onClose]);
+  useWindowEventListener("keydown", handleEscapeKey, { enabled: isOpen });
 
   // Prevent body scroll when open
   useEffect(() => {
diff --git a/apps/registry/registry/default/map-timeline/map-timeline.tsx b/apps/registry/registry/default/map-timeline/map-timeline.tsx
index d42f8e3d..844f8d83 100644
--- a/apps/registry/registry/default/map-timeline/map-timeline.tsx
+++ b/apps/registry/registry/default/map-timeline/map-timeline.tsx
@@ -552,7 +552,6 @@ function usePlayback(arguments_: {
         const next = yearRef.current + delta * speed;
         if (next >= endYear) {
           setYear(endYear);
-          setIsPlaying(false);
           return;
         }
         setYear(next);
diff --git a/apps/registry/registry/default/progress-card/progress-card.tsx b/apps/registry/registry/default/progress-card/progress-card.tsx
index e8d95999..b8d92bd9 100644
--- a/apps/registry/registry/default/progress-card/progress-card.tsx
+++ b/apps/registry/registry/default/progress-card/progress-card.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useEffect, useState } from "react";
+import { memo, useMemo } from "react";
 
 import type { ReactNode } from "react";
 
@@ -76,18 +76,11 @@ function ContentCardImpl({
   tags = EMPTY_PROGRESS_CARD_LIST,
   title,
 }: ContentCardProps): React.ReactNode {
-  const [progress, setProgress] = useState<ContentCardProgress | null>(null);
   const isHydrated = useMounted();
-
-  // Load progress after hydration
-  useEffect(() => {
-    if (getProgress) {
-      const result = getProgress();
-      requestAnimationFrame(() => {
-        setProgress(result);
-      });
-    }
-  }, [getProgress]);
+  const progress = useMemo(
+    () => (isHydrated && getProgress ? getProgress() : null),
+    [getProgress, isHydrated],
+  );
 
   const showProgress = isHydrated && progress && progress.completedCount > 0;
 
diff --git a/apps/registry/registry/default/rating/rating.tsx b/apps/registry/registry/default/rating/rating.tsx
index 856b7ccf..7889313c 100644
--- a/apps/registry/registry/default/rating/rating.tsx
+++ b/apps/registry/registry/default/rating/rating.tsx
@@ -5,6 +5,7 @@ import { useMemo, useState } from "react";
 import { Star } from "lucide-react";
 import type { ReactNode } from "react";
 
+import { useControllableState } from "@vllnt/ui";
 import { cn } from "@vllnt/ui";
 
 const sizeClasses = {
@@ -113,20 +114,18 @@ export function Rating({
   size = "md",
   value,
 }: RatingProps): ReactNode {
-  const isControlled = value !== undefined;
-  const [internalValue, setInternalValue] = useState(defaultValue);
   const [hoveredValue, setHoveredValue] = useState(0);
-  const activeValue = isControlled ? (value ?? 0) : internalValue;
+  const [activeValue, setActiveValue] = useControllableState({
+    defaultValue,
+    onChange: onValueChange,
+    value,
+  });
 
   const handleSelect = (nextValue: number): void => {
     const resolvedValue =
       allowClear && activeValue === nextValue ? 0 : nextValue;
 
-    if (!isControlled) {
-      setInternalValue(resolvedValue);
-    }
-
-    onValueChange?.(resolvedValue);
+    setActiveValue(resolvedValue);
   };
 
   return (
diff --git a/apps/registry/registry/default/search-bar/search-bar.tsx b/apps/registry/registry/default/search-bar/search-bar.tsx
index bfa5b895..2ed33a0d 100644
--- a/apps/registry/registry/default/search-bar/search-bar.tsx
+++ b/apps/registry/registry/default/search-bar/search-bar.tsx
@@ -5,6 +5,7 @@ import { Suspense, useEffect, useRef, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 
 import { useDebounce } from "@vllnt/ui";
+import { useEventCallback } from "@vllnt/ui";
 import { Button } from "@vllnt/ui";
 import { Input } from "@vllnt/ui";
 
@@ -58,6 +59,9 @@ function SearchBarInner({
   const debouncedQuery = useDebounce(query, 300);
   const isInitialMount = useRef(true);
   const isUserTyping = useRef(false);
+  const runSearch = useEventCallback((searchQuery: string): void => {
+    onSearch?.(searchQuery);
+  });
 
   const typingTimeoutReference = useRef<NodeJS.Timeout | undefined>(undefined);
   const lastSetSearchParameterReference = useRef<string>("");
@@ -103,7 +107,7 @@ function SearchBarInner({
     lastDebouncedQueryReference.current = trimmedQuery;
 
     if (onSearch) {
-      onSearch(trimmedQuery);
+      runSearch(trimmedQuery);
       return;
     }
 
@@ -130,7 +134,7 @@ function SearchBarInner({
     // hard redirects, not Next router.replace — but ESLint doesn't
     // know that rule, so we don't add an eslint-disable for it.
     router.replace(`?${newUrl}`);
-  }, [debouncedQuery, router, onSearch, searchParameters]);
+  }, [debouncedQuery, onSearch, router, runSearch, searchParameters]);
 
   // Cleanup timeout on unmount
   useEffect(() => {
diff --git a/apps/registry/registry/default/sidebar/sidebar.tsx b/apps/registry/registry/default/sidebar/sidebar.tsx
index 915e1f65..0ccebb8d 100644
--- a/apps/registry/registry/default/sidebar/sidebar.tsx
+++ b/apps/registry/registry/default/sidebar/sidebar.tsx
@@ -1,11 +1,18 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
 
 import { ChevronDown } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
+import { useUncontrolledState } from "@vllnt/ui";
 import { cn } from "@vllnt/ui";
 import { useSidebar } from "@vllnt/ui";
 
@@ -25,26 +32,51 @@ type SidebarProps = {
   sections: SidebarSection[];
 };
 
-function useMobile(setOpen: (open: boolean) => void) {
-  const [isMobile, setIsMobile] = useState(false);
+function noop(): void {
+  return undefined;
+}
 
-  useEffect(() => {
-    const checkMobile = () => {
-      const mobile = window.innerWidth < 1024;
-      setIsMobile(mobile);
-      if (mobile) {
-        setOpen(false);
-      } else {
-        setOpen(true);
-      }
-    };
+function getMobileSnapshot(): boolean {
+  return typeof window === "undefined" ? false : window.innerWidth < 1024;
+}
 
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
-    return () => {
-      window.removeEventListener("resize", checkMobile);
-    };
+function subscribeToResize(
+  onStoreChange: () => void,
+  onEnterMobile: () => void,
+): () => void {
+  if (typeof window === "undefined") return noop;
+
+  let previousIsMobile = getMobileSnapshot();
+  const handleResize = (): void => {
+    const nextIsMobile = getMobileSnapshot();
+    if (nextIsMobile && !previousIsMobile) {
+      onEnterMobile();
+    }
+    previousIsMobile = nextIsMobile;
+    onStoreChange();
+  };
+
+  window.addEventListener("resize", handleResize);
+  return () => {
+    window.removeEventListener("resize", handleResize);
+  };
+}
+
+function useMobile(setOpen: (open: boolean) => void) {
+  const handleEnterMobile = useCallback(() => {
+    setOpen(false);
   }, [setOpen]);
+  const subscribe = useCallback(
+    (onStoreChange: () => void) =>
+      subscribeToResize(onStoreChange, handleEnterMobile),
+    [handleEnterMobile],
+  );
+
+  const isMobile = useSyncExternalStore(
+    subscribe,
+    getMobileSnapshot,
+    () => false,
+  );
 
   return isMobile;
 }
@@ -88,7 +120,7 @@ function CollapsibleSection({
   defaultOpen = true,
   title,
 }: CollapsibleSectionProps) {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [isOpen, setIsOpen] = useUncontrolledState(defaultOpen);
 
   if (!collapsible) {
     return (
diff --git a/apps/registry/registry/default/slideshow/slideshow.tsx b/apps/registry/registry/default/slideshow/slideshow.tsx
index 7f5914ce..f3ccf26e 100644
--- a/apps/registry/registry/default/slideshow/slideshow.tsx
+++ b/apps/registry/registry/default/slideshow/slideshow.tsx
@@ -5,6 +5,10 @@ import { memo, useCallback, useEffect, useState } from "react";
 import type { ReactNode } from "react";
 import { createPortal } from "react-dom";
 
+import {
+  useDocumentEventListener,
+  useEventCallback,
+} from "@vllnt/ui";
 import { useMounted } from "@vllnt/ui";
 import { cn } from "@vllnt/ui";
 import { CompletionDialog } from "@vllnt/ui";
@@ -153,8 +157,8 @@ function SlideshowImpl({
     [currentIndex, goToSection],
   );
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent): void => {
+  const handleDocumentKeyDown = useEventCallback(
+    (event: KeyboardEvent): void => {
       if (isCompletionDialogOpen) return;
       if (event.key === "Escape") {
         event.preventDefault();
@@ -176,12 +180,10 @@ function SlideshowImpl({
         event.preventDefault();
         handlePrevious();
       }
-    };
-    document.addEventListener("keydown", handleKeyDown, true);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown, true);
-    };
-  }, [handleNext, handlePrevious, onExit, isTocOpen, isCompletionDialogOpen]);
+    },
+  );
+
+  useDocumentEventListener("keydown", handleDocumentKeyDown, true);
 
   if (!currentSection || !mounted) return null;
 
diff --git a/apps/registry/registry/default/table-of-contents-panel/table-of-contents-panel.tsx b/apps/registry/registry/default/table-of-contents-panel/table-of-contents-panel.tsx
index 2725ea8d..6b677e4b 100644
--- a/apps/registry/registry/default/table-of-contents-panel/table-of-contents-panel.tsx
+++ b/apps/registry/registry/default/table-of-contents-panel/table-of-contents-panel.tsx
@@ -4,6 +4,10 @@ import { memo, useEffect, useRef } from "react";
 
 import type { ReactNode } from "react";
 
+import {
+  useEventCallback,
+  useWindowEventListener,
+} from "@vllnt/ui";
 import { cn } from "@vllnt/ui";
 
 export type TOCSection = {
@@ -47,25 +51,21 @@ function TableOfContentsPanelImpl({
 }: TableOfContentsPanelProps): React.ReactNode {
   const panelRef = useRef<HTMLDivElement>(null);
   const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const handleEscapeKey = useEventCallback((event: KeyboardEvent): void => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onClose();
+    }
+  });
 
   // Focus trap and close on Escape
   useEffect(() => {
     if (!isOpen) return;
 
     closeButtonRef.current?.focus();
+  }, [isOpen]);
 
-    const handleKeyDown = (event: KeyboardEvent): void => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onClose();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen, onClose]);
+  useWindowEventListener("keydown", handleEscapeKey, { enabled: isOpen });
 
   // Prevent body scroll when open
   useEffect(() => {
diff --git a/apps/registry/registry/default/tabs/tabs.tsx b/apps/registry/registry/default/tabs/tabs.tsx
index 428731a3..1b6606dc 100644
--- a/apps/registry/registry/default/tabs/tabs.tsx
+++ b/apps/registry/registry/default/tabs/tabs.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { createContext, useContext, useMemo, useState } from "react";
+import { createContext, useContext, useMemo } from "react";
 
 import type { ReactNode } from "react";
 
+import { useUncontrolledState } from "@vllnt/ui";
 import { cn } from "@vllnt/ui";
 
 // Context for tabs state
@@ -35,7 +36,7 @@ function Tabs({
   defaultValue,
   onValueChange,
 }: TabsProps): React.ReactNode {
-  const [activeTab, setActiveTab] = useState(defaultValue);
+  const [activeTab, setActiveTab] = useUncontrolledState(defaultValue);
 
   const handleSetActiveTab = (value: string): void => {
     setActiveTab(value);
diff --git a/apps/registry/registry/default/thinking-block/thinking-block.tsx b/apps/registry/registry/default/thinking-block/thinking-block.tsx
index e1c38149..26792e02 100644
--- a/apps/registry/registry/default/thinking-block/thinking-block.tsx
+++ b/apps/registry/registry/default/thinking-block/thinking-block.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useId, useState } from "react";
+import { useCallback, useId, useLayoutEffect, useReducer } from "react";
 
 import { ChevronDown, ChevronRight } from "lucide-react";
 
@@ -14,26 +14,43 @@ export type ThinkingBlockProps = {
   thinking: string;
 };
 
+type ThinkingBlockState = {
+  isExpanded: boolean;
+};
+
+type ThinkingBlockAction =
+  | { isStreaming: boolean; type: "streaming-changed" }
+  | { type: "toggle" };
+
+function thinkingBlockReducer(
+  state: ThinkingBlockState,
+  action: ThinkingBlockAction,
+): ThinkingBlockState {
+  switch (action.type) {
+    case "streaming-changed":
+      return action.isStreaming ? { isExpanded: true } : state;
+    case "toggle":
+      return { isExpanded: !state.isExpanded };
+  }
+}
+
 /** Collapsible thinking block with streaming support. */
 export function ThinkingBlock({
   className,
   isStreaming = false,
   thinking,
 }: ThinkingBlockProps) {
-  const [isExpanded, setIsExpanded] = useState(isStreaming);
+  const [{ isExpanded }, dispatch] = useReducer(thinkingBlockReducer, {
+    isExpanded: isStreaming,
+  });
   const contentId = useId();
 
-  // Auto-open when streaming starts
-  useEffect(() => {
-    if (isStreaming) {
-      requestAnimationFrame(() => {
-        setIsExpanded(true);
-      });
-    }
+  useLayoutEffect(() => {
+    dispatch({ isStreaming, type: "streaming-changed" });
   }, [isStreaming]);
 
   const toggleExpanded = useCallback(() => {
-    setIsExpanded((previous) => !previous);
+    dispatch({ type: "toggle" });
   }, []);
 
   return (
diff --git a/apps/registry/registry/default/tldr-section/tldr-section.tsx b/apps/registry/registry/default/tldr-section/tldr-section.tsx
index 5dfc0e37..8846bf79 100644
--- a/apps/registry/registry/default/tldr-section/tldr-section.tsx
+++ b/apps/registry/registry/default/tldr-section/tldr-section.tsx
@@ -1,16 +1,46 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useReducer, useRef } from "react";
 
 type TLDRSectionProps = {
   children: React.ReactNode;
   label: string;
 };
 
+type TLDRSectionState = {
+  hasBeenOpened: boolean;
+  isExpanded: boolean;
+  isLoading: boolean;
+};
+
+type TLDRSectionAction =
+  | { type: "finish-loading" }
+  | { type: "mark-opened" }
+  | { type: "toggle" };
+
+function tldrSectionReducer(
+  state: TLDRSectionState,
+  action: TLDRSectionAction,
+): TLDRSectionState {
+  switch (action.type) {
+    case "finish-loading":
+      return { ...state, isLoading: false };
+    case "mark-opened":
+      return { ...state, hasBeenOpened: true, isLoading: true };
+    case "toggle":
+      return { ...state, isExpanded: !state.isExpanded };
+  }
+}
+
 export function TLDRSection({ children, label }: TLDRSectionProps) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [hasBeenOpened, setHasBeenOpened] = useState(false);
+  const [{ hasBeenOpened, isExpanded, isLoading }, dispatch] = useReducer(
+    tldrSectionReducer,
+    {
+      hasBeenOpened: false,
+      isExpanded: false,
+      isLoading: false,
+    },
+  );
   const timerReference = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
@@ -21,13 +51,12 @@ export function TLDRSection({ children, label }: TLDRSectionProps) {
       }
 
       const rafId = requestAnimationFrame(() => {
-        setIsLoading(true);
-        setHasBeenOpened(true);
+        dispatch({ type: "mark-opened" });
       });
 
       // Simulate loading with skeleton
       timerReference.current = setTimeout(() => {
-        setIsLoading(false);
+        dispatch({ type: "finish-loading" });
         timerReference.current = null;
       }, 800);
 
@@ -53,7 +82,7 @@ export function TLDRSection({ children, label }: TLDRSectionProps) {
       <button
         className="flex items-center justify-between w-full px-4 py-3 hover:bg-muted/50 transition-colors"
         onClick={() => {
-          setIsExpanded(!isExpanded);
+          dispatch({ type: "toggle" });
         }}
         type="button"
       >
diff --git a/apps/registry/registry/default/tour/tour.tsx b/apps/registry/registry/default/tour/tour.tsx
index 09191e80..3c725679 100644
--- a/apps/registry/registry/default/tour/tour.tsx
+++ b/apps/registry/registry/default/tour/tour.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import { useState } from "react";
-
 import type { ReactNode } from "react";
 
+import { useUncontrolledState } from "@vllnt/ui";
 import { cn } from "@vllnt/ui";
 import { Badge } from "@vllnt/ui";
 import { Button } from "@vllnt/ui";
@@ -135,7 +134,7 @@ export function Tour({
   onStepChange,
   steps,
 }: TourProps): ReactNode {
-  const [currentStep, setCurrentStep] = useState(defaultStep);
+  const [currentStep, setCurrentStep] = useUncontrolledState(defaultStep);
 
   if (steps.length === 0) {
     return null;
diff --git a/apps/registry/registry/default/tutorial-card/tutorial-card.tsx b/apps/registry/registry/default/tutorial-card/tutorial-card.tsx
index 03883723..bd34dad6 100644
--- a/apps/registry/registry/default/tutorial-card/tutorial-card.tsx
+++ b/apps/registry/registry/default/tutorial-card/tutorial-card.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useEffect, useState } from "react";
+import { memo, useMemo } from "react";
 
 import type { ReactNode } from "react";
 
@@ -81,17 +81,11 @@ function TutorialCardImpl({
   linkComponent: LinkComponent = DefaultLink,
   tutorial,
 }: TutorialCardProps): React.ReactNode {
-  const [progress, setProgress] = useState<null | TutorialCardProgress>(null);
   const isHydrated = useMounted();
-
-  useEffect(() => {
-    if (getProgress) {
-      const result = getProgress(tutorial.id);
-      requestAnimationFrame(() => {
-        setProgress(result);
-      });
-    }
-  }, [getProgress, tutorial.id]);
+  const progress = useMemo(
+    () => (isHydrated && getProgress ? getProgress(tutorial.id) : null),
+    [getProgress, isHydrated, tutorial.id],
+  );
 
   const difficultyVariant = DIFFICULTY_VARIANTS[tutorial.difficulty];
   // Cap completedCount at sectionCount to handle stale localStorage data
diff --git a/packages/ui/src/components/ai-sidebar/ai-sidebar.tsx b/packages/ui/src/components/ai-sidebar/ai-sidebar.tsx
index 6ea54ecf..3a4b0edf 100644
--- a/packages/ui/src/components/ai-sidebar/ai-sidebar.tsx
+++ b/packages/ui/src/components/ai-sidebar/ai-sidebar.tsx
@@ -9,11 +9,11 @@ import {
   useContext,
   useEffect,
   useMemo,
-  useState,
 } from "react";
 
 import { Bot, MessageSquarePlus, X } from "lucide-react";
 
+import { useControllableState } from "../../lib/use-uncontrolled-state";
 import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
 
@@ -131,16 +131,17 @@ export function AISidebarProvider({
     () => ({ ...DEFAULT_LABELS, ...labels }),
     [labels],
   );
-  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
-  const isControlled = controlledOpen !== undefined;
-  const openState = isControlled ? controlledOpen : uncontrolled;
+  const [openState, setOpenState] = useControllableState({
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+    value: controlledOpen,
+  });
 
   const setOpen = useCallback(
     (next: boolean) => {
-      if (!isControlled) setUncontrolled(next);
-      onOpenChange?.(next);
+      setOpenState(next);
     },
-    [isControlled, onOpenChange],
+    [setOpenState],
   );
 
   const open = useCallback(() => {
diff --git a/packages/ui/src/components/animated-text/animated-text.tsx b/packages/ui/src/components/animated-text/animated-text.tsx
index 07219627..0c898645 100644
--- a/packages/ui/src/components/animated-text/animated-text.tsx
+++ b/packages/ui/src/components/animated-text/animated-text.tsx
@@ -166,7 +166,6 @@ function useRevealProgress(active: boolean, length: number, stagger: number) {
 
   React.useEffect(() => {
     if (!active) {
-      setProgress(length);
       return;
     }
 
@@ -191,7 +190,7 @@ function useRevealProgress(active: boolean, length: number, stagger: number) {
     };
   }, [active, length, stagger]);
 
-  return progress;
+  return active ? progress : length;
 }
 
 function useMatrixFrame({
diff --git a/packages/ui/src/components/cookie-consent/cookie-consent.tsx b/packages/ui/src/components/cookie-consent/cookie-consent.tsx
index 55876beb..bb659d26 100644
--- a/packages/ui/src/components/cookie-consent/cookie-consent.tsx
+++ b/packages/ui/src/components/cookie-consent/cookie-consent.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useCallback, useEffect, useState } from "react";
+import { forwardRef, useCallback, useEffect, useReducer } from "react";
 
 import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
@@ -28,6 +28,33 @@ const cookieConsentVariants = cva(
   },
 );
 
+type CookieAnimationState = {
+  isAnimatingOut: boolean;
+  isVisible: boolean;
+};
+
+type CookieAnimationAction =
+  | { type: "finish-close" }
+  | { type: "hide" }
+  | { type: "show" }
+  | { type: "start-close" };
+
+function cookieAnimationReducer(
+  state: CookieAnimationState,
+  action: CookieAnimationAction,
+): CookieAnimationState {
+  switch (action.type) {
+    case "finish-close":
+      return { ...state, isAnimatingOut: false };
+    case "hide":
+      return { ...state, isVisible: false };
+    case "show":
+      return { isAnimatingOut: false, isVisible: true };
+    case "start-close":
+      return { ...state, isAnimatingOut: true };
+  }
+}
+
 export type CookieConsentProps = {
   /** Text for the accept button */
   acceptText?: string;
@@ -77,22 +104,27 @@ const CookieConsent = forwardRef<HTMLDivElement, CookieConsentProps>(
     },
     reference,
   ) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const [isAnimatingOut, setIsAnimatingOut] = useState(false);
+    const [{ isAnimatingOut, isVisible }, dispatch] = useReducer(
+      cookieAnimationReducer,
+      {
+        isAnimatingOut: false,
+        isVisible: false,
+      },
+    );
 
     // Handle visibility with animation
     useEffect(() => {
       if (open) {
         // Small delay for mount animation
         const timer = setTimeout(() => {
-          setIsVisible(true);
+          dispatch({ type: "show" });
         }, 50);
         return () => {
           clearTimeout(timer);
         };
       }
       const rafId = requestAnimationFrame(() => {
-        setIsVisible(false);
+        dispatch({ type: "hide" });
       });
       return () => {
         cancelAnimationFrame(rafId);
@@ -100,9 +132,9 @@ const CookieConsent = forwardRef<HTMLDivElement, CookieConsentProps>(
     }, [open]);
 
     const handleClose = useCallback(() => {
-      setIsAnimatingOut(true);
+      dispatch({ type: "start-close" });
       setTimeout(() => {
-        setIsAnimatingOut(false);
+        dispatch({ type: "finish-close" });
         onOpenChange?.(false);
       }, 200);
     }, [onOpenChange]);
diff --git a/packages/ui/src/components/faq/faq.tsx b/packages/ui/src/components/faq/faq.tsx
index 16af14ba..6a5e8389 100644
--- a/packages/ui/src/components/faq/faq.tsx
+++ b/packages/ui/src/components/faq/faq.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import { useState } from "react";
-
 import { ChevronDown, HelpCircle } from "lucide-react";
 import type { ReactNode } from "react";
 
+import { useUncontrolledState } from "../../lib/use-uncontrolled-state";
 import { cn } from "../../lib/utils";
 
 export type FAQItemProps = {
@@ -14,7 +13,7 @@ export type FAQItemProps = {
 };
 
 function FAQItem({ children, defaultOpen = false, question }: FAQItemProps) {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [isOpen, setIsOpen] = useUncontrolledState(defaultOpen);
 
   return (
     <div className="border-b border-border last:border-b-0">
diff --git a/packages/ui/src/components/flashcard/flashcard.tsx b/packages/ui/src/components/flashcard/flashcard.tsx
index 56d17367..8d452923 100644
--- a/packages/ui/src/components/flashcard/flashcard.tsx
+++ b/packages/ui/src/components/flashcard/flashcard.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import { useState } from "react";
-
 import { RefreshCcw } from "lucide-react";
 import type { ReactNode } from "react";
 
+import { useUncontrolledState } from "../../lib/use-uncontrolled-state";
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge";
 import { Button } from "../button";
@@ -31,7 +30,7 @@ export function Flashcard({
   question,
   title = "Flashcard",
 }: FlashcardProps): ReactNode {
-  const [flipped, setFlipped] = useState(defaultFlipped);
+  const [flipped, setFlipped] = useUncontrolledState(defaultFlipped);
 
   const toggleFlipped = (): void => {
     const nextValue = !flipped;
diff --git a/packages/ui/src/components/keyboard-shortcuts-help/keyboard-shortcuts-help.tsx b/packages/ui/src/components/keyboard-shortcuts-help/keyboard-shortcuts-help.tsx
index af0cb903..4a1590f8 100644
--- a/packages/ui/src/components/keyboard-shortcuts-help/keyboard-shortcuts-help.tsx
+++ b/packages/ui/src/components/keyboard-shortcuts-help/keyboard-shortcuts-help.tsx
@@ -4,6 +4,10 @@ import { memo, useEffect, useRef } from "react";
 
 import type { ReactNode } from "react";
 
+import {
+  useEventCallback,
+  useWindowEventListener,
+} from "../../lib/use-event-callback";
 import { cn } from "../../lib/utils";
 
 export type KeyboardShortcut = {
@@ -32,25 +36,21 @@ function KeyboardShortcutsHelpImpl({
   title = "Keyboard Shortcuts",
 }: KeyboardShortcutsHelpProps): React.ReactNode {
   const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const handleEscapeKey = useEventCallback((event: KeyboardEvent): void => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onClose();
+    }
+  });
 
   // Focus trap and close on Escape
   useEffect(() => {
     if (!isOpen) return;
 
     closeButtonRef.current?.focus();
+  }, [isOpen]);
 
-    const handleKeyDown = (event: KeyboardEvent): void => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onClose();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen, onClose]);
+  useWindowEventListener("keydown", handleEscapeKey, { enabled: isOpen });
 
   // Prevent body scroll when open
   useEffect(() => {
diff --git a/packages/ui/src/components/map-timeline/map-timeline.tsx b/packages/ui/src/components/map-timeline/map-timeline.tsx
index 44873321..3acc5705 100644
--- a/packages/ui/src/components/map-timeline/map-timeline.tsx
+++ b/packages/ui/src/components/map-timeline/map-timeline.tsx
@@ -552,7 +552,6 @@ function usePlayback(arguments_: {
         const next = yearRef.current + delta * speed;
         if (next >= endYear) {
           setYear(endYear);
-          setIsPlaying(false);
           return;
         }
         setYear(next);
diff --git a/packages/ui/src/components/progress-card/progress-card.tsx b/packages/ui/src/components/progress-card/progress-card.tsx
index 2004ed4b..375e0bc0 100644
--- a/packages/ui/src/components/progress-card/progress-card.tsx
+++ b/packages/ui/src/components/progress-card/progress-card.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useEffect, useState } from "react";
+import { memo, useMemo } from "react";
 
 import type { ReactNode } from "react";
 
@@ -76,18 +76,11 @@ function ContentCardImpl({
   tags = EMPTY_PROGRESS_CARD_LIST,
   title,
 }: ContentCardProps): React.ReactNode {
-  const [progress, setProgress] = useState<ContentCardProgress | null>(null);
   const isHydrated = useMounted();
-
-  // Load progress after hydration
-  useEffect(() => {
-    if (getProgress) {
-      const result = getProgress();
-      requestAnimationFrame(() => {
-        setProgress(result);
-      });
-    }
-  }, [getProgress]);
+  const progress = useMemo(
+    () => (isHydrated && getProgress ? getProgress() : null),
+    [getProgress, isHydrated],
+  );
 
   const showProgress = isHydrated && progress && progress.completedCount > 0;
 
diff --git a/packages/ui/src/components/progress-tracker/progress-tracker.tsx b/packages/ui/src/components/progress-tracker/progress-tracker.tsx
index f7079a0c..82de11ea 100644
--- a/packages/ui/src/components/progress-tracker/progress-tracker.tsx
+++ b/packages/ui/src/components/progress-tracker/progress-tracker.tsx
@@ -59,6 +59,10 @@ type ProgressTrackerContextValue = {
 const ProgressTrackerContext =
   React.createContext<null | ProgressTrackerContextValue>(null);
 
+function noop(): void {
+  return undefined;
+}
+
 function clampPercentage(value: number): number {
   if (Number.isNaN(value)) return 0;
   if (value <= 1) return Math.round(Math.max(0, value) * 100);
@@ -102,12 +106,6 @@ function readPersistedChecklistItems(persistKey?: string): string[] {
   }
 }
 
-function areStringArraysEqual(left: string[], right: string[]): boolean {
-  if (left.length !== right.length) return false;
-
-  return left.every((value, index) => value === right[index]);
-}
-
 function getChecklistPersistKey(event?: Event): null | string {
   if (!(event instanceof CustomEvent)) return null;
 
@@ -140,47 +138,65 @@ function getResolvedLessonProgress(module: ProgressTrackerModuleItem): {
   };
 }
 
+function getPersistedChecklistSnapshot(persistKey?: string): string {
+  return JSON.stringify(readPersistedChecklistItems(persistKey));
+}
+
+function parsePersistedChecklistSnapshot(snapshot: string): string[] {
+  try {
+    const parsed = JSON.parse(snapshot) as unknown;
+    return Array.isArray(parsed)
+      ? parsed.filter((item): item is string => typeof item === "string")
+      : [];
+  } catch {
+    return [];
+  }
+}
+
 function useChecklistProgress(
   checklistItems: ChecklistItem[] = [],
   persistKey?: string,
 ): null | { completedCount: number; progress: number; total: number } {
   const total = checklistItems.length;
-  const [persistedIds, setPersistedIds] = React.useState<string[]>(() =>
-    readPersistedChecklistItems(persistKey),
-  );
-  const setPersistedIdsIfChanged = React.useCallback((nextIds: string[]) => {
-    setPersistedIds((currentIds) =>
-      areStringArraysEqual(currentIds, nextIds) ? currentIds : nextIds,
-    );
-  }, []);
-
-  React.useEffect(() => {
-    setPersistedIdsIfChanged(readPersistedChecklistItems(persistKey));
-  }, [persistKey, setPersistedIdsIfChanged]);
-
-  React.useEffect(() => {
-    if (!persistKey || typeof window === "undefined") return;
+  const subscribe = React.useCallback(
+    (onStoreChange: () => void) => {
+      if (!persistKey || typeof window === "undefined") return noop;
 
-    const sync = (event?: Event): void => {
-      const eventPersistKey = getChecklistPersistKey(event);
-      if (eventPersistKey && eventPersistKey !== persistKey) return;
+      const sync = (event?: Event): void => {
+        const eventPersistKey = getChecklistPersistKey(event);
+        if (eventPersistKey && eventPersistKey !== persistKey) return;
 
-      setPersistedIdsIfChanged(readPersistedChecklistItems(persistKey));
-    };
-    const syncEventListener: EventListener = (event) => {
-      sync(event);
-    };
+        onStoreChange();
+      };
+      const syncEventListener: EventListener = (event) => {
+        sync(event);
+      };
 
-    window.addEventListener("storage", sync);
-    window.addEventListener("focus", sync);
-    window.addEventListener(CHECKLIST_PROGRESS_EVENT, syncEventListener);
+      window.addEventListener("storage", sync);
+      window.addEventListener("focus", sync);
+      window.addEventListener(CHECKLIST_PROGRESS_EVENT, syncEventListener);
 
-    return () => {
-      window.removeEventListener("storage", sync);
-      window.removeEventListener("focus", sync);
-      window.removeEventListener(CHECKLIST_PROGRESS_EVENT, syncEventListener);
-    };
-  }, [persistKey, setPersistedIdsIfChanged]);
+      return () => {
+        window.removeEventListener("storage", sync);
+        window.removeEventListener("focus", sync);
+        window.removeEventListener(CHECKLIST_PROGRESS_EVENT, syncEventListener);
+      };
+    },
+    [persistKey],
+  );
+  const getSnapshot = React.useCallback(
+    () => getPersistedChecklistSnapshot(persistKey),
+    [persistKey],
+  );
+  const persistedSnapshot = React.useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    () => "[]",
+  );
+  const persistedIds = React.useMemo(
+    () => parsePersistedChecklistSnapshot(persistedSnapshot),
+    [persistedSnapshot],
+  );
 
   if (!persistKey || total === 0) return null;
 
diff --git a/packages/ui/src/components/rating/rating.tsx b/packages/ui/src/components/rating/rating.tsx
index cb486f4c..01d04e76 100644
--- a/packages/ui/src/components/rating/rating.tsx
+++ b/packages/ui/src/components/rating/rating.tsx
@@ -5,6 +5,7 @@ import { useMemo, useState } from "react";
 import { Star } from "lucide-react";
 import type { ReactNode } from "react";
 
+import { useControllableState } from "../../lib/use-uncontrolled-state";
 import { cn } from "../../lib/utils";
 
 const sizeClasses = {
@@ -113,20 +114,18 @@ export function Rating({
   size = "md",
   value,
 }: RatingProps): ReactNode {
-  const isControlled = value !== undefined;
-  const [internalValue, setInternalValue] = useState(defaultValue);
   const [hoveredValue, setHoveredValue] = useState(0);
-  const activeValue = isControlled ? (value ?? 0) : internalValue;
+  const [activeValue, setActiveValue] = useControllableState({
+    defaultValue,
+    onChange: onValueChange,
+    value,
+  });
 
   const handleSelect = (nextValue: number): void => {
     const resolvedValue =
       allowClear && activeValue === nextValue ? 0 : nextValue;
 
-    if (!isControlled) {
-      setInternalValue(resolvedValue);
-    }
-
-    onValueChange?.(resolvedValue);
+    setActiveValue(resolvedValue);
   };
 
   return (
diff --git a/packages/ui/src/components/search-bar/search-bar.tsx b/packages/ui/src/components/search-bar/search-bar.tsx
index 82fdb63a..b16dc46e 100644
--- a/packages/ui/src/components/search-bar/search-bar.tsx
+++ b/packages/ui/src/components/search-bar/search-bar.tsx
@@ -5,6 +5,7 @@ import { Suspense, useEffect, useRef, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 
 import { useDebounce } from "../../lib/use-debounce";
+import { useEventCallback } from "../../lib/use-event-callback";
 import { Button } from "../button/button";
 import { Input } from "../input/input";
 
@@ -58,6 +59,9 @@ function SearchBarInner({
   const debouncedQuery = useDebounce(query, 300);
   const isInitialMount = useRef(true);
   const isUserTyping = useRef(false);
+  const runSearch = useEventCallback((searchQuery: string): void => {
+    onSearch?.(searchQuery);
+  });
 
   const typingTimeoutReference = useRef<NodeJS.Timeout | undefined>(undefined);
   const lastSetSearchParameterReference = useRef<string>("");
@@ -103,7 +107,7 @@ function SearchBarInner({
     lastDebouncedQueryReference.current = trimmedQuery;
 
     if (onSearch) {
-      onSearch(trimmedQuery);
+      runSearch(trimmedQuery);
       return;
     }
 
@@ -130,7 +134,7 @@ function SearchBarInner({
     // hard redirects, not Next router.replace — but ESLint doesn't
     // know that rule, so we don't add an eslint-disable for it.
     router.replace(`?${newUrl}`);
-  }, [debouncedQuery, router, onSearch, searchParameters]);
+  }, [debouncedQuery, onSearch, router, runSearch, searchParameters]);
 
   // Cleanup timeout on unmount
   useEffect(() => {
diff --git a/packages/ui/src/components/sidebar/sidebar.tsx b/packages/ui/src/components/sidebar/sidebar.tsx
index c1114e2b..b99d1415 100644
--- a/packages/ui/src/components/sidebar/sidebar.tsx
+++ b/packages/ui/src/components/sidebar/sidebar.tsx
@@ -1,11 +1,18 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
 
 import { ChevronDown } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
+import { useUncontrolledState } from "../../lib/use-uncontrolled-state";
 import { cn } from "../../lib/utils";
 import { useSidebar } from "../sidebar-provider";
 
@@ -25,26 +32,51 @@ type SidebarProps = {
   sections: SidebarSection[];
 };
 
-function useMobile(setOpen: (open: boolean) => void) {
-  const [isMobile, setIsMobile] = useState(false);
+function noop(): void {
+  return undefined;
+}
 
-  useEffect(() => {
-    const checkMobile = () => {
-      const mobile = window.innerWidth < 1024;
-      setIsMobile(mobile);
-      if (mobile) {
-        setOpen(false);
-      } else {
-        setOpen(true);
-      }
-    };
+function getMobileSnapshot(): boolean {
+  return typeof window === "undefined" ? false : window.innerWidth < 1024;
+}
 
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
-    return () => {
-      window.removeEventListener("resize", checkMobile);
-    };
+function subscribeToResize(
+  onStoreChange: () => void,
+  onEnterMobile: () => void,
+): () => void {
+  if (typeof window === "undefined") return noop;
+
+  let previousIsMobile = getMobileSnapshot();
+  const handleResize = (): void => {
+    const nextIsMobile = getMobileSnapshot();
+    if (nextIsMobile && !previousIsMobile) {
+      onEnterMobile();
+    }
+    previousIsMobile = nextIsMobile;
+    onStoreChange();
+  };
+
+  window.addEventListener("resize", handleResize);
+  return () => {
+    window.removeEventListener("resize", handleResize);
+  };
+}
+
+function useMobile(setOpen: (open: boolean) => void) {
+  const handleEnterMobile = useCallback(() => {
+    setOpen(false);
   }, [setOpen]);
+  const subscribe = useCallback(
+    (onStoreChange: () => void) =>
+      subscribeToResize(onStoreChange, handleEnterMobile),
+    [handleEnterMobile],
+  );
+
+  const isMobile = useSyncExternalStore(
+    subscribe,
+    getMobileSnapshot,
+    () => false,
+  );
 
   return isMobile;
 }
@@ -88,7 +120,7 @@ function CollapsibleSection({
   defaultOpen = true,
   title,
 }: CollapsibleSectionProps) {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [isOpen, setIsOpen] = useUncontrolledState(defaultOpen);
 
   if (!collapsible) {
     return (
diff --git a/packages/ui/src/components/slideshow/slideshow.tsx b/packages/ui/src/components/slideshow/slideshow.tsx
index cdee1450..f0892e57 100644
--- a/packages/ui/src/components/slideshow/slideshow.tsx
+++ b/packages/ui/src/components/slideshow/slideshow.tsx
@@ -5,6 +5,10 @@ import { memo, useCallback, useEffect, useState } from "react";
 import type { ReactNode } from "react";
 import { createPortal } from "react-dom";
 
+import {
+  useDocumentEventListener,
+  useEventCallback,
+} from "../../lib/use-event-callback";
 import { useMounted } from "../../lib/use-mounted";
 import { cn } from "../../lib/utils";
 import { CompletionDialog } from "../completion-dialog";
@@ -153,8 +157,8 @@ function SlideshowImpl({
     [currentIndex, goToSection],
   );
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent): void => {
+  const handleDocumentKeyDown = useEventCallback(
+    (event: KeyboardEvent): void => {
       if (isCompletionDialogOpen) return;
       if (event.key === "Escape") {
         event.preventDefault();
@@ -176,12 +180,10 @@ function SlideshowImpl({
         event.preventDefault();
         handlePrevious();
       }
-    };
-    document.addEventListener("keydown", handleKeyDown, true);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown, true);
-    };
-  }, [handleNext, handlePrevious, onExit, isTocOpen, isCompletionDialogOpen]);
+    },
+  );
+
+  useDocumentEventListener("keydown", handleDocumentKeyDown, true);
 
   if (!currentSection || !mounted) return null;
 
diff --git a/packages/ui/src/components/spinner/unicode-spinner.tsx b/packages/ui/src/components/spinner/unicode-spinner.tsx
index 0ac8655d..3e592acb 100644
--- a/packages/ui/src/components/spinner/unicode-spinner.tsx
+++ b/packages/ui/src/components/spinner/unicode-spinner.tsx
@@ -683,10 +683,6 @@ export const UnicodeSpinner = React.forwardRef<
     const resolvedInterval = interval ?? preset.interval;
     const [frameIndex, setFrameIndex] = React.useState(0);
 
-    React.useEffect(() => {
-      setFrameIndex(0);
-    }, [animation]);
-
     React.useEffect(() => {
       if (paused) {
         return;
@@ -701,7 +697,10 @@ export const UnicodeSpinner = React.forwardRef<
       };
     }, [paused, preset.frames.length, resolvedInterval]);
 
-    const frame = preset.frames[frameIndex] ?? preset.frames[0] ?? "⠋";
+    const normalizedFrameIndex =
+      preset.frames.length > 0 ? frameIndex % preset.frames.length : 0;
+    const frame =
+      preset.frames[normalizedFrameIndex] ?? preset.frames[0] ?? "⠋";
     const accessibleLabel = label ? `Loading ${label}` : "Loading";
 
     return (
diff --git a/packages/ui/src/components/table-of-contents-panel/table-of-contents-panel.tsx b/packages/ui/src/components/table-of-contents-panel/table-of-contents-panel.tsx
index d998d9e9..e5e4f1d7 100644
--- a/packages/ui/src/components/table-of-contents-panel/table-of-contents-panel.tsx
+++ b/packages/ui/src/components/table-of-contents-panel/table-of-contents-panel.tsx
@@ -4,6 +4,10 @@ import { memo, useEffect, useRef } from "react";
 
 import type { ReactNode } from "react";
 
+import {
+  useEventCallback,
+  useWindowEventListener,
+} from "../../lib/use-event-callback";
 import { cn } from "../../lib/utils";
 
 export type TOCSection = {
@@ -47,25 +51,21 @@ function TableOfContentsPanelImpl({
 }: TableOfContentsPanelProps): React.ReactNode {
   const panelRef = useRef<HTMLDivElement>(null);
   const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const handleEscapeKey = useEventCallback((event: KeyboardEvent): void => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onClose();
+    }
+  });
 
   // Focus trap and close on Escape
   useEffect(() => {
     if (!isOpen) return;
 
     closeButtonRef.current?.focus();
+  }, [isOpen]);
 
-    const handleKeyDown = (event: KeyboardEvent): void => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onClose();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen, onClose]);
+  useWindowEventListener("keydown", handleEscapeKey, { enabled: isOpen });
 
   // Prevent body scroll when open
   useEffect(() => {
diff --git a/packages/ui/src/components/tabs/tabs.tsx b/packages/ui/src/components/tabs/tabs.tsx
index 9b9922b5..fef98420 100644
--- a/packages/ui/src/components/tabs/tabs.tsx
+++ b/packages/ui/src/components/tabs/tabs.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { createContext, useContext, useMemo, useState } from "react";
+import { createContext, useContext, useMemo } from "react";
 
 import type { ReactNode } from "react";
 
+import { useUncontrolledState } from "../../lib/use-uncontrolled-state";
 import { cn } from "../../lib/utils";
 
 // Context for tabs state
@@ -35,7 +36,7 @@ function Tabs({
   defaultValue,
   onValueChange,
 }: TabsProps): React.ReactNode {
-  const [activeTab, setActiveTab] = useState(defaultValue);
+  const [activeTab, setActiveTab] = useUncontrolledState(defaultValue);
 
   const handleSetActiveTab = (value: string): void => {
     setActiveTab(value);
diff --git a/packages/ui/src/components/thinking-block/thinking-block.tsx b/packages/ui/src/components/thinking-block/thinking-block.tsx
index 5fe16c59..4ed416c7 100644
--- a/packages/ui/src/components/thinking-block/thinking-block.tsx
+++ b/packages/ui/src/components/thinking-block/thinking-block.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useId, useState } from "react";
+import { useCallback, useId, useLayoutEffect, useReducer } from "react";
 
 import { ChevronDown, ChevronRight } from "lucide-react";
 
@@ -14,26 +14,43 @@ export type ThinkingBlockProps = {
   thinking: string;
 };
 
+type ThinkingBlockState = {
+  isExpanded: boolean;
+};
+
+type ThinkingBlockAction =
+  | { isStreaming: boolean; type: "streaming-changed" }
+  | { type: "toggle" };
+
+function thinkingBlockReducer(
+  state: ThinkingBlockState,
+  action: ThinkingBlockAction,
+): ThinkingBlockState {
+  switch (action.type) {
+    case "streaming-changed":
+      return action.isStreaming ? { isExpanded: true } : state;
+    case "toggle":
+      return { isExpanded: !state.isExpanded };
+  }
+}
+
 /** Collapsible thinking block with streaming support. */
 export function ThinkingBlock({
   className,
   isStreaming = false,
   thinking,
 }: ThinkingBlockProps) {
-  const [isExpanded, setIsExpanded] = useState(isStreaming);
+  const [{ isExpanded }, dispatch] = useReducer(thinkingBlockReducer, {
+    isExpanded: isStreaming,
+  });
   const contentId = useId();
 
-  // Auto-open when streaming starts
-  useEffect(() => {
-    if (isStreaming) {
-      requestAnimationFrame(() => {
-        setIsExpanded(true);
-      });
-    }
+  useLayoutEffect(() => {
+    dispatch({ isStreaming, type: "streaming-changed" });
   }, [isStreaming]);
 
   const toggleExpanded = useCallback(() => {
-    setIsExpanded((previous) => !previous);
+    dispatch({ type: "toggle" });
   }, []);
 
   return (
diff --git a/packages/ui/src/components/tldr-section/tldr-section.tsx b/packages/ui/src/components/tldr-section/tldr-section.tsx
index 5dfc0e37..8846bf79 100644
--- a/packages/ui/src/components/tldr-section/tldr-section.tsx
+++ b/packages/ui/src/components/tldr-section/tldr-section.tsx
@@ -1,16 +1,46 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useReducer, useRef } from "react";
 
 type TLDRSectionProps = {
   children: React.ReactNode;
   label: string;
 };
 
+type TLDRSectionState = {
+  hasBeenOpened: boolean;
+  isExpanded: boolean;
+  isLoading: boolean;
+};
+
+type TLDRSectionAction =
+  | { type: "finish-loading" }
+  | { type: "mark-opened" }
+  | { type: "toggle" };
+
+function tldrSectionReducer(
+  state: TLDRSectionState,
+  action: TLDRSectionAction,
+): TLDRSectionState {
+  switch (action.type) {
+    case "finish-loading":
+      return { ...state, isLoading: false };
+    case "mark-opened":
+      return { ...state, hasBeenOpened: true, isLoading: true };
+    case "toggle":
+      return { ...state, isExpanded: !state.isExpanded };
+  }
+}
+
 export function TLDRSection({ children, label }: TLDRSectionProps) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [hasBeenOpened, setHasBeenOpened] = useState(false);
+  const [{ hasBeenOpened, isExpanded, isLoading }, dispatch] = useReducer(
+    tldrSectionReducer,
+    {
+      hasBeenOpened: false,
+      isExpanded: false,
+      isLoading: false,
+    },
+  );
   const timerReference = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
@@ -21,13 +51,12 @@ export function TLDRSection({ children, label }: TLDRSectionProps) {
       }
 
       const rafId = requestAnimationFrame(() => {
-        setIsLoading(true);
-        setHasBeenOpened(true);
+        dispatch({ type: "mark-opened" });
       });
 
       // Simulate loading with skeleton
       timerReference.current = setTimeout(() => {
-        setIsLoading(false);
+        dispatch({ type: "finish-loading" });
         timerReference.current = null;
       }, 800);
 
@@ -53,7 +82,7 @@ export function TLDRSection({ children, label }: TLDRSectionProps) {
       <button
         className="flex items-center justify-between w-full px-4 py-3 hover:bg-muted/50 transition-colors"
         onClick={() => {
-          setIsExpanded(!isExpanded);
+          dispatch({ type: "toggle" });
         }}
         type="button"
       >
diff --git a/packages/ui/src/components/tour/tour.tsx b/packages/ui/src/components/tour/tour.tsx
index e318478a..04cb0a83 100644
--- a/packages/ui/src/components/tour/tour.tsx
+++ b/packages/ui/src/components/tour/tour.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import { useState } from "react";
-
 import type { ReactNode } from "react";
 
+import { useUncontrolledState } from "../../lib/use-uncontrolled-state";
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge";
 import { Button } from "../button";
@@ -135,7 +134,7 @@ export function Tour({
   onStepChange,
   steps,
 }: TourProps): ReactNode {
-  const [currentStep, setCurrentStep] = useState(defaultStep);
+  const [currentStep, setCurrentStep] = useUncontrolledState(defaultStep);
 
   if (steps.length === 0) {
     return null;
diff --git a/packages/ui/src/components/tutorial-card/tutorial-card.tsx b/packages/ui/src/components/tutorial-card/tutorial-card.tsx
index d1fcfd0a..b3a238b4 100644
--- a/packages/ui/src/components/tutorial-card/tutorial-card.tsx
+++ b/packages/ui/src/components/tutorial-card/tutorial-card.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useEffect, useState } from "react";
+import { memo, useMemo } from "react";
 
 import type { ReactNode } from "react";
 
@@ -81,17 +81,11 @@ function TutorialCardImpl({
   linkComponent: LinkComponent = DefaultLink,
   tutorial,
 }: TutorialCardProps): React.ReactNode {
-  const [progress, setProgress] = useState<null | TutorialCardProgress>(null);
   const isHydrated = useMounted();
-
-  useEffect(() => {
-    if (getProgress) {
-      const result = getProgress(tutorial.id);
-      requestAnimationFrame(() => {
-        setProgress(result);
-      });
-    }
-  }, [getProgress, tutorial.id]);
+  const progress = useMemo(
+    () => (isHydrated && getProgress ? getProgress(tutorial.id) : null),
+    [getProgress, isHydrated, tutorial.id],
+  );
 
   const difficultyVariant = DIFFICULTY_VARIANTS[tutorial.difficulty];
   // Cap completedCount at sectionCount to handle stale localStorage data
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index e8464d62..2c9fbbb2 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -19,6 +19,15 @@ export {
   type SupportedLanguage as UISupportedLanguage,
 } from "./lib/types";
 export { useDebounce } from "./lib/use-debounce";
+export {
+  useDocumentEventListener,
+  useEventCallback,
+  useWindowEventListener,
+} from "./lib/use-event-callback";
 export { useHorizontalScroll } from "./lib/use-horizontal-scroll";
 export { useMounted } from "./lib/use-mounted";
+export {
+  useControllableState,
+  useUncontrolledState,
+} from "./lib/use-uncontrolled-state";
 export { cn } from "./lib/utils";
diff --git a/packages/ui/src/lib/use-event-callback.ts b/packages/ui/src/lib/use-event-callback.ts
new file mode 100644
index 00000000..a6bd19fd
--- /dev/null
+++ b/packages/ui/src/lib/use-event-callback.ts
@@ -0,0 +1,77 @@
+"use client";
+
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+export function useEventCallback<TArguments extends unknown[], TReturnValue>(
+  callback: (...arguments_: TArguments) => TReturnValue,
+): (...arguments_: TArguments) => TReturnValue {
+  const callbackRef = useRef(callback);
+
+  useIsomorphicLayoutEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  return useCallback((...arguments_: TArguments) => {
+    return callbackRef.current(...arguments_);
+  }, []);
+}
+
+type EventListenerOptions = AddEventListenerOptions | boolean;
+
+export function useDocumentEventListener<TKey extends keyof DocumentEventMap>(
+  type: TKey,
+  listener: (event: DocumentEventMap[TKey]) => void,
+  options?: EventListenerOptions,
+): void {
+  const listenerRef = useRef(listener);
+
+  useIsomorphicLayoutEffect(() => {
+    listenerRef.current = listener;
+  }, [listener]);
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    const handleEvent = (event: DocumentEventMap[TKey]): void => {
+      listenerRef.current(event);
+    };
+
+    document.addEventListener(type, handleEvent, options);
+    return () => {
+      document.removeEventListener(type, handleEvent, options);
+    };
+  }, [options, type]);
+}
+
+type WindowEventListenerOptions = {
+  enabled?: boolean;
+  options?: EventListenerOptions;
+};
+
+export function useWindowEventListener<TKey extends keyof WindowEventMap>(
+  type: TKey,
+  listener: (event: WindowEventMap[TKey]) => void,
+  { enabled = true, options }: WindowEventListenerOptions = {},
+): void {
+  const listenerRef = useRef(listener);
+
+  useIsomorphicLayoutEffect(() => {
+    listenerRef.current = listener;
+  }, [listener]);
+
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") return;
+
+    const handleEvent = (event: WindowEventMap[TKey]): void => {
+      listenerRef.current(event);
+    };
+
+    window.addEventListener(type, handleEvent, options);
+    return () => {
+      window.removeEventListener(type, handleEvent, options);
+    };
+  }, [enabled, options, type]);
+}
diff --git a/packages/ui/src/lib/use-uncontrolled-state.ts b/packages/ui/src/lib/use-uncontrolled-state.ts
new file mode 100644
index 00000000..18182000
--- /dev/null
+++ b/packages/ui/src/lib/use-uncontrolled-state.ts
@@ -0,0 +1,45 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+import type { Dispatch, SetStateAction } from "react";
+
+export function useUncontrolledState<T>(
+  defaultValue: T,
+): [T, Dispatch<SetStateAction<T>>] {
+  return useState<T>(defaultValue);
+}
+
+type ControllableStateOptions<T> = {
+  defaultValue: T;
+  onChange?: (value: T) => void;
+  value?: T;
+};
+
+export function useControllableState<T>({
+  defaultValue,
+  onChange,
+  value,
+}: ControllableStateOptions<T>): [T, Dispatch<SetStateAction<T>>] {
+  const [uncontrolledValue, setUncontrolledValue] = useState<T>(defaultValue);
+  const isControlled = value !== undefined;
+  const resolvedValue = isControlled ? value : uncontrolledValue;
+
+  const setValue = useCallback<Dispatch<SetStateAction<T>>>(
+    (nextValue) => {
+      const resolvedNextValue =
+        typeof nextValue === "function"
+          ? (nextValue as (currentValue: T) => T)(resolvedValue)
+          : nextValue;
+
+      if (!isControlled) {
+        setUncontrolledValue(resolvedNextValue);
+      }
+
+      onChange?.(resolvedNextValue);
+    },
+    [isControlled, onChange, resolvedValue],
+  );
+
+  return [resolvedValue, setValue];
+}