Skip to content

Commit 812e7e8

Browse files
authored
Apply suggestions from code review
1 parent cb084e5 commit 812e7e8

File tree

1 file changed

+18
-17
lines changed

1 file changed

+18
-17
lines changed

src/content/reference/react-dom/flushSync.md

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -139,21 +139,21 @@ Most of the time, `flushSync` can be avoided, so use `flushSync` as a last resor
139139
### I'm getting an error: "flushSync was called from inside a lifecycle method" {/*im-getting-an-error-flushsync-was-called-from-inside-a-lifecycle-method*/}
140140

141141

142-
React cannot `flushSync` in the middle of a render. If you call `flushSync` in render, it will noop and you'll see a warning:
142+
React cannot `flushSync` in the middle of a render. If you do, it will noop and warn:
143143

144144
<ConsoleBlock level="error">
145145

146146
Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
147147

148148
</ConsoleBlock>
149149

150-
This can happen when you call `flushSync` inside:
150+
This includes calling `flushSync` inside:
151151

152-
- Class component lifecycle methods (`componentDidMount`, `componentDidUpdate`, etc.)
153-
- `useLayoutEffect` or `useEffect` hooks
154-
- During the render phase of a component
152+
- During the render phase of a component.
153+
- `useLayoutEffect` or `useEffect` hooks.
154+
- Class component lifecycle methods.
155155

156-
For example, if you call `flushSync` in an Effect:
156+
For example, calling `flushSync` in an Effect will noop and warn:
157157

158158
```js {1-2,4-6}
159159
import { useEffect } from 'react';
@@ -171,7 +171,18 @@ function MyComponent() {
171171
}
172172
```
173173

174-
To fix this, move the `flushSync` call outside of the rendering cycle:
174+
To fix this, you usually want to move the `flushSync` call to an event:
175+
176+
```js {2-6}
177+
function handleClick() {
178+
// ✅ Correct: flushSync in event handlers is safe
179+
flushSync(() => {
180+
setSomething(newValue);
181+
});
182+
}
183+
184+
185+
If it's difficult to move to an event, you can move the flush outside render using a microtask:
175186
176187
```js {3-7}
177188
useEffect(() => {
@@ -182,15 +193,5 @@ useEffect(() => {
182193
});
183194
});
184195
}, []);
185-
```
186-
187-
Or move the `flushSync` call to an event handler:
188196
189-
```js {2-6}
190-
function handleClick() {
191-
// ✅ Correct: flushSync in event handlers is safe
192-
flushSync(() => {
193-
setSomething(newValue);
194-
});
195-
}
196197
```

0 commit comments

Comments
 (0)