Skip to content

Commit 6b01bf9

Browse files
committed
Remove useMutationEffect docs
facebook/react#14336
1 parent 5708408 commit 6b01bf9

File tree

2 files changed

+4
-15
lines changed

2 files changed

+4
-15
lines changed

content/docs/hooks-faq.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -443,7 +443,7 @@ function Form() {
443443
const [text, updateText] = useState('');
444444
const textRef = useRef();
445445
446-
useMutationEffect(() => {
446+
useLayoutEffect(() => {
447447
textRef.current = text; // Write it to the ref
448448
});
449449
@@ -484,7 +484,7 @@ function useEventCallback(fn, dependencies) {
484484
throw new Error('Cannot call an event handler while rendering.');
485485
});
486486
487-
useMutationEffect(() => {
487+
useLayoutEffect(() => {
488488
ref.current = fn;
489489
}, [fn, ...dependencies]);
490490

content/docs/hooks-reference.md

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ If you're new to Hooks, you might want to check out [the overview](/docs/hooks-o
2222
- [`useMemo`](#usememo)
2323
- [`useRef`](#useref)
2424
- [`useImperativeMethods`](#useimperativemethods)
25-
- [`useMutationEffect`](#usemutationeffect)
2625
- [`useLayoutEffect`](#uselayouteffect)
2726

2827
## Basic Hooks
@@ -123,7 +122,7 @@ The clean-up function runs before the component is removed from the UI to preven
123122

124123
Unlike `componentDidMount` and `componentDidUpdate`, the function passed to `useEffect` fires **after** layout and paint, during a deferred event. This makes it suitable for the many common side effects, like setting up subscriptions and event handlers, because most types of work shouldn't block the browser from updating the screen.
125124

126-
However, not all effects can be deferred. For example, a DOM mutation that is visible to the user must fire synchronously before the next paint so that the user does not perceive a visual inconsistency. (The distinction is conceptually similar to passive versus active event listeners.) For these types of effects, React provides two additional Hooks: [`useMutationEffect`](#usemutationeffect) and [`useLayoutEffect`](#uselayouteffect). These Hooks have the same signature as `useEffect`, and only differ in when they are fired.
125+
However, not all effects can be deferred. For example, a DOM mutation that is visible to the user must fire synchronously before the next paint so that the user does not perceive a visual inconsistency. (The distinction is conceptually similar to passive versus active event listeners.) For these types of effects, React provides one additional Hook called [`useLayoutEffect`](#uselayouteffect). It has the same signature as `useEffect`, and only differs in when it is fired.
127126

128127
Although `useEffect` is deferred until after the browser has painted, it's guaranteed to fire before any new renders. React will always flush a previous render's effects before starting a new update.
129128

@@ -345,19 +344,9 @@ FancyInput = forwardRef(FancyInput);
345344

346345
In this example, a parent component that renders `<FancyInput ref={fancyInputRef} />` would be able to call `fancyInputRef.current.focus()`.
347346

348-
### `useMutationEffect`
349-
350-
The signature is identical to `useEffect`, but it fires synchronously during the same phase that React performs its DOM mutations, before sibling components have been updated. Use this to perform custom DOM mutations.
351-
352-
Prefer the standard `useEffect` when possible to avoid blocking visual updates.
353-
354-
>Note
355-
>
356-
>Avoid reading from the DOM in `useMutationEffect`. If you do, you can cause performance problems by introducing [layout thrash](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing). When reading computed styles or layout information, `useLayoutEffect` is more appropriate.
357-
358347
### `useLayoutEffect`
359348

360-
The signature is identical to `useEffect`, but it fires synchronously *after* all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside `useLayoutEffect` will be flushed synchronously, before the browser has a chance to paint.
349+
The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside `useLayoutEffect` will be flushed synchronously, before the browser has a chance to paint.
361350

362351
Prefer the standard `useEffect` when possible to avoid blocking visual updates.
363352

0 commit comments

Comments
 (0)