Commit d4c90d696d2546466d364cfccc86bcf2be6a7c86 | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-03-02 00:30:29-08:00
committer	Julius Marminge <jmarminge@gmail.com> 2026-03-02 13:13:19-08:00
log	d4c90d696d2546466d364cfccc86bcf2be6a7c86
tree	478277e9ca05405bcd84389b9a2e41ca74b33421
parent	be4d26a1b31d96754bdadc2ab7094dfdc9c7bad9

Simplify Zustand selectors by removing memoized callbacks

- Replace `useCallback`-wrapped `useStore` selectors with inline selectors
- Apply across chat, diff, branch toolbar, and chat thread route components

4 files changed, 23 insertions(+), 51 deletions(-)

apps
- web
  - src
    components
    BranchToolbar.tsx
    ChatView.tsx
    DiffPanel.tsx
    routes
    _chat.$threadId.tsx

apps/web/src/components/BranchToolbar.tsx+5-9

 @@ -1,6 +1,6 @@
 import type { GitBranch, ThreadId } from "@t3tools/contracts";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { newCommandId } from "../lib/utils";
 import {
 @@ -46,16 +46,12 @@ export default function BranchToolbar({
   const setThreadBranchAction = useStore((state) => state.setThreadBranch);
   const setThreadErrorAction = useStore((state) => state.setThreadError);
   const draftThread = useComposerDraftStore((store) => store.getDraftThread(threadId));
-  const serverThread = useStore(
+  const serverThread = useStore((state) =>
-    useCallback((state) => state.threads.find((thread) => thread.id === threadId), [threadId]),
+    state.threads.find((thread) => thread.id === threadId),
   );
   const activeProjectId = serverThread?.projectId ?? draftThread?.projectId ?? null;
-  const activeProject = useStore(
+  const activeProject = useStore((state) =>
-    useCallback(
+    activeProjectId ? state.projects.find((project) => project.id === activeProjectId) : undefined,
-      (state) =>
-        activeProjectId ? state.projects.find((project) => project.id === activeProjectId) : undefined,
-      [activeProjectId],
-    ),
   );
   const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
   const queryClient = useQueryClient();

apps/web/src/components/ChatView.tsx+12-28

 @@ -490,18 +490,14 @@ export default function ChatView({ threadId }: ChatViewProps) {
   const clearDraftThread = useComposerDraftStore((store) => store.clearDraftThread);
   const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
   const draftThread = useComposerDraftStore((store) => store.draftThreadsByThreadId[threadId] ?? null);
-  const serverThread = useStore(
+  const serverThread = useStore((state) =>
-    useCallback((state) => state.threads.find((thread) => thread.id === threadId), [threadId]),
+    state.threads.find((thread) => thread.id === threadId),
   );
   const fallbackDraftProjectId = draftThread?.projectId ?? null;
-  const fallbackDraftProject = useStore(
+  const fallbackDraftProject = useStore((state) =>
-    useCallback(
+    fallbackDraftProjectId
-      (state) =>
+      ? state.projects.find((project) => project.id === fallbackDraftProjectId)
-        fallbackDraftProjectId
+      : undefined,
-          ? state.projects.find((project) => project.id === fallbackDraftProjectId)
-          : undefined,
-      [fallbackDraftProjectId],
-    ),
   );
   const promptRef = useRef(prompt);
   const [isDragOverComposer, setIsDragOverComposer] = useState(false);
 @@ -601,12 +597,8 @@ export default function ChatView({ threadId }: ChatViewProps) {
   const activeLatestTurn = activeThread?.latestTurn ?? null;
   const latestTurnSettled = isLatestTurnSettled(activeLatestTurn, activeThread?.session ?? null);
   const activeProjectId = activeThread?.projectId ?? null;
-  const activeProject = useStore(
+  const activeProject = useStore((state) =>
-    useCallback(
+    activeProjectId ? state.projects.find((project) => project.id === activeProjectId) : undefined,
-      (state) =>
-        activeProjectId ? state.projects.find((project) => project.id === activeProjectId) : undefined,
-      [activeProjectId],
-    ),
   );
   useEffect(() => {
 @@ -3541,20 +3533,12 @@ const OpenInPicker = memo(function OpenInPicker({
   ] satisfies { label: string; Icon: Icon; value: EditorId }[];
   const primaryOption = options.find(({ value }) => value === lastEditor);
-  const activeThread = useStore(
+  const activeThread = useStore((state) =>
-    useCallback(
+    activeThreadId ? state.threads.find((thread) => thread.id === activeThreadId) : undefined,
-      (state) =>
-        activeThreadId ? state.threads.find((thread) => thread.id === activeThreadId) : undefined,
-      [activeThreadId],
-    ),
   );
   const activeProjectId = activeThread?.projectId ?? null;
-  const activeProject = useStore(
+  const activeProject = useStore((state) =>
-    useCallback(
+    activeProjectId ? state.projects.find((project) => project.id === activeProjectId) : undefined,
-      (state) =>
-        activeProjectId ? state.projects.find((project) => project.id === activeProjectId) : undefined,
-      [activeProjectId],
-    ),
   );
   const openInEditor = useCallback(

apps/web/src/components/DiffPanel.tsx+4-12

 @@ -167,20 +167,12 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
   });
   const diffSearch = useSearch({ strict: false, select: (search) => parseDiffRouteSearch(search) });
   const activeThreadId = routeThreadId;
-  const activeThread = useStore(
+  const activeThread = useStore((state) =>
-    useCallback(
+    activeThreadId ? state.threads.find((thread) => thread.id === activeThreadId) : undefined,
-      (state) =>
-        activeThreadId ? state.threads.find((thread) => thread.id === activeThreadId) : undefined,
-      [activeThreadId],
-    ),
   );
   const activeProjectId = activeThread?.projectId ?? null;
-  const activeProject = useStore(
+  const activeProject = useStore((state) =>
-    useCallback(
+    activeProjectId ? state.projects.find((project) => project.id === activeProjectId) : undefined,
-      (state) =>
-        activeProjectId ? state.projects.find((project) => project.id === activeProjectId) : undefined,
-      [activeProjectId],
-    ),
   );
   const activeCwd = activeThread?.worktreePath ?? activeProject?.cwd;
   const { turnDiffSummaries, inferredCheckpointTurnCountByTurnId } =

apps/web/src/routes/_chat.$threadId.tsx+2-2

...	@@ -139,8 +139,8 @@ function ChatThreadRouteView() {	...	@@ -139,8 +139,8 @@ function ChatThreadRouteView() {
139	select: (params) => ThreadId.makeUnsafe(params.threadId),	139	select: (params) => ThreadId.makeUnsafe(params.threadId),
140	});	140	});
141	const search = Route.useSearch();	141	const search = Route.useSearch();
142	const threadExists = useStore(	142	const threadExists = useStore((state) =>
143	useCallback((state) => state.threads.some((thread) => thread.id === threadId), [threadId]),	143	state.threads.some((thread) => thread.id === threadId),
144	);	144	);
145	const draftThreadExists = useComposerDraftStore(	145	const draftThreadExists = useComposerDraftStore(
146	(store) => Object.hasOwn(store.draftThreadsByThreadId, threadId),	146	(store) => Object.hasOwn(store.draftThreadsByThreadId, threadId),