fix(PLA-106): move localStorage write out of setState updater; memoize derived

setState updaters must be pure — React may invoke them more than once under
Strict Mode and concurrent rendering. Move writeState to the persist call site
in the event handler, with stateRef mirroring React state so the next mutation
reads the freshly committed value synchronously.

Memoize sortedChapters in ChaptersView and filePaths in ChapterCard so they
aren't recomputed on unrelated re-renders (e.g., toggling a checkbox).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: dastratakos

web/src/App.tsx

@@ -3,7 +3,7 @@ import type { Chapter, ChaptersFile } from "@/lib/chapters-types";
 import { type UseViewStateApi, useViewState } from "@/lib/use-view-state";
 import { cn } from "@/lib/utils";
 import { Circle, CircleCheck } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 type FetchState =
   | { status: "loading" }
@@ -62,7 +62,10 @@ export function App() {
 
 function ChaptersView({ file }: { file: ChaptersFile }) {
   const view = useViewState(file.scope.headSha);
-  const sortedChapters = [...file.chapters].sort((a, b) => a.order - b.order);
+  const sortedChapters = useMemo(
+    () => [...file.chapters].sort((a, b) => a.order - b.order),
+    [file.chapters],
+  );
 
   return (
     <div className="min-h-screen bg-background p-6 text-foreground">
@@ -104,7 +107,7 @@ function uniqueFilePaths(chapter: Chapter): string[] {
 
 function ChapterCard({ chapter, index, view }: ChapterCardProps) {
   const isViewed = view.isChapterViewed(chapter.id);
-  const filePaths = uniqueFilePaths(chapter);
+  const filePaths = useMemo(() => uniqueFilePaths(chapter), [chapter]);
 
   return (
     <li

web/src/lib/use-view-state.ts

@@ -77,6 +77,14 @@ function withRemoved(set: Set<string>, id: string): Set<string> {
 export function useViewState(storageKey: string): UseViewStateApi {
   const [state, setState] = useState<ViewState>(() => readState(storageKey));
 
+  // Mirror state in a ref so persist can compute the next value and write to
+  // localStorage in the event handler, not inside a setState updater. State
+  // updaters must be pure (https://react.dev/learn/keeping-components-pure),
+  // and React may invoke them more than once under Strict Mode / concurrent
+  // rendering — keeping writeState out of them avoids the redundant writes.
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
   // Re-hydrate from localStorage when the storage key changes. Adjusting state
   // during render (https://react.dev/learn/you-might-not-need-an-effect) keeps
   // the new render and any persist call against it in sync — without this,
@@ -85,17 +93,19 @@ export function useViewState(storageKey: string): UseViewStateApi {
   const lastKeyRef = useRef(storageKey);
   if (lastKeyRef.current !== storageKey) {
     lastKeyRef.current = storageKey;
-    setState(readState(storageKey));
+    const fresh = readState(storageKey);
+    stateRef.current = fresh;
+    setState(fresh);
   }
 
   const persist = useCallback(
     (updater: (prev: ViewState) => ViewState) => {
-      setState((prev) => {
-        const next = updater(prev);
-        if (next === prev) return prev;
-        writeState(storageKey, next);
-        return next;
-      });
+      const prev = stateRef.current;
+      const next = updater(prev);
+      if (next === prev) return;
+      stateRef.current = next;
+      setState(next);
+      writeState(storageKey, next);
     },
     [storageKey],
   );