diff --git a/src/components/page-react-timings/App.tsx b/src/components/page-react-timings/App.tsx
index 717710f..9ab9975 100644
--- a/src/components/page-react-timings/App.tsx
+++ b/src/components/page-react-timings/App.tsx
@@ -4,6 +4,7 @@ import { LifeCycleTimings } from "./LifeCycleTimings";
 import { Render } from "./Render";
 import { Event } from "./Event";
 import { Rerender } from "./Rerender";
+import { Context } from "./Context";
 
 export function App() {
   return (
@@ -19,6 +20,9 @@ export function App() {
       <hr />
       <h2>Test re-renders</h2>
       <Rerender />
+      <hr />
+      <h2>Context re-rendering</h2>
+      <Context />
     </>
   );
 }
diff --git a/src/components/page-react-timings/Context.tsx b/src/components/page-react-timings/Context.tsx
new file mode 100644
index 0000000..c9920ca
--- /dev/null
+++ b/src/components/page-react-timings/Context.tsx
@@ -0,0 +1,65 @@
+import * as React from "react";
+import { log } from "./tasks";
+import { DisplayHideButton } from "./DisplayHideButton";
+
+const C = React.createContext(0);
+
+export function Context() {
+  return (
+    <DisplayHideButton label="re-render through Context">
+      <Provider>
+        <PassThrough>
+          <Child />
+        </PassThrough>
+      </Provider>
+    </DisplayHideButton>
+  );
+}
+
+function Provider({ children }: { children?: React.ReactNode }) {
+  const [state, setState] = React.useState(0);
+  const [, setOtherState] = React.useState({});
+  log("render Provider", { tasks: true });
+  return (
+    <div style={{ padding: 2, border: "2px solid red" }}>
+      Provider
+      <div>
+        <button
+          onClick={() => {
+            log("re-render Provider", { tasks: true });
+            setState((v) => v + 1);
+          }}
+        >
+          Update context
+        </button>
+        <button
+          style={{ marginBottom: "0.5em" }}
+          onClick={() => setOtherState({})}
+        >
+          Update local state
+        </button>
+      </div>
+      <C.Provider value={state}>{children}</C.Provider>
+    </div>
+  );
+}
+
+const PassThrough = React.memo(
+  ({ children }: { children?: React.ReactNode }) => {
+    log("render PassThrough");
+    return (
+      <div style={{ padding: 2, border: "2px solid green" }}>
+        <div>PassThrough</div>
+        {children}
+      </div>
+    );
+  }
+);
+
+const Child = React.memo(() => {
+  log("render Child");
+  const value = React.useContext(C);
+  return (
+    <div style={{ padding: 2, border: "2px solid blue" }}>Child {value}</div>
+  );
+});
diff --git a/src/components/page-react-timings/DisplayHideButton.tsx b/src/components/page-react-timings/DisplayHideButton.tsx
new file mode 100644
index 0000000..238790b
--- /dev/null
+++ b/src/components/page-react-timings/DisplayHideButton.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+export function DisplayHideButton({
+  label,
+  children,
+  style,
+}: {
+  label: string;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}) {
+  const [isDisplayed, setIsDisplayed] = React.useState(false);
+
+  return (
+    <>
+      <button
+        style={{ marginBottom: isDisplayed ? "0.5em" : undefined, ...style }}
+        onClick={() => setIsDisplayed((d) => !d)}
+      >
+        {isDisplayed ? "Hide" : "Display"} {label}
+      </button>
+      {isDisplayed && children}
+    </>
+  );
+}
diff --git a/src/components/page-react-timings/Rerender.tsx b/src/components/page-react-timings/Rerender.tsx
index 1490d12..b95aefe 100644
--- a/src/components/page-react-timings/Rerender.tsx
+++ b/src/components/page-react-timings/Rerender.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { animationFrame, log, microTask, task } from "./tasks";
 import { flushSync } from "react-dom";
+import { DisplayHideButton } from "./DisplayHideButton";
 
 let includeFlushSync = false;
 
@@ -28,30 +29,6 @@ export function Rerender() {
   );
 }
 
-function DisplayHideButton({
-  label,
-  children,
-  style,
-}: {
-  label: string;
-  children?: React.ReactNode;
-  style?: React.CSSProperties;
-}) {
-  const [isDisplayed, setIsDisplayed] = React.useState(false);
-
-  return (
-    <>
-      <button
-        style={{ marginBottom: isDisplayed ? "0.5em" : undefined, ...style }}
-        onClick={() => setIsDisplayed((d) => !d)}
-      >
-        {isDisplayed ? "Hide" : "Display"} {label}
-      </button>
-      {isDisplayed && children}
-    </>
-  );
-}
-
 function RerenderInUseEffect() {
   const [, forceUpdate] = React.useState({});