From cfd485790dc99747630f809e317b65e05dd7bb6b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Tue, 30 Dec 2025 10:33:13 -0500
Subject: [PATCH] Separate renderProp and ChildComponent props

---
 CHANGELOG.md                                  |  4 ++
 README.md                                     | 39 ++++++-----
 integrations/vite/src/main.tsx                |  2 +
 integrations/vite/src/routes/Home.tsx         | 58 +++++++++++++---
 .../vite/src/routes/ScrollingDomState.tsx     | 30 ++++++++
 integrations/vite/tests/dom-state.spec.tsx    | 19 ++++++
 integrations/vite/tests/render.spec.tsx       | 62 +++++++++++++----
 lib/components/AutoSizer.test.tsx             | 43 ++++++------
 lib/components/AutoSizer.tsx                  | 30 +++++---
 lib/components/types.ts                       | 68 ++++++++++++++-----
 lib/index.ts                                  |  5 +-
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 10 +--
 public/generated/docs/AutoSizer.json          | 64 +++++++++++++----
 public/generated/examples/ChildComponent.json |  2 +-
 public/generated/examples/RenderProp.json     |  2 +-
 src/App.tsx                                   |  8 +--
 src/routes.ts                                 |  4 +-
 src/routes/BasicUsageRoute.tsx                | 16 -----
 src/routes/ChildComponentRoute.tsx            | 20 ++++++
 src/routes/RenderPropRoute.tsx                |  4 +-
 src/routes/examples/ChildComponent.tsx        |  6 +-
 src/routes/examples/RenderProp.tsx            | 10 +--
 23 files changed, 368 insertions(+), 140 deletions(-)
 create mode 100644 integrations/vite/src/routes/ScrollingDomState.tsx
 create mode 100644 integrations/vite/tests/dom-state.spec.tsx
 delete mode 100644 src/routes/BasicUsageRoute.tsx
 create mode 100644 src/routes/ChildComponentRoute.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c3f4fe..972e236 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+# 2.0.1
+
+- [#104](https://github.com/bvaughn/react-virtualized-auto-sizer/pull/104): Separate `renderProp` and `ChildComponent` props.
+
 # 2.0.0
 
 Version 2 simplifies the API and improves TypeScript support.
diff --git a/README.md b/README.md
index d0abeae..7a7c378 100644
--- a/README.md
+++ b/README.md
@@ -24,24 +24,7 @@ Measures the available width and height of its parent `HTMLElement` and passes t
 #### Required props
 
 <!-- AutoSizer:required-props:begin -->
-
-<table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Child</td>
-      <td><p>Child component to be passed the available width and height values as props.</p>
-<p>ℹ️ Width and height are undefined during the during the initial render (including server-rendering).</p>
-</td>
-    </tr>
-  </tbody>
-</table>
-
+None
 <!-- AutoSizer:required-props:end -->
 
 #### Optional props
@@ -102,6 +85,26 @@ in browsers/environments that do not support the <code>ResizeObserver</code> API
     <tr>
       <td>tagName</td>
       <td><p>Optional HTML tag name for root HTMLElement; defaults to <code>&quot;div&quot;</code>.</p>
+</td>
+    </tr>
+    <tr>
+      <td>Child</td>
+      <td><p>Child component to be passed the available width and height values as props.
+@deprecated Use the <code>ChildComponent</code> or <code>renderProp</code> props instead.</p>
+</td>
+    </tr>
+    <tr>
+      <td>ChildComponent</td>
+      <td><p>Child component to be passed the available width and height values as props.</p>
+<p>ℹ️ Use <code>renderProp</code> instead if you need access to local state.</p>
+<p>⚠️ Width and height are undefined during the during the initial render (including server-rendering).</p>
+</td>
+    </tr>
+    <tr>
+      <td>renderProp</td>
+      <td><p>Render prop to be passed the available width and height values as props.</p>
+<p>ℹ️ Use <code>ChildComponent</code> instead for better memoization if you do not need access to local state.</p>
+<p>⚠️ Width and height are undefined during the during the initial render (including server-rendering).</p>
 </td>
     </tr>
   </tbody>
diff --git a/integrations/vite/src/main.tsx b/integrations/vite/src/main.tsx
index 30740b3..a5e9ad0 100644
--- a/integrations/vite/src/main.tsx
+++ b/integrations/vite/src/main.tsx
@@ -3,12 +3,14 @@ import { createRoot } from "react-dom/client";
 import { BrowserRouter, Route, Routes } from "react-router";
 import "./index.css";
 import { Home } from "./routes/Home";
+import { ScrollingDomState } from "./routes/ScrollingDomState";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Home />} />
+        <Route path="/scrolling-dom-state" element={<ScrollingDomState />} />
       </Routes>
     </BrowserRouter>
   </StrictMode>
