# fix(jsx): handle useSyncExternalStore subscription and snapshot changes

The reported issue can be addressed by making the subscription effect depend on subscribe.

| | |
| --- | --- |
| Status | MERGED |
| Source | github:honojs/hono#5166 |
| Original | https://github.com/honojs/hono/pull/5166 |
| Workspace | Showcase |
| Tags | github, code, typescript |

## What it does

**Most of this change is one file: dom.test.tsx holds 81% of the edited lines.**

2 files changed across 2 areas of honojs/hono, 145 added and 13 removed.

The reported issue can be addressed by making the subscription effect depend on subscribe.

**Diagram: Where the change landed. Node size is not to scale; the line counts are exact.**

- hono (2 files, 158 lines) [accent]
- Tests (1 file, 128 lines) [good]
- Source (1 file, 30 lines) [accent]
- dom.test.tsx (+126 −2) [bad]
- hono -> Tests
- hono -> Source
- Tests -> dom.test.tsx : heaviest

- **Heaviest file.** src/jsx/hooks/dom.test.tsx, +126 −2, which is 81% of the change.
- **Tests moved with it.** 1 test file changed alongside 1 source file.
- **Spread.** 2 files, 158 changed lines in total.

## How it works

**The largest single edit is in dom.test.tsx.**

Quoted verbatim from the diff. This is the biggest hunk by changed lines, which is where a reviewer's attention usually belongs first.

**Diagram: Source files matched to test files by filename. A name-based match, so treat it as a prompt to look rather than as proof.**

- NO TEST CHANGED (1)
  - index.ts (+19 −11) [bad]
- TEST CHANGED TOO (0)
  - no source file paired [bad]

```typescript
@@ -695,16 +696,138 @@ describe('Hooks', () => {
       await new Promise((r) => setTimeout(r))
       expect(root.innerHTML).toBe('<button>toggle</button>')
       expect(unsubscribe).toBeCalled()
+      count = 1
       root.querySelector('button')?.click()
       await new Promise((r) => setTimeout(r))
       expect(root.innerHTML).toBe('<div>1</div><button>toggle</button>')
     })
 
+    it('updates the snapshot when subscribe changes', async () => {
+      const unsubscribeA = vi.fn()
+      const subscribeA = vi.fn(() => unsubscribeA)
+      const unsubscribeB = vi.fn()
+      const subscribeB = vi.fn(() => unsubscribeB)
+      const stores = [
+        { subscribe: subscribeA, getSnapshot: () => 'a1' },
+        { subscribe: subscribeB, getSnapshot: () => 'b0' },
+      ]
+
+      const App = () => {
+        const [index, setIndex] = useState(0)
```

_src/jsx/hooks/dom.test.tsx, +126 −2. The largest hunk in the largest file._

## File map

**Every file this change touches, heaviest first.**

Role is inferred from the path and risk from the path and the line count. Neither was read from the code.

| File | Role | Change | Risk |
| --- | --- | --- | --- |
| `src/jsx/hooks/dom.test.tsx` | test coverage | modified, +126 −2 | low |
| `src/jsx/hooks/index.ts` | application code | modified, +19 −11 | low |

## Receipts

**Where each number above comes from.**

All of it is arithmetic over the file list and the check results, so it can be recomputed from the source.

- **Claim.** 2 files changed, +145 −13.
  - Evidence: src/jsx/hooks/dom.test.tsx (+126 −2); src/jsx/hooks/index.ts (+19 −11)
  - Where: https://github.com/honojs/hono/pull/5166
- **Claim.** dom.test.tsx carries 81% of the changed lines.
  - Evidence: 128 of 158 changed lines
  - Where: src/jsx/hooks/dom.test.tsx
- **Claim.** It arrived as 4 commits.
  - Evidence: fix(jsx): resubscribe when the external store changes
  - Where: commit 36b2f3e
- **Claim.** CI reports 0 failing of 20.
  - Evidence: codecov/patch
  - Where: CI check: codecov/patch
- **Claim.** The change drew 5 comments.
  - Evidence: ## Bundle size check | | [main](https://github.com/honojs/hono/tree/main) ([26d8e42](https://github.com/honojs/hono/commit/26d8e42bfff7eb78f…
  - Where: comment by github-actions[bot]

## Merge order

**A reading order for the review, not a deployment plan.**

Ordered by how expensive each part is to get wrong, which is a structural property rather than an informed one.

1. **Then dom.test.tsx.** The largest single file in the change, +126 −2.
2. **Finish with the tests.** 1 test file changed. Reading them last tells you what the author believed they were changing.

## What this brief could not check

- No language model read this change. Every statement here is computed from file paths, line counts, and CI status, so it describes the shape of the diff and not what the diff means.