-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathbugSolution.js
More file actions
32 lines (25 loc) · 1.03 KB
/
bugSolution.js
File metadata and controls
32 lines (25 loc) · 1.03 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
This solution addresses the concurrent rendering issues by explicitly using a `Promise` to schedule the updates of the external store. This ensures that the update happens after React has completed its rendering cycle, avoiding conflicts between concurrent mode and the store's update mechanism.
```javascript
import { useSyncExternalStore, useState } from 'react';
function ExternalStore() {
const [value, setValue] = useState(0);
const increment = () => {
setValue((prev) => prev + 1);
};
return { value, increment };
}
function MyComponent() {
const { value, increment } = ExternalStore();
const updateExternalStore = async() => {
await new Promise(resolve => setTimeout(resolve, 10));
increment()
}
return (
<div>
<p>Value: {value}</p>
<button onClick={updateExternalStore}>Increment</button>
</div>
);
}
```
By using `Promise`-based asynchronous update management, we prevent race conditions that might occur between React's concurrent rendering and the state changes in the external store.