From d9d584e556327e91ee44bdcf0bd5d48c4c7547aa Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 2 Oct 2025 22:03:36 +0000
Subject: [PATCH 1/4] Initial plan
From ee01222e72464b4f4e4fff31fa63516d07772855 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 2 Oct 2025 22:12:29 +0000
Subject: [PATCH 2/4] Create shared DebugInfo component for all demos
Co-authored-by: JasonMore <383719+JasonMore@users.noreply.github.com>
---
src/Layout.tsx | 6 ++-
src/components/DebugInfo.tsx | 47 +++++++++++++++++++
.../propDrilling/PropDrillingRenderDemo.tsx | 4 +-
.../demoControls/PropDrillingDebugInfo.tsx | 32 -------------
.../PropDrillingNaiveRenderDemo.tsx | 4 +-
.../demoControls/PropDrillingDebugInfo.tsx | 32 -------------
src/examples/zustand-query/ZustandQuery.tsx | 17 ++++++-
.../zustand-query/demoControls/DebugInfo.tsx | 21 ---------
src/examples/zustand/ZustandRenderDemo.tsx | 11 ++++-
.../zustand/demoControls/DebugInfo.tsx | 17 -------
10 files changed, 79 insertions(+), 112 deletions(-)
create mode 100644 src/components/DebugInfo.tsx
delete mode 100644 src/examples/propDrilling/demoControls/PropDrillingDebugInfo.tsx
delete mode 100644 src/examples/propDrillingNaive/demoControls/PropDrillingDebugInfo.tsx
delete mode 100644 src/examples/zustand-query/demoControls/DebugInfo.tsx
delete mode 100644 src/examples/zustand/demoControls/DebugInfo.tsx
diff --git a/src/Layout.tsx b/src/Layout.tsx
index feae79e..1dfe562 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -12,7 +12,9 @@ export const Layout = () => {
resetTokenCounter();
// Update page title based on current route
- const currentRoute = routes.find((route) => route.path === location.pathname);
+ const currentRoute = routes.find(
+ (route) => route.path === location.pathname,
+ );
if (currentRoute) {
document.title = currentRoute.title;
} else if (location.pathname === homeRoute.path) {
@@ -26,4 +28,4 @@ export const Layout = () => {
);
-};
\ No newline at end of file
+};
diff --git a/src/components/DebugInfo.tsx b/src/components/DebugInfo.tsx
new file mode 100644
index 0000000..2c6d038
--- /dev/null
+++ b/src/components/DebugInfo.tsx
@@ -0,0 +1,47 @@
+import { memo } from "react";
+import css from "./css/DebugInfo.module.css";
+import sharedStyles from "./css/shared.module.css";
+import type { World } from "../types/World.ts";
+
+type Snapshot = {
+ selectedWorldId: string;
+ hello: { worlds: World[] | undefined };
+};
+
+type Props = {
+ /**
+ * Snapshot data to display.
+ */
+ snapshot: Snapshot | null;
+ /**
+ * Optional title for the debug panel. Defaults to "Store snapshot".
+ */
+ title?: string;
+};
+
+export const DebugInfo = memo(({ snapshot, title }: Props) => {
+ const displayTitle = title || "Store snapshot";
+
+ const pretty =
+ snapshot !== null && snapshot !== undefined
+ ? JSON.stringify(
+ {
+ selectedWorldId: snapshot.selectedWorldId,
+ hello: {
+ worlds: snapshot.hello.worlds?.map((world) => ({ ...world })),
+ },
+ },
+ null,
+ 2,
+ )
+ : "Snapshot pending…";
+
+ return (
+
+
{displayTitle}
+
{pretty}
+
-
Top level state snapshot
-
{pretty}
-
-
Top level state snapshot
-
{pretty}
-
-
Store snapshot
-
{JSON.stringify(snapshot, null, 2)}
-
-
Store snapshot
-
{JSON.stringify(snapshot, null, 2)}
-
- The RenderToken shows render counts. When
- that value increases, the component just re-rendered. It will be much
- higher than a well implemented example.
-
-
- Enable react-scan to see performance differences with DOM
- render times. It will disable RenderToken. Refresh the page
- to turn off react-scan
-
{routes.map(({ id, path, title, description }) => (
@@ -34,7 +24,15 @@ export function Home() {
Demo App layout
Here is what the app looks like in each example. Each component is named
- below
+ below.
+
+
+ The RenderToken shows render counts. When
+ that value increases, the component just re-rendered.
+
+
+ Enable react-scan to see performance differences with DOM
+ render times. It will disable RenderToken.
Optimized Prop Drilling Demo
- This demo highlights an optimized prop drilling flow: state still lives
+ This demo highlights an optimized prop drilling flow. State still lives
at the top, but children receive stable data and callbacks via
- React.memo, useMemo, and{" "}
+ React.memo, useMemo, and
useCallback. Keeping shapes consistent across layers
prevents prop churn and keeps memoized children from re-rendering
- unnecessarily—even if a dedicated state store would still be leaner.
-
-
- The RenderToken shows render counts. When
- that value increases, the component just re-rendered. This demo shows
- noticeably lower counts across the tree than the naive version, making
- it easier to see how the optimizations pay off in practice.
-
-
-
Instructions:
-
- Click Add world to simulate changing data. Select a
- world from the World Selector to change the highlighted
- item.
+ unnecessarily.
{
+ onSnapshotChangeRef.current = onSnapshotChange;
+ }, [onSnapshotChange]);
const stableOnSnapshotChange = useCallback(
(snapshot: { selectedWorldId: string; hello: { worlds: World[] } }) => {
diff --git a/src/examples/propDrilling/exampleComponents/worldSelector/WorldSelector.tsx b/src/examples/propDrilling/exampleComponents/worldSelector/WorldSelector.tsx
index e3dfbbb..2187d34 100644
--- a/src/examples/propDrilling/exampleComponents/worldSelector/WorldSelector.tsx
+++ b/src/examples/propDrilling/exampleComponents/worldSelector/WorldSelector.tsx
@@ -4,7 +4,7 @@ import sharedStyles from "../../../../components/css/shared.module.css";
import css from "../../../../components/css/worldSelector/WorldSelector.module.css";
import { AddWorldButton } from "./AddWorld.tsx";
import { WorldIdButton } from "./WorldIdButton.tsx";
-import type { World } from "../../data/types.ts";
+import type { World } from "../../../../api/worlds";
type Props = {
activeWorld: string;
diff --git a/src/examples/propDrilling/exampleComponents/worldsViewer/World.tsx b/src/examples/propDrilling/exampleComponents/worldsViewer/World.tsx
index a564b97..77cd23f 100644
--- a/src/examples/propDrilling/exampleComponents/worldsViewer/World.tsx
+++ b/src/examples/propDrilling/exampleComponents/worldsViewer/World.tsx
@@ -2,7 +2,7 @@ import { memo, useEffect, useRef } from "react";
import { RenderToken } from "../../../../components/perf/RenderToken.tsx";
import css from "../../../../components/css/worldsViewer/World.module.css";
import { WorldInfo } from "./WorldInfo.tsx";
-import type { World as WorldType } from "../../data/types.ts";
+import type { World as WorldType } from "../../../../api/worlds";
type Props = {
world: WorldType;
diff --git a/src/examples/propDrilling/exampleComponents/worldsViewer/WorldInfo.tsx b/src/examples/propDrilling/exampleComponents/worldsViewer/WorldInfo.tsx
index 8e8a292..4e44f0c 100644
--- a/src/examples/propDrilling/exampleComponents/worldsViewer/WorldInfo.tsx
+++ b/src/examples/propDrilling/exampleComponents/worldsViewer/WorldInfo.tsx
@@ -1,7 +1,7 @@
import { memo, useMemo } from "react";
import { RenderToken } from "../../../../components/perf/RenderToken.tsx";
import css from "../../../../components/css/worldsViewer/WorldInfo.module.css";
-import type { World } from "../../data/types.ts";
+import type { World } from "../../../../api/worlds";
type Props = {
world: World;
diff --git a/src/examples/propDrilling/exampleComponents/worldsViewer/WorldList.tsx b/src/examples/propDrilling/exampleComponents/worldsViewer/WorldList.tsx
index ca0e961..0d87bba 100644
--- a/src/examples/propDrilling/exampleComponents/worldsViewer/WorldList.tsx
+++ b/src/examples/propDrilling/exampleComponents/worldsViewer/WorldList.tsx
@@ -2,7 +2,7 @@ import { memo } from "react";
import { RenderToken } from "../../../../components/perf/RenderToken.tsx";
import css from "../../../../components/css/worldsViewer/WorldList.module.css";
import { World } from "./World.tsx";
-import type { World as WorldType } from "../../data/types.ts";
+import type { World as WorldType } from "../../../../api/worlds";
type Props = {
worlds: WorldType[];
diff --git a/src/examples/propDrilling/exampleComponents/worldsViewer/WorldsViewer.tsx b/src/examples/propDrilling/exampleComponents/worldsViewer/WorldsViewer.tsx
index c7310d9..0def90a 100644
--- a/src/examples/propDrilling/exampleComponents/worldsViewer/WorldsViewer.tsx
+++ b/src/examples/propDrilling/exampleComponents/worldsViewer/WorldsViewer.tsx
@@ -2,7 +2,7 @@ import { memo } from "react";
import { RenderToken } from "../../../../components/perf/RenderToken.tsx";
import sharedStyles from "../../../../components/css/shared.module.css";
import { WorldList } from "./WorldList.tsx";
-import type { World } from "../../data/types.ts";
+import type { World } from "../../../../api/worlds";
type Props = {
worlds: World[];
diff --git a/src/examples/propDrillingNaive/PropDrillingNaiveRenderDemo.tsx b/src/examples/propDrillingNaive/PropDrillingNaiveRenderDemo.tsx
index 7430b6a..1e7ca7e 100644
--- a/src/examples/propDrillingNaive/PropDrillingNaiveRenderDemo.tsx
+++ b/src/examples/propDrillingNaive/PropDrillingNaiveRenderDemo.tsx
@@ -1,10 +1,8 @@
import { useState, useEffect } from "react";
import css from "../../components/css/DemoLayout.module.css";
-import { RenderToken } from "../../components/perf/RenderToken.tsx";
-import type { World } from "../../types/World.ts";
import { PropDrillingWorldApp } from "./exampleComponents/WorldApp.tsx";
import { DebugInfo } from "../../components/DebugInfo.tsx";
-import { fetchWorlds } from "../../api/worlds.ts";
+import { fetchWorlds, type World } from "../../api/worlds.ts";
type Snapshot = {
selectedWorldId: string;
@@ -27,22 +25,8 @@ export function PropDrillingNaiveRenderDemo() {
Prop Drilling Render Demo
This intentionally clumsy demo uses anti-patterns commonly seen with
- prop drilling. All state sits at the top of the tree, forcing every
- child to receive new prop objects each render—causing relentless prop
- churn, broken memoization, and a cascade of unnecessary updates.
-
-
- The RenderToken shows render counts. When
- that value increases, the component just re-rendered. Expect the counter
- to spike across multiple components compared to healthier patterns, so
- use it to spot how far the churn propagates.
-
-
- Instructions:
-
- Click Add world to simulate changing data. Select a
- world from the World Selector to change the highlighted
- item.
+ prop drilling. Prop churn, broken memoization, and a cascade of
+ unnecessary updates.
(
🌤 Zustand + tanstack-query/react
-
Puts API state in tanstack/react-query and client state in Zustand.
- The WorldsSelector and WorldsViewer components
- are siblings. The WorldsViewer component has a child
- component WorldList.
+ Puts API state in tanstack-query/react and client state in Zustand.
+ Since tanstack-query is a specialized tool for managing api data, its
+ more fully featured for handling data specific needs.
-
-
Instructions:
-
- Simulate API data changing by clicking Add world{" "}
- (notice the loading state and error handling). Simulate client state
- changing by clicking a different world in the{" "}
- World Selector.
-
-
diff --git a/src/examples/zustand-query/data/solarSystemWorlds.ts b/src/examples/zustand-query/data/solarSystemWorlds.ts
index 4eed5c5..76a86c5 100644
--- a/src/examples/zustand-query/data/solarSystemWorlds.ts
+++ b/src/examples/zustand-query/data/solarSystemWorlds.ts
@@ -1,4 +1,4 @@
-import type { World } from "./types";
+import type { World } from "../../../api/worlds";
export const SOLAR_SYSTEM_WORLDS: World[] = [
{
diff --git a/src/examples/zustand-query/data/types.ts b/src/examples/zustand-query/data/types.ts
deleted file mode 100644
index bcfa475..0000000
--- a/src/examples/zustand-query/data/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type World = {
- id: string;
- name: string;
- distanceFromSun: string;
- diameter: string;
- orbitalPeriod: string;
- type: string;
-};
diff --git a/src/examples/zustand/ZustandRenderDemo.tsx b/src/examples/zustand/ZustandRenderDemo.tsx
index 644a86c..cf7ac7a 100644
--- a/src/examples/zustand/ZustandRenderDemo.tsx
+++ b/src/examples/zustand/ZustandRenderDemo.tsx
@@ -2,7 +2,6 @@ import { useEffect } from "react";
import { useLoaderData, useRevalidator } from "react-router-dom";
import css from "../../components/css/DemoLayout.module.css";
import { DebugInfo } from "../../components/DebugInfo.tsx";
-import { RenderToken } from "../../components/perf/RenderToken.tsx";
import { WorldApp } from "./exampleComponents/WorldApp.tsx";
import { useWorldStore } from "./data/WorldStore.tsx";
import type { WorldsResponse } from "../../api/worlds.ts";
@@ -31,16 +30,8 @@ export function ZustandRenderDemo() {
Zustand Render Demo
This demo shows you can prevent re-rendering without using prop
- drilling. The RenderToken is a counter
- which counts each render. When that value increases, the component just
- re-rendered.
-
-
- Instructions:
-
- Simulate API data changing by clicking Add world.
- Simulate client state changing by clicking a different world in the{" "}
- World Selector.
+ drilling. Because a zustand is used, its internal data pub/sub is more
+ efficient than React memoization.
diff --git a/src/examples/zustand/data/WorldStore.tsx b/src/examples/zustand/data/WorldStore.tsx
index 0e71735..70ffb9d 100644
--- a/src/examples/zustand/data/WorldStore.tsx
+++ b/src/examples/zustand/data/WorldStore.tsx
@@ -1,5 +1,6 @@
import { create } from "zustand";
-import type { World } from "../../../types/World.ts";
+
+import type { World } from "../../../api/worlds.ts";
interface Store {
selectedWorldId: string;
diff --git a/src/examples/zustand/data/solarSystemWorlds.ts b/src/examples/zustand/data/solarSystemWorlds.ts
index b9a3d80..76a86c5 100644
--- a/src/examples/zustand/data/solarSystemWorlds.ts
+++ b/src/examples/zustand/data/solarSystemWorlds.ts
@@ -1,4 +1,4 @@
-import type { World } from "./types.ts";
+import type { World } from "../../../api/worlds";
export const SOLAR_SYSTEM_WORLDS: World[] = [
{
diff --git a/src/examples/zustand/data/types.ts b/src/examples/zustand/data/types.ts
deleted file mode 100644
index bcfa475..0000000
--- a/src/examples/zustand/data/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type World = {
- id: string;
- name: string;
- distanceFromSun: string;
- diameter: string;
- orbitalPeriod: string;
- type: string;
-};
diff --git a/src/routes.ts b/src/routes.ts
index c39e146..463f65e 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -36,14 +36,14 @@ export const routes: Route[] = [
navLabel: "🌤️ Zustand",
title: "🌤️ Zustand",
description:
- "Both API and client state are in zustand. Optimized to prevent re-rendering. Props are passed only as lookup keys",
+ "Both API and client state are in zustand. Optimized to prevent re-rendering. Props are passed only as lookup keys.",
},
{
id: "zustand-query",
path: "/zustand-query",
- navLabel: "🌤 RQ+Zustand",
- title: "🌤 tanstack-query/react + Zustand",
+ navLabel: "🌤 Zustand+tanstack",
+ title: "🌤 Zustand + tanstack-query/react",
description:
- "API state in tanstack-query/react, client state in zustand. Shows how you can combine state management",
+ "API state in tanstack-query/react, client state in zustand. Shows how you can combine state from multiple libraries.",
},
];
diff --git a/src/types/World.ts b/src/types/World.ts
deleted file mode 100644
index fb48961..0000000
--- a/src/types/World.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Shared type definitions used across multiple examples.
- * This ensures consistency and reduces coupling between examples.
- */
-
-export type World = {
- id: string;
- name: string;
- distanceFromSun: string;
- diameter: string;
- orbitalPeriod: string;
- type: string;
-};