Skip to content

Commit fdd694f

Browse files
author
Brian Vaughn
authored
Tweaked v17 blog post effects changes (#3273)
1 parent ec07e80 commit fdd694f

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

content/blog/2020-08-10-react-v17-rc.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -162,17 +162,17 @@ useEffect(() => {
162162

163163
Most effects don't need to delay screen updates, so React runs them asynchronously soon after the update has been reflected on the screen. (For the rare cases where you need an effect to block paint, e.g. to measure and position a tooltip, prefer `useLayoutEffect`.)
164164

165-
However, the effect *cleanup* function, when it exists, used to run synchronously in React 16. We've found that, similar to `componentWillUnmount` being synchronous in classes, this is not ideal for larger apps because it slows down large screen transitions (e.g. switching tabs).
165+
However, when a component is unmounting, effect *cleanup* functions used to run synchronously (similar to `componentWillUnmount` being synchronous in classes). We've found that this is not ideal for larger apps because it slows down large screen transitions (e.g. switching tabs).
166166

167-
**In React 17, the effect cleanup function also runs asynchronously -- for example, if the component is unmounting, the cleanup will run _after_ the screen has been updated.**
167+
**In React 17, the effect cleanup function will always runs asynchronously -- for example, if the component is unmounting, the cleanup will run _after_ the screen has been updated.**
168168

169-
This mirrors how the effects themselves run more closely. In the rare cases where you might want to rely on the synchronous execution, you can switch to `useLayoutEffect` instead.
169+
This mirrors how the effects themselves run more closely. In the rare cases where you might want to rely on the synchronous execution, you can switch to `useLayoutEffect` instead.
170170

171171
>Note
172172
>
173173
>You might be wondering whether this means that you'll now be unable to fix warnings about `setState` on unmounted components. Don't worry -- React specifically checks for this case, and does *not* fire `setState` warnings in the short gap between unmounting and the cleanup. **So code cancelling requests or intervals can almost always stay the same.**
174174
175-
Additionally, React 17 executes the cleanup functions in the same order as the effects, according to their position in the tree. Previously, this order was occasionally different.
175+
Additionally, React 17 will always execute all effect cleanup functions (for all components) before it runs any new effects. React 16 only guaranteed this ordering for effects within a component.
176176

177177
#### Potential Issues {#potential-issues}
178178

0 commit comments

Comments
 (0)