diff --git a/integrations/vite/src/routes/Home.tsx b/integrations/vite/src/routes/Home.tsx
index 6b5b509..bd445af 100644
--- a/integrations/vite/src/routes/Home.tsx
+++ b/integrations/vite/src/routes/Home.tsx
@@ -3,22 +3,25 @@ import {
   useLayoutEffect,
   useMemo,
   useState,
-  type FunctionComponent
+  type FunctionComponent,
+  type ReactNode
 } from "react";
 import { createPortal } from "react-dom";
+import { useSearchParams } from "react-router";
 import {
   AutoSizer,
   type AutoSizerBox,
   type Size
 } from "react-virtualized-auto-sizer";
 import { Children, type SizeProps } from "../components/Children";
-import { useSearchParams } from "react-router";
+
+export type ChildProp = "Child" | "ChildComponent" | "renderProp";
 
 export function Home() {
   const [params] = useSearchParams();
   const box = (params.get("box") || undefined) as AutoSizerBox | undefined;
+  const childProp = (params.get("childProp") || "ChildComponent") as ChildProp;
   const style = params.get("style") || "";
-  console.log("Home:", JSON.stringify({ box, style }, null, 2));
 
   const [container] = useState(() => {
     const div = document.createElement("div");
@@ -40,7 +43,7 @@ export function Home() {
   const [commits, setCommits] = useState<SizeProps[]>([]);
   const [onResizeCalls, setOnResizeCalls] = useState<Size[]>([]);
 
-  const Child = useMemo<FunctionComponent<SizeProps>>(
+  const ChildComponent = useMemo<FunctionComponent<SizeProps>>(
     () =>
       ({ height, width }) => (
         <Children
@@ -62,13 +65,50 @@ export function Home() {
     ]);
   }, []);
 
+  let autoSizer: ReactNode;
+  switch (childProp) {
+    case "Child": {
+      autoSizer = (
+        <AutoSizer box={box} Child={ChildComponent} onResize={onResize} />
+      );
+      break;
+    }
+    case "ChildComponent": {
+      autoSizer = (
+        <AutoSizer
+          box={box}
+          ChildComponent={ChildComponent}
+          onResize={onResize}
+        />
+      );
+      break;
+    }
+    case "renderProp": {
+      autoSizer = (
+        <AutoSizer
+          box={box}
+          onResize={onResize}
+          renderProp={({ height, width }: SizeProps) => (
+            <Children
+              height={height as number}
+              onCommitLogsChange={setCommits}
+              width={width as number}
+            />
+          )}
+        />
+      );
+      break;
+    }
+  }
+
   return (
     <div className="w-full h-full">
-      <iframe className="w-full h-[25%]" ref={setIframe} />
-      {createPortal(
-        <AutoSizer box={box} Child={Child} onResize={onResize} />,
-        container
-      )}
+      <iframe
+        className="w-full h-[25%]"
+        name="auto-sizer-frame"
+        ref={setIframe}
+      />
+      {createPortal(autoSizer, container)}
       <pre className="text-xs p-2">
         <code
           className="h-full w-full whitespace-pre-wrap overflow-auto"
diff --git a/integrations/vite/src/routes/ScrollingDomState.tsx b/integrations/vite/src/routes/ScrollingDomState.tsx
new file mode 100644
index 0000000..65d5224
--- /dev/null
+++ b/integrations/vite/src/routes/ScrollingDomState.tsx
@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { AutoSizer } from "react-virtualized-auto-sizer";
+
+export function ScrollingDomState() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="w-screen h-screen">
+      <AutoSizer
+        renderProp={({ height, width }) => (
+          <div style={{ height, overflow: "auto", width }}>
+            <button
+              className="sticky top-0"
+              onClick={() => setCount(count + 1)}
+            >
+              force update ({count})
+            </button>
+            <ul>
+              {Array.from({ length: 100 }, (_, index) => index).map((index) => {
+                return (
+                  <li key={index}>Row {`${index + 1}`.padStart(2, "0")}</li>
+                );
+              })}
+            </ul>
+          </div>
+        )}
+      />
+    </div>
+  );
+}
diff --git a/integrations/vite/tests/dom-state.spec.tsx b/integrations/vite/tests/dom-state.spec.tsx
new file mode 100644
index 0000000..49f4282
--- /dev/null
+++ b/integrations/vite/tests/dom-state.spec.tsx
@@ -0,0 +1,19 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("dom state", () => {
+  // See issue #103
+  test("should preserve DOM state across renders when an inline renderProp function is used", async ({
+    page
+  }) => {
+    await page.goto("http://localhost:3010/scrolling-dom-state");
+
+    await expect(page.getByText("force update (0)")).toBeVisible();
+    await expect(page.getByText("Row 01")).toBeInViewport();
+    await page.getByText("Row 99").scrollIntoViewIfNeeded();
+
+    await page.getByText("force update (0)").click();
+
+    await expect(page.getByText("force update (1)")).toBeVisible();
+    await expect(page.getByText("Row 99")).toBeInViewport();
+  });
+});
diff --git a/integrations/vite/tests/render.spec.tsx b/integrations/vite/tests/render.spec.tsx
index a02e749..29db944 100644
--- a/integrations/vite/tests/render.spec.tsx
+++ b/integrations/vite/tests/render.spec.tsx
@@ -1,37 +1,69 @@
 import { expect, test, type Page } from "@playwright/test";
-import type { AutoSizerBox } from "react-virtualized-auto-sizer";
+import { type AutoSizerBox } from "react-virtualized-auto-sizer";
+import type { ChildProp } from "../src/routes/Home";
 
 async function startTest({
   box,
+  childProp,
   page,
   style = ""
 }: {
   box?: AutoSizerBox;
+  childProp?: ChildProp;
   page: Page;
   style?: string;
 }) {
   // page.on("console", (message) => console.log(message.text()));
 
-  const url = `http://localhost:3010/?box=${box ?? ""}&style=${encodeURIComponent(style)}`;
+  const url = new URL("http://localhost:3010");
+  if (box) {
+    url.searchParams.set("box", box);
+  }
+  if (childProp) {
+    url.searchParams.set("childProp", childProp);
+  }
+  if (style) {
+    url.searchParams.set("style", style);
+  }
 
   console.log(`\n${url}\n`);
 
-  await page.goto(url);
+  await page.goto(url.toString());
 }
 
 test.describe("render", () => {
-  test("should mount with undefined size and then update with measured size", async ({
-    page
-  }) => {
-    await startTest({ page });
-
-    await expect(page.getByTestId("code")).toHaveText(
-      JSON.stringify({
-        commits: [{}, { height: 150, width: 1000 }],
-        onResizeCalls: [{ height: 150, width: 1000 }]
-      })
-    );
-  });
+  for (const childProp of ["Child", "ChildComponent", "renderProp"]) {
+    test.describe(childProp, () => {
+      test("should mount with undefined size and then update with measured size", async ({
+        page
+      }) => {
+        await startTest({ childProp: childProp as ChildProp, page });
+
+        await expect(page.getByTestId("code")).toHaveText(
+          JSON.stringify({
+            commits: [{}, { height: 150, width: 1000 }],
+            onResizeCalls: [{ height: 150, width: 1000 }]
+          })
+        );
+
+        await page.setViewportSize({ height: 500, width: 500 });
+
+        await expect(page.getByTestId("code")).toHaveText(
+          JSON.stringify({
+            commits: [
+              {},
+              { height: 150, width: 1000 },
+              { height: 125, width: 500 }
+            ],
+            onResizeCalls: [
+              { height: 150, width: 1000 },
+              { height: 125, width: 500 }
+            ]
+          })
+        );
+      });
+    });
+  }
 
   test("should support box: content-box", async ({ page }) => {
     await startTest({
diff --git a/lib/components/AutoSizer.test.tsx b/lib/components/AutoSizer.test.tsx
index fa7fd6a..8228966 100644
--- a/lib/components/AutoSizer.test.tsx
+++ b/lib/components/AutoSizer.test.tsx
@@ -8,29 +8,31 @@ describe("AutoSizer", () => {
     vi.resetAllMocks();
   });
 
-  it("should call Child with undefined size values during the initial render", async () => {
-    const Child = vi.fn(() => null);
+  it("should pass undefined size values during the initial render", async () => {
+    const ChildComponent = vi.fn(() => null);
     const onResize = vi.fn();
 
-    renderForTest(<AutoSizer Child={Child} onResize={onResize} />);
+    renderForTest(
+      <AutoSizer ChildComponent={ChildComponent} onResize={onResize} />
+    );
 
-    expect(Child).toHaveBeenCalledTimes(1);
-    expect(Child).toHaveBeenCalledWith({}, undefined);
+    expect(ChildComponent).toHaveBeenCalledTimes(1);
+    expect(ChildComponent).toHaveBeenCalledWith({}, undefined);
     expect(onResize).not.toHaveBeenCalled();
   });
 
-  it("should pass Child width and height once mounted", async () => {
-    const Child = vi.fn(() => null);
+  it("should pass actual width and height once mounted", async () => {
+    const renderProp = vi.fn(() => null);
     const onResize = vi.fn();
 
     const { container } = renderForTest(
-      <AutoSizer Child={Child} onResize={onResize} />
+      <AutoSizer onResize={onResize} renderProp={renderProp} />
     );
 
-    expect(Child).toHaveBeenCalled();
+    expect(renderProp).toHaveBeenCalled();
     expect(onResize).not.toHaveBeenCalled();
 
-    Child.mockReset();
+    renderProp.mockReset();
 
     await simulateResize({
       element: container,
@@ -38,14 +40,11 @@ describe("AutoSizer", () => {
       width: 200
     });
 
-    expect(Child).toHaveBeenCalledTimes(1);
-    expect(Child).toHaveBeenCalledWith(
-      {
-        height: 100,
-        width: 200
-      },
-      undefined
-    );
+    expect(renderProp).toHaveBeenCalledTimes(1);
+    expect(renderProp).toHaveBeenCalledWith({
+      height: 100,
+      width: 200
+    });
 
     expect(onResize).toHaveBeenCalledTimes(1);
     expect(onResize).toHaveBeenCalledWith({
@@ -55,10 +54,14 @@ describe("AutoSizer", () => {
   });
 
   describe("HTML", () => {
+    function Child() {
+      return null;
+    }
+
     it("pass through additional attributes", () => {
       const { container } = renderForTest(
         <AutoSizer
-          Child={undefined}
+          Child={Child}
           className="foo"
           data-testid="test-id"
           id="auto-sizer"
@@ -77,7 +80,7 @@ describe("AutoSizer", () => {
 
     it("should support a different tagName", () => {
       const { container } = renderForTest(
-        <AutoSizer Child={undefined} tagName="span" />
+        <AutoSizer Child={Child} tagName="span" />
       );
 
       const element = container.querySelector(
diff --git a/lib/components/AutoSizer.tsx b/lib/components/AutoSizer.tsx
index 738c844..0662d27 100644
--- a/lib/components/AutoSizer.tsx
+++ b/lib/components/AutoSizer.tsx
@@ -1,7 +1,7 @@
 import { createElement, memo, useMemo, useState } from "react";
 import { useSize } from "../hooks/useSize";
 import type { Size } from "../types";
-import type { AutoSizerChildProps, AutoSizerProps } from "./types";
+import type { AutoSizerProps, ChildComponent, RenderProp } from "./types";
 
 /**
  * Measures the available width and height of its parent `HTMLElement` and passes those values as `width` and `height` props to its `children`.
@@ -11,14 +11,24 @@ import type { AutoSizerChildProps, AutoSizerProps } from "./types";
 export function AutoSizer({
   box = "content-box",
   className,
-  Child,
   "data-testid": dataTestId,
   id,
   nonce,
   onResize,
   style,
-  tagName: TagName = "div"
+  tagName: TagName = "div",
+  ...props
 }: AutoSizerProps) {
+  let ChildComponent: ChildComponent | undefined = undefined;
+  let renderProp: RenderProp | undefined = undefined;
+  if ("Child" in props) {
+    ChildComponent = props.Child;
+  } else if ("ChildComponent" in props) {
+    ChildComponent = props.ChildComponent;
+  } else if ("renderProp" in props) {
+    renderProp = props.renderProp;
+  }
+
   const [element, setElement] = useState<HTMLElement | null>(null);
 
   const [height, setHeight] = useState<number | undefined>();
@@ -38,7 +48,10 @@ export function AutoSizer({
     rootElement: element
   });
 
-  const MemoizedChild = useMemo(() => memo(Child ?? NoopChild), [Child]);
+  const MemoizedChildComponent = useMemo(
+    () => (ChildComponent ? memo(ChildComponent) : undefined),
+    [ChildComponent]
+  );
 
   return createElement(
     TagName,
@@ -50,10 +63,9 @@ export function AutoSizer({
       ref: setElement,
       style
     },
-    createElement(MemoizedChild, { height, width })
+    MemoizedChildComponent
+      ? createElement(MemoizedChildComponent, { height, width })
+      : undefined,
+    renderProp ? renderProp({ height, width }) : undefined
   );
 }
-
-function NoopChild(_: AutoSizerChildProps) {
-  return null;
-}
diff --git a/lib/components/types.ts b/lib/components/types.ts
index dd26e10..dc77bf5 100644
--- a/lib/components/types.ts
+++ b/lib/components/types.ts
@@ -1,13 +1,23 @@
-import type { CSSProperties, FunctionComponent } from "react";
+import type { CSSProperties, FunctionComponent, ReactNode } from "react";
 
 /**
- * Props definition for the `AutoSizer` component's `Child` prop.
+ * Props passed to the `AutoSizer` component's `ChildComponent` or `renderProp`.
  */
-export type AutoSizerChildProps = {
+export type SizeProps = {
   height: number | undefined;
   width: number | undefined;
 };
 
+export type ChildComponent = FunctionComponent<{
+  height: number | undefined;
+  width: number | undefined;
+}>;
+
+export type RenderProp = (params: {
+  height: number | undefined;
+  width: number | undefined;
+}) => ReactNode;
+
 export type AutoSizerBox =
   | "border-box"
   | "content-box"
@@ -27,18 +37,6 @@ export type AutoSizerProps = {
    */
   box?: "border-box" | "content-box" | "device-pixel-content-box" | undefined;
 
-  /**
-   * Child component to be passed the available width and height values as props.
-   *
-   * ℹ️ Width and height are undefined during the during the initial render (including server-rendering).
-   */
-  Child:
-    | FunctionComponent<{
-        height: number | undefined;
-        width: number | undefined;
-      }>
-    | undefined;
-
   /**
    * Class name to be applied to the auto-sizer `HTMLElement`.
    */
@@ -76,4 +74,42 @@ export type AutoSizerProps = {
    * Optional HTML tag name for root HTMLElement; defaults to `"div"`.
    */
   tagName?: string | undefined;
-};
+} & (
+  | {
+      /**
+       * Child component to be passed the available width and height values as props.
+       *
+       * @deprecated Use the `ChildComponent` or `renderProp` props instead.
+       */
+      Child: ChildComponent;
+
+      ChildComponent?: never;
+      renderProp?: never;
+    }
+  | {
+      /**
+       * Child component to be passed the available width and height values as props.
+       *
+       * ℹ️ Use `renderProp` instead if you need access to local state.
+       *
+       * ⚠️ Width and height are undefined during the during the initial render (including server-rendering).
+       */
+      ChildComponent: ChildComponent;
+
+      Child?: never;
+      renderProp?: never;
+    }
+  | {
+      /**
+       * Render prop to be passed the available width and height values as props.
+       *
+       * ℹ️ Use `ChildComponent` instead for better memoization if you do not need access to local state.
+       *
+       * ⚠️ Width and height are undefined during the during the initial render (including server-rendering).
+       */
+      renderProp: RenderProp;
+
+      Child?: never;
+      ChildComponent?: never;
+    }
+);
diff --git a/lib/index.ts b/lib/index.ts
index ba13e17..44effae 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -3,7 +3,10 @@ export { AutoSizer } from "./components/AutoSizer";
 export type {
   AutoSizerProps,
   AutoSizerBox,
-  AutoSizerChildProps
+  SizeProps,
+
+  /** @deprecated Use `SizeProps` instead */
+  SizeProps as AutoSizerChildProps
 } from "./components/types";
 
 export type { Size } from "./types";
diff --git a/package.json b/package.json
index a00c073..96e78d1 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,7 @@
     "react-docgen-typescript": "^2.4.0",
     "react-dom": "^19.2.3",
     "react-error-boundary": "^6.0.0",
-    "react-lib-tools": "^0.0.13",
+    "react-lib-tools": "^0.0.14",
     "react-router-dom": "^7.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^6.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 90a6dc3..a42d056 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -144,8 +144,8 @@ importers:
         specifier: ^6.0.0
         version: 6.0.0(react@19.2.3)
       react-lib-tools:
-        specifier: ^0.0.13
-        version: 0.0.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: ^0.0.14
+        version: 0.0.14(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react-router-dom:
         specifier: ^7.6.3
         version: 7.10.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -2916,8 +2916,8 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  react-lib-tools@0.0.13:
-    resolution: {integrity: sha512-nyKpcfyuXXuj50fPTtvKVDHMRUPGW7TfwpIAidHoum39uyfi995QqIVdXPtbz1FcjF5osHU9yFzlDX1up0sU8Q==}
+  react-lib-tools@0.0.14:
+    resolution: {integrity: sha512-p870rgYuEkyp1XDeyiIanics7YthvG3tRDUk/wTEa/OAjreY5hciasOhgpX2mvSE9tZobEbXNpPvjW8POMh7iA==}
     peerDependencies:
       react: ^18.0.0 || ^19.0.0
       react-dom: ^18.0.0 || ^19.0.0
@@ -6198,7 +6198,7 @@ snapshots:
 
   react-is@17.0.2: {}
 
-  react-lib-tools@0.0.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  react-lib-tools@0.0.14(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
diff --git a/public/generated/docs/AutoSizer.json b/public/generated/docs/AutoSizer.json
index 6bbb305..a7524dc 100644
--- a/public/generated/docs/AutoSizer.json
+++ b/public/generated/docs/AutoSizer.json
@@ -24,20 +24,6 @@
       "name": "box",
       "required": false
     },
-    "Child": {
-      "description": [
-        {
-          "content": "<p>Child component to be passed the available width and height values as props.</p>\n"
-        },
-        {
-          "content": "<p>Width and height are undefined during the during the initial render (including server-rendering).</p>\n",
-          "intent": "primary"
-        }
-      ],
-      "html": "<div><span class=\"tok-labelName\"><span class=\"tok-propertyName\">Child</span></span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">FunctionComponent</span><span class=\"\">&#60;</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">height</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">number</span><span class=\"\"> </span><span class=\"tok-operator\">|</span><span class=\"\"> </span><span class=\"tok-typeName\">undefined</span><span class=\"tok-punctuation\">;</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">width</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">number</span><span class=\"\"> </span><span class=\"tok-operator\">|</span><span class=\"\"> </span><span class=\"tok-typeName\">undefined</span><span class=\"tok-punctuation\">;</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\">&#62; </span><span class=\"tok-operator\">|</span><span class=\"\"> </span><span class=\"tok-variableName\">undefined</span></div>",
-      "name": "Child",
-      "required": true
-    },
     "className": {
       "description": [
         {
@@ -107,6 +93,56 @@
       "html": "<div><span class=\"tok-variableName\"><span class=\"tok-propertyName\">tagName</span></span><span class=\"tok-operator\">?</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">string</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-string\">\"div\"</span></div>",
       "name": "tagName",
       "required": false
+    },
+    "Child": {
+      "description": [
+        {
+          "content": "<p>Child component to be passed the available width and height values as props.</p>\n"
+        },
+        {
+          "content": "<p>This prop has been deprecated. Use the <code>ChildComponent</code> or <code>renderProp</code> props instead.</p>\n",
+          "intent": "danger"
+        }
+      ],
+      "html": "<div><span class=\"tok-variableName\"><span class=\"tok-propertyName\">Child</span></span><span class=\"tok-operator\">?</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">ChildComponent</span></div>",
+      "name": "Child",
+      "required": false
+    },
+    "ChildComponent": {
+      "description": [
+        {
+          "content": "<p>Child component to be passed the available width and height values as props.</p>\n"
+        },
+        {
+          "content": "<p>Use <code>renderProp</code> instead if you need access to local state.</p>\n",
+          "intent": "primary"
+        },
+        {
+          "content": "<p>Width and height are undefined during the during the initial render (including server-rendering).</p>\n",
+          "intent": "warning"
+        }
+      ],
+      "html": "<div><span class=\"tok-variableName\"><span class=\"tok-propertyName\">ChildComponent</span></span><span class=\"tok-operator\">?</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">ChildComponent</span></div>",
+      "name": "ChildComponent",
+      "required": false
+    },
+    "renderProp": {
+      "description": [
+        {
+          "content": "<p>Render prop to be passed the available width and height values as props.</p>\n"
+        },
+        {
+          "content": "<p>Use <code>ChildComponent</code> instead for better memoization if you do not need access to local state.</p>\n",
+          "intent": "primary"
+        },
+        {
+          "content": "<p>Width and height are undefined during the during the initial render (including server-rendering).</p>\n",
+          "intent": "warning"
+        }
+      ],
+      "html": "<div><span class=\"tok-variableName\"><span class=\"tok-propertyName\">renderProp</span></span><span class=\"tok-operator\">?</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">RenderProp</span></div>",
+      "name": "renderProp",
+      "required": false
     }
   }
 }
\ No newline at end of file
diff --git a/public/generated/examples/ChildComponent.json b/public/generated/examples/ChildComponent.json
index 11f75b7..9b4c434 100644
--- a/public/generated/examples/ChildComponent.json
+++ b/public/generated/examples/ChildComponent.json
@@ -1,3 +1,3 @@
 {
-  "html": "<div><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">AutoSizer</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-keyword\">type</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">AutoSizerChildProps</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-virtualized-auto-sizer\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">ExampleComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">AutoSizer</span><span class=\"\"> </span><span class=\"tok-propertyName\">Child</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">Child</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\"></span><span class=\"tok-comment\">// Height and width will be undefined for the initial render (or when server rendering)</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-comment\">// You can either set default values (as shown below) or render some sort of placeholder</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Child</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">height</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-number\">600</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">width</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-number\">600</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">AutoSizerChildProps</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">width</span><span class=\"tok-punctuation\">}</span><span class=\"\"> x </span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">height</span><span class=\"tok-punctuation\">}</span><span class=\"\"> pixels</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
+  "html": "<div><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">AutoSizer</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-keyword\">type</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">AutoSizerChildProps</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-virtualized-auto-sizer\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">ExampleComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">AutoSizer</span><span class=\"\"> </span><span class=\"tok-propertyName\">ChildComponent</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">ChildComponent</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\"></span><span class=\"tok-comment\">// Height and width will be undefined for the initial render (or when server rendering)</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-comment\">// You can either set default values (as shown below) or render some sort of placeholder</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">ChildComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">height</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-number\">600</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">width</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-number\">600</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">AutoSizerChildProps</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">width</span><span class=\"tok-punctuation\">}</span><span class=\"\"> x </span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">height</span><span class=\"tok-punctuation\">}</span><span class=\"\"> pixels</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
 }
\ No newline at end of file
diff --git a/public/generated/examples/RenderProp.json b/public/generated/examples/RenderProp.json
index 9897297..20c246e 100644
--- a/public/generated/examples/RenderProp.json
+++ b/public/generated/examples/RenderProp.json
@@ -1,3 +1,3 @@
 {
-  "html": "<div><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">AutoSizer</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-virtualized-auto-sizer\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">ExampleComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">props</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">ExampleComponentProps</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName tok-definition\">state</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">setState</span><span class=\"tok-punctuation\">]</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useState</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">AutoSizer</span><span class=\"\"> </span><span class=\"tok-propertyName\">Child</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">height</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-number\">600</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">width</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-number\">800</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">=&#62;</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">        </span><span class=\"tok-comment\">// Render prop can access width and height params,</span><span class=\"\"></span></div>\n<div><span class=\"\">        </span><span class=\"tok-comment\">// as well as the parent component props and state</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
+  "html": "<div><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">AutoSizer</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-virtualized-auto-sizer\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">ExampleComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">props</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">ExampleComponentProps</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName tok-definition\">state</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">setState</span><span class=\"tok-punctuation\">]</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useState</span><span class=\"tok-punctuation\">(</span><span class=\"tok-string\">\"...\"</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">AutoSizer</span><span class=\"\"> </span><span class=\"tok-propertyName\">renderProp</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">height</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-number\">600</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">width</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-number\">800</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">=&#62;</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">        </span><span class=\"tok-comment\">// Render prop can access width and height params,</span><span class=\"\"></span></div>\n<div><span class=\"\">        </span><span class=\"tok-comment\">// as well as the parent component props and state</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index e21e8ea..dbb8552 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,8 +16,8 @@ export default function App() {
         <div>
           <NavLink path="/">Getting started</NavLink>
           <NavSection label="Examples">
-            <NavLink path="/examples/basic-usage">Basic usage</NavLink>
-            <NavLink path="/examples/render-prop">Render prop</NavLink>
+            <NavLink path="/examples/child-component">Child component</NavLink>
+            <NavLink path="/examples/render-prop">Render prop function</NavLink>
           </NavSection>
           <NavSection label="Props">
             <NavLink path="/props/auto-sizer">AutoSizer component</NavLink>
@@ -30,8 +30,8 @@ export default function App() {
           <div>
             This package measures the available width and height of an{" "}
             <code>HTMLElement</code> and passes those values as props to a{" "}
-            <code>Child</code> component. Refer to the{" "}
-            <Link to="/examples/basic-usage">examples</Link> or{" "}
+            <code>ChildComponent</code> or <code>renderProp</code>. Refer to the{" "}
+            <Link to="/examples/child-component">examples</Link> or{" "}
             <Link to="/props/auto-sizer">props</Link> pages for more
             information.
           </div>
diff --git a/src/routes.ts b/src/routes.ts
index 79f3096..2a9db2d 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -3,7 +3,9 @@ import { lazy, type ComponentType, type LazyExoticComponent } from "react";
 export type Route = LazyExoticComponent<ComponentType<unknown>>;
 
 export const routes = {
-  "/examples/basic-usage": lazy(() => import("./routes/BasicUsageRoute")),
+  "/examples/child-component": lazy(
+    () => import("./routes/ChildComponentRoute")
+  ),
   "/examples/render-prop": lazy(() => import("./routes/RenderPropRoute")),
   "/props/auto-sizer": lazy(() => import("./routes/AutoSizerPropsRoute"))
 } satisfies Record<string, Route>;
diff --git a/src/routes/BasicUsageRoute.tsx b/src/routes/BasicUsageRoute.tsx
deleted file mode 100644
index 5be0639..0000000
--- a/src/routes/BasicUsageRoute.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Box, Code, Header } from "react-lib-tools";
-import { html } from "../../public/generated/examples/ChildComponent.json";
-
-export default function BasicUsageRoute() {
-  return (
-    <Box direction="column" gap={4}>
-      <Header section="Examples" title="Basic usage" />
-      <div>
-        <code>AutoSizer</code> measures the available width and height of its
-        parent <code>HTMLElement</code> and passes them as props to a{" "}
-        <code>Child</code> component.
-      </div>
-      <Code html={html} />
-    </Box>
-  );
-}
diff --git a/src/routes/ChildComponentRoute.tsx b/src/routes/ChildComponentRoute.tsx
new file mode 100644
index 0000000..769b9e3
--- /dev/null
+++ b/src/routes/ChildComponentRoute.tsx
@@ -0,0 +1,20 @@
+import { Box, Callout, Code, Header } from "react-lib-tools";
+import { html } from "../../public/generated/examples/ChildComponent.json";
+
+export default function ChildComponentRoute() {
+  return (
+    <Box direction="column" gap={4}>
+      <Header section="Examples" title="Child component" />
+      <div>
+        <code>AutoSizer</code> measures the available width and height of its
+        parent <code>HTMLElement</code> and passes them as props to a child
+        component.
+      </div>
+      <Code html={html} />
+      <Callout intent="primary">
+        The child component is auto-memoized to avoid re-rendering until the
+        size has changed.
+      </Callout>
+    </Box>
+  );
+}
diff --git a/src/routes/RenderPropRoute.tsx b/src/routes/RenderPropRoute.tsx
index 6edcc52..bd39c39 100644
--- a/src/routes/RenderPropRoute.tsx
+++ b/src/routes/RenderPropRoute.tsx
@@ -4,9 +4,9 @@ import { html } from "../../public/generated/examples/RenderProp.json";
 export default function RenderPropRoute() {
   return (
     <Box direction="column" gap={4}>
-      <Header section="Examples" title="Render props" />
+      <Header section="Examples" title="Render prop function" />
       <div>
-        The <code>Child</code> component can also be a{" "}
+        The child of an <code>AutoSizer</code> can also be a{" "}
         <ExternalLink href="https://legacy.reactjs.org/docs/render-props.html">
           render prop
         </ExternalLink>
diff --git a/src/routes/examples/ChildComponent.tsx b/src/routes/examples/ChildComponent.tsx
index 9ef75f7..923c40f 100644
--- a/src/routes/examples/ChildComponent.tsx
+++ b/src/routes/examples/ChildComponent.tsx
@@ -2,16 +2,16 @@ import { AutoSizer, type AutoSizerChildProps } from "react-virtualized-auto-size
 
 function ExampleComponent() {
   return (
-    <AutoSizer Child={Child} />
+    <AutoSizer ChildComponent={ChildComponent} />
   )
 }
 
 // Height and width will be undefined for the initial render (or when server rendering)
 // You can either set default values (as shown below) or render some sort of placeholder
-function Child({ height = 600, width = 600 }: AutoSizerChildProps) {
+function ChildComponent({ height = 600, width = 600 }: AutoSizerChildProps) {
   return <div>{width} x {height} pixels</div>;
 }
 
 // <end>
 
-export { Child, ExampleComponent };
+export { ChildComponent, ExampleComponent };
diff --git a/src/routes/examples/RenderProp.tsx b/src/routes/examples/RenderProp.tsx
index b4a5e06..873589a 100644
--- a/src/routes/examples/RenderProp.tsx
+++ b/src/routes/examples/RenderProp.tsx
@@ -5,14 +5,14 @@ import { useState } from "react";
 import { AutoSizer } from "react-virtualized-auto-sizer";
 
 function ExampleComponent(props: ExampleComponentProps) {
-  const [state, setState] = useState();
+  const [state, setState] = useState("...");
 
   return (
-    <AutoSizer Child={
+    <AutoSizer renderProp={
       ({ height = 600, width = 800 }) => {
         // Render prop can access width and height params,
         // as well as the parent component props and state
-        setState; // hidden
+        setState(""); // hidden
         return `${props}${state}${height}${width}`; // hidden
       }
     } />
@@ -21,6 +21,8 @@ function ExampleComponent(props: ExampleComponentProps) {
 
 // <end>
 
-type ExampleComponentProps = {};
+type ExampleComponentProps = {
+  foo: string;
+};
 
 export { ExampleComponent };