Skip to content

Commit 5c18771

Browse files
committed
fix: use functional updater in MemoCounter to avoid stale closure
setNum(num + 1) captures num from the render closure, which goes stale when React.memo skips re-renders. Using setNum(n => n + 1) always reads the latest state.
1 parent 0a7df67 commit 5c18771

1 file changed

Lines changed: 2 additions & 2 deletions

File tree

stories/basic.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const MemoCounter = React.memo(function MemoCounter({count}: {count?: Control<nu
5858
<div style={{padding: 8, border: '1px dashed #999', borderRadius: 4}}>
5959
<div style={{fontSize: 12, color: '#999', marginBottom: 4}}>Child (memo) — renders: {renderCount.current}</div>
6060
<span>{num} </span>
61-
<button onClick={() => setNum(num + 1)}>+1</button>
61+
<button onClick={() => setNum((n) => n + 1)}>+1</button>
6262
</div>
6363
);
6464
}, controlEqual);
@@ -285,7 +285,7 @@ export const WithControlEqual: Story = {
285285
<div>
286286
<div>renders: {renderCount.current}</div>
287287
<span>{num}</span>
288-
<button onClick={() => setNum(num + 1)}>+1</button>
288+
<button onClick={() => setNum((n) => n + 1)}>+1</button>
289289
</div>
290290
);
291291
}, controlEqual);

0 commit comments

Comments
 (0)