{"parents":["806aaa2e21edf9e1b9317c4bf4157e422b693d14"],"files":[{"status":"M","path":"packages\/react-debug-tools\/src\/ReactDebugHooks.js"},{"status":"M","path":"packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspectionIntegration-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationHooks-test.js"},{"status":"M","path":"packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberHooks.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberHooks.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactHookEffectTags.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactInternalTypes.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.js"},{"status":"M","path":"packages\/react-server\/src\/ReactFizzHooks.js"},{"status":"M","path":"packages\/react-server\/src\/ReactFlightServer.js"},{"status":"M","path":"packages\/react-suspense-test-utils\/src\/ReactSuspenseTestUtils.js"},{"status":"M","path":"packages\/react\/index.classic.fb.js"},{"status":"M","path":"packages\/react\/index.experimental.js"},{"status":"M","path":"packages\/react\/index.js"},{"status":"M","path":"packages\/react\/index.modern.fb.js"},{"status":"M","path":"packages\/react\/src\/React.js"},{"status":"M","path":"packages\/react\/src\/ReactHooks.js"}],"patch":"diff --git a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\nindex 94fbaeec05..c1258c2dcd 100644\n--- a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n+++ b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n@@ -78,6 +78,7 @@ function getPrimitiveStackCache(): Map> {\n Dispatcher.useCacheRefresh();\n }\n Dispatcher.useLayoutEffect(() => {});\n+ Dispatcher.useInsertionEffect(() => {});\n Dispatcher.useEffect(() => {});\n Dispatcher.useImperativeHandle(undefined, () => null);\n Dispatcher.useDebugValue(null);\n@@ -191,6 +192,18 @@ function useLayoutEffect(\n });\n }\n \n+function useInsertionEffect(\n+ create: () => mixed,\n+ inputs: Array | void | null,\n+): void {\n+ nextHook();\n+ hookLog.push({\n+ primitive: 'InsertionEffect',\n+ stackError: new Error(),\n+ value: create,\n+ });\n+}\n+\n function useEffect(\n create: () => (() => void) | void,\n inputs: Array | void | null,\n@@ -338,6 +351,7 @@ const Dispatcher: DispatcherType = {\n useImperativeHandle,\n useDebugValue,\n useLayoutEffect,\n+ useInsertionEffect,\n useMemo,\n useReducer,\n useRef,\ndiff --git a\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspectionIntegration-test.js b\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspectionIntegration-test.js\nindex 1c7cb75088..b13bec22d2 100644\n--- a\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspectionIntegration-test.js\n+++ b\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspectionIntegration-test.js\n@@ -268,6 +268,183 @@ describe('ReactHooksInspectionIntegration', () => {\n ]);\n });\n \n+ \/\/ @gate experimental || www\n+ it('should inspect the current state of all stateful hooks, including useInsertionEffect', () => {\n+ const useInsertionEffect = React.unstable_useInsertionEffect;\n+ const outsideRef = React.createRef();\n+ function effect() {}\n+ function Foo(props) {\n+ const [state1, setState] = React.useState('a');\n+ const [state2, dispatch] = React.useReducer((s, a) => a.value, 'b');\n+ const ref = React.useRef('c');\n+\n+ useInsertionEffect(effect);\n+ React.useLayoutEffect(effect);\n+ React.useEffect(effect);\n+\n+ React.useImperativeHandle(\n+ outsideRef,\n+ () => {\n+ \/\/ Return a function so that jest treats them as non-equal.\n+ return function Instance() {};\n+ },\n+ [],\n+ );\n+\n+ React.useMemo(() => state1 + state2, [state1]);\n+\n+ function update() {\n+ act(() => {\n+ setState('A');\n+ });\n+ act(() => {\n+ dispatch({value: 'B'});\n+ });\n+ ref.current = 'C';\n+ }\n+ const memoizedUpdate = React.useCallback(update, []);\n+ return (\n+

\n+ {state1} {state2}\n+ <\/div>\n+ );\n+ }\n+ let renderer;\n+ act(() => {\n+ renderer = ReactTestRenderer.create();\n+ });\n+\n+ let childFiber = renderer.root.findByType(Foo)._currentFiber();\n+\n+ const {onClick: updateStates} = renderer.root.findByType('div').props;\n+\n+ let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);\n+ expect(tree).toEqual([\n+ {\n+ isStateEditable: true,\n+ id: 0,\n+ name: 'State',\n+ value: 'a',\n+ subHooks: [],\n+ },\n+ {\n+ isStateEditable: true,\n+ id: 1,\n+ name: 'Reducer',\n+ value: 'b',\n+ subHooks: [],\n+ },\n+ {isStateEditable: false, id: 2, name: 'Ref', value: 'c', subHooks: []},\n+ {\n+ isStateEditable: false,\n+ id: 3,\n+ name: 'InsertionEffect',\n+ value: effect,\n+ subHooks: [],\n+ },\n+ {\n+ isStateEditable: false,\n+ id: 4,\n+ name: 'LayoutEffect',\n+ value: effect,\n+ subHooks: [],\n+ },\n+ {\n+ isStateEditable: false,\n+ id: 5,\n+ name: 'Effect',\n+ value: effect,\n+ subHooks: [],\n+ },\n+ {\n+ isStateEditable: false,\n+ id: 6,\n+ name: 'ImperativeHandle',\n+ value: outsideRef.current,\n+ subHooks: [],\n+ },\n+ {\n+ isStateEditable: false,\n+ id: 7,\n+ name: 'Memo',\n+ value: 'ab',\n+ subHooks: [],\n+ },\n+ {\n+ isStateEditable: false,\n+ id: 8,\n+ name: 'Callback',\n+ value: updateStates,\n+ subHooks: [],\n+ },\n+ ]);\n+\n+ updateStates();\n+\n+ childFiber = renderer.root.findByType(Foo)._currentFiber();\n+ tree = ReactDebugTools.inspectHooksOfFiber(childFiber);\n+\n+ expect(tree).toEqual([\n+ {\n+ isStateEditable: true,\n+ id: 0,\n+ name: 'State',\n+ value: 'A',\n+ subHooks: [],\n+ },\n+ {\n+ isStateEditable: true,\n+ id: 1,\n+ name: 'Reducer',\n+ value: 'B',\n+ subHooks: [],\n+ },\n+ {isStateEditable: false, id: 2, name: 'Ref', value: 'C', subHooks: []},\n+ {\n+ isStateEditable: false,\n+ id: 3,\n+ name: 'InsertionEffect',\n+ value: effect,\n+ subHooks: [],\n+ },\n+ {\n+ isStateEditable: false,\n+ id: 4,\n+ name: 'LayoutEffect',\n+ value: effect,\n+ subHooks: [],\n+ },\n+ {\n+ isStateEditable: false,\n+ id: 5,\n+ name: 'Effect',\n+ value: effect,\n+ subHooks: [],\n+ },\n+ {\n+ isStateEditable: false,\n+ id: 6,\n+ name: 'ImperativeHandle',\n+ value: outsideRef.current,\n+ subHooks: [],\n+ },\n+ {\n+ isStateEditable: false,\n+ id: 7,\n+ name: 'Memo',\n+ value: 'Ab',\n+ subHooks: [],\n+ },\n+ {\n+ isStateEditable: false,\n+ id: 8,\n+ name: 'Callback',\n+ value: updateStates,\n+ subHooks: [],\n+ },\n+ ]);\n+ });\n+\n it('should inspect the value of the current provider in useContext', () => {\n const MyContext = React.createContext('default');\n function Foo(props) {\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationHooks-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationHooks-test.js\nindex cfd23f843c..53a34b25ff 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationHooks-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationHooks-test.js\n@@ -27,6 +27,7 @@ let useCallback;\n let useMemo;\n let useRef;\n let useImperativeHandle;\n+let useInsertionEffect;\n let useLayoutEffect;\n let useDebugValue;\n let useOpaqueIdentifier;\n@@ -54,6 +55,7 @@ function initModules() {\n useRef = React.useRef;\n useDebugValue = React.useDebugValue;\n useImperativeHandle = React.useImperativeHandle;\n+ useInsertionEffect = React.unstable_useInsertionEffect;\n useLayoutEffect = React.useLayoutEffect;\n useOpaqueIdentifier = React.unstable_useOpaqueIdentifier;\n forwardRef = React.forwardRef;\n@@ -638,6 +640,22 @@ describe('ReactDOMServerHooks', () => {\n expect(domNode.textContent).toEqual('Count: 0');\n });\n });\n+ describe('useInsertionEffect', () => {\n+ \/\/ @gate experimental || www\n+ it('should warn when invoked during render', async () => {\n+ function Counter() {\n+ useInsertionEffect(() => {\n+ throw new Error('should not be invoked');\n+ });\n+\n+ return ;\n+ }\n+ const domNode = await serverRender(, 1);\n+ expect(clearYields()).toEqual(['Count: 0']);\n+ expect(domNode.tagName).toEqual('SPAN');\n+ expect(domNode.textContent).toEqual('Count: 0');\n+ });\n+ });\n \n describe('useLayoutEffect', () => {\n it('should warn when invoked during render', async () => {\ndiff --git a\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js b\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js\nindex 0712d9fee9..bfc21b0623 100644\n--- a\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js\n+++ b\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js\n@@ -385,6 +385,22 @@ function useRef(initialValue: T): {|current: T|} {\n }\n }\n \n+function useInsertionEffect(\n+ create: () => mixed,\n+ inputs: Array | void | null,\n+) {\n+ if (__DEV__) {\n+ currentHookNameInDev = 'useInsertionEffect';\n+ console.error(\n+ 'useInsertionEffect does nothing on the server, because its effect cannot ' +\n+ \"be encoded into the server renderer's output format. This will lead \" +\n+ 'to a mismatch between the initial, non-hydrated UI and the intended ' +\n+ 'UI. To avoid this, useInsertionEffect should only be used in ' +\n+ 'components that render exclusively on the client.',\n+ );\n+ }\n+}\n+\n export function useLayoutEffect(\n create: () => (() => void) | void,\n inputs: Array | void | null,\n@@ -508,6 +524,7 @@ export const Dispatcher: DispatcherType = {\n useReducer,\n useRef,\n useState,\n+ useInsertionEffect,\n useLayoutEffect,\n useCallback,\n \/\/ useImperativeHandle is not run in the server environment\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\nindex bde9173a28..85b5b778ba 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n@@ -136,6 +136,7 @@ import {\n NoFlags as NoHookEffect,\n HasEffect as HookHasEffect,\n Layout as HookLayout,\n+ Insertion as HookInsertion,\n Passive as HookPassive,\n } from '.\/ReactHookEffectTags';\n import {didWarnAboutReassigningProps} from '.\/ReactFiberBeginWork.new';\n@@ -525,6 +526,8 @@ function commitHookEffectListMount(tag: HookFlags, finishedWork: Fiber) {\n let hookName;\n if ((effect.tag & HookLayout) !== NoFlags) {\n hookName = 'useLayoutEffect';\n+ } else if ((effect.tag & HookInsertion) !== NoFlags) {\n+ hookName = 'useInsertionEffect';\n } else {\n hookName = 'useEffect';\n }\n@@ -1153,7 +1156,10 @@ function commitUnmount(\n do {\n const {destroy, tag} = effect;\n if (destroy !== undefined) {\n- if ((tag & HookLayout) !== NoHookEffect) {\n+ if (\n+ (tag & HookInsertion) !== NoHookEffect ||\n+ (tag & HookLayout) !== NoHookEffect\n+ ) {\n if (\n enableProfilerTimer &&\n enableProfilerCommitHooks &&\n@@ -1738,6 +1744,13 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {\n case ForwardRef:\n case MemoComponent:\n case SimpleMemoComponent: {\n+ commitHookEffectListUnmount(\n+ HookInsertion | HookHasEffect,\n+ finishedWork,\n+ finishedWork.return,\n+ );\n+ commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);\n+\n \/\/ Layout effects are destroyed during the mutation phase so that all\n \/\/ destroy functions for all fibers are called before any create functions.\n \/\/ This prevents sibling component effects from interfering with each other,\n@@ -1810,6 +1823,12 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {\n case ForwardRef:\n case MemoComponent:\n case SimpleMemoComponent: {\n+ commitHookEffectListUnmount(\n+ HookInsertion | HookHasEffect,\n+ finishedWork,\n+ finishedWork.return,\n+ );\n+ commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);\n \/\/ Layout effects are destroyed during the mutation phase so that all\n \/\/ destroy functions for all fibers are called before any create functions.\n \/\/ This prevents sibling component effects from interfering with each other,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\nindex 241bc5a5db..9613f0b168 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n@@ -136,6 +136,7 @@ import {\n NoFlags as NoHookEffect,\n HasEffect as HookHasEffect,\n Layout as HookLayout,\n+ Insertion as HookInsertion,\n Passive as HookPassive,\n } from '.\/ReactHookEffectTags';\n import {didWarnAboutReassigningProps} from '.\/ReactFiberBeginWork.old';\n@@ -525,6 +526,8 @@ function commitHookEffectListMount(tag: HookFlags, finishedWork: Fiber) {\n let hookName;\n if ((effect.tag & HookLayout) !== NoFlags) {\n hookName = 'useLayoutEffect';\n+ } else if ((effect.tag & HookInsertion) !== NoFlags) {\n+ hookName = 'useInsertionEffect';\n } else {\n hookName = 'useEffect';\n }\n@@ -1153,7 +1156,10 @@ function commitUnmount(\n do {\n const {destroy, tag} = effect;\n if (destroy !== undefined) {\n- if ((tag & HookLayout) !== NoHookEffect) {\n+ if (\n+ (tag & HookInsertion) !== NoHookEffect ||\n+ (tag & HookLayout) !== NoHookEffect\n+ ) {\n if (\n enableProfilerTimer &&\n enableProfilerCommitHooks &&\n@@ -1738,6 +1744,13 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {\n case ForwardRef:\n case MemoComponent:\n case SimpleMemoComponent: {\n+ commitHookEffectListUnmount(\n+ HookInsertion | HookHasEffect,\n+ finishedWork,\n+ finishedWork.return,\n+ );\n+ commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);\n+\n \/\/ Layout effects are destroyed during the mutation phase so that all\n \/\/ destroy functions for all fibers are called before any create functions.\n \/\/ This prevents sibling component effects from interfering with each other,\n@@ -1810,6 +1823,12 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {\n case ForwardRef:\n case MemoComponent:\n case SimpleMemoComponent: {\n+ commitHookEffectListUnmount(\n+ HookInsertion | HookHasEffect,\n+ finishedWork,\n+ finishedWork.return,\n+ );\n+ commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);\n \/\/ Layout effects are destroyed during the mutation phase so that all\n \/\/ destroy functions for all fibers are called before any create functions.\n \/\/ This prevents sibling component effects from interfering with each other,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js\nindex 7f46304c63..4b4d7ad7e9 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js\n@@ -75,6 +75,7 @@ import {\n HasEffect as HookHasEffect,\n Layout as HookLayout,\n Passive as HookPassive,\n+ Insertion as HookInsertion,\n } from '.\/ReactHookEffectTags';\n import {\n getWorkInProgressRoot,\n@@ -1708,6 +1709,20 @@ function updateEffect(\n return updateEffectImpl(PassiveEffect, HookPassive, create, deps);\n }\n \n+function mountInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+): void {\n+ return mountEffectImpl(UpdateEffect, HookInsertion, create, deps);\n+}\n+\n+function updateInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+): void {\n+ return updateEffectImpl(UpdateEffect, HookInsertion, create, deps);\n+}\n+\n function mountLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\n@@ -2310,6 +2325,7 @@ export const ContextOnlyDispatcher: Dispatcher = {\n useContext: throwInvalidHookError,\n useEffect: throwInvalidHookError,\n useImperativeHandle: throwInvalidHookError,\n+ useInsertionEffect: throwInvalidHookError,\n useLayoutEffect: throwInvalidHookError,\n useMemo: throwInvalidHookError,\n useReducer: throwInvalidHookError,\n@@ -2337,6 +2353,7 @@ const HooksDispatcherOnMount: Dispatcher = {\n useEffect: mountEffect,\n useImperativeHandle: mountImperativeHandle,\n useLayoutEffect: mountLayoutEffect,\n+ useInsertionEffect: mountInsertionEffect,\n useMemo: mountMemo,\n useReducer: mountReducer,\n useRef: mountRef,\n@@ -2362,6 +2379,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {\n useContext: readContext,\n useEffect: updateEffect,\n useImperativeHandle: updateImperativeHandle,\n+ useInsertionEffect: updateInsertionEffect,\n useLayoutEffect: updateLayoutEffect,\n useMemo: updateMemo,\n useReducer: updateReducer,\n@@ -2388,6 +2406,7 @@ const HooksDispatcherOnRerender: Dispatcher = {\n useContext: readContext,\n useEffect: updateEffect,\n useImperativeHandle: updateImperativeHandle,\n+ useInsertionEffect: updateInsertionEffect,\n useLayoutEffect: updateLayoutEffect,\n useMemo: updateMemo,\n useReducer: rerenderReducer,\n@@ -2468,6 +2487,15 @@ if (__DEV__) {\n checkDepsAreArrayDev(deps);\n return mountImperativeHandle(ref, create, deps);\n },\n+ useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+ ): void {\n+ currentHookNameInDev = 'useInsertionEffect';\n+ mountHookTypesDev();\n+ checkDepsAreArrayDev(deps);\n+ return mountInsertionEffect(create, deps);\n+ },\n useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\n@@ -2602,6 +2630,14 @@ if (__DEV__) {\n updateHookTypesDev();\n return mountImperativeHandle(ref, create, deps);\n },\n+ useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+ ): void {\n+ currentHookNameInDev = 'useInsertionEffect';\n+ updateHookTypesDev();\n+ return mountInsertionEffect(create, deps);\n+ },\n useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\n@@ -2734,6 +2770,14 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateImperativeHandle(ref, create, deps);\n },\n+ useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+ ): void {\n+ currentHookNameInDev = 'useInsertionEffect';\n+ updateHookTypesDev();\n+ return updateInsertionEffect(create, deps);\n+ },\n useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\n@@ -2867,6 +2911,14 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateImperativeHandle(ref, create, deps);\n },\n+ useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+ ): void {\n+ currentHookNameInDev = 'useInsertionEffect';\n+ updateHookTypesDev();\n+ return updateInsertionEffect(create, deps);\n+ },\n useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\n@@ -3004,6 +3056,15 @@ if (__DEV__) {\n mountHookTypesDev();\n return mountImperativeHandle(ref, create, deps);\n },\n+ useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+ ): void {\n+ currentHookNameInDev = 'useInsertionEffect';\n+ warnInvalidHookAccess();\n+ mountHookTypesDev();\n+ return mountInsertionEffect(create, deps);\n+ },\n useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\n@@ -3152,6 +3213,15 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateImperativeHandle(ref, create, deps);\n },\n+ useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+ ): void {\n+ currentHookNameInDev = 'useInsertionEffect';\n+ warnInvalidHookAccess();\n+ updateHookTypesDev();\n+ return updateInsertionEffect(create, deps);\n+ },\n useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\n@@ -3301,6 +3371,15 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateImperativeHandle(ref, create, deps);\n },\n+ useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+ ): void {\n+ currentHookNameInDev = 'useInsertionEffect';\n+ warnInvalidHookAccess();\n+ updateHookTypesDev();\n+ return updateInsertionEffect(create, deps);\n+ },\n useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js\nindex cbade34d43..a03dcd6ca2 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js\n@@ -75,6 +75,7 @@ import {\n HasEffect as HookHasEffect,\n Layout as HookLayout,\n Passive as HookPassive,\n+ Insertion as HookInsertion,\n } from '.\/ReactHookEffectTags';\n import {\n getWorkInProgressRoot,\n@@ -1708,6 +1709,20 @@ function updateEffect(\n return updateEffectImpl(PassiveEffect, HookPassive, create, deps);\n }\n \n+function mountInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+): void {\n+ return mountEffectImpl(UpdateEffect, HookInsertion, create, deps);\n+}\n+\n+function updateInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+): void {\n+ return updateEffectImpl(UpdateEffect, HookInsertion, create, deps);\n+}\n+\n function mountLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\n@@ -2310,6 +2325,7 @@ export const ContextOnlyDispatcher: Dispatcher = {\n useContext: throwInvalidHookError,\n useEffect: throwInvalidHookError,\n useImperativeHandle: throwInvalidHookError,\n+ useInsertionEffect: throwInvalidHookError,\n useLayoutEffect: throwInvalidHookError,\n useMemo: throwInvalidHookError,\n useReducer: throwInvalidHookError,\n@@ -2337,6 +2353,7 @@ const HooksDispatcherOnMount: Dispatcher = {\n useEffect: mountEffect,\n useImperativeHandle: mountImperativeHandle,\n useLayoutEffect: mountLayoutEffect,\n+ useInsertionEffect: mountInsertionEffect,\n useMemo: mountMemo,\n useReducer: mountReducer,\n useRef: mountRef,\n@@ -2362,6 +2379,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {\n useContext: readContext,\n useEffect: updateEffect,\n useImperativeHandle: updateImperativeHandle,\n+ useInsertionEffect: updateInsertionEffect,\n useLayoutEffect: updateLayoutEffect,\n useMemo: updateMemo,\n useReducer: updateReducer,\n@@ -2388,6 +2406,7 @@ const HooksDispatcherOnRerender: Dispatcher = {\n useContext: readContext,\n useEffect: updateEffect,\n useImperativeHandle: updateImperativeHandle,\n+ useInsertionEffect: updateInsertionEffect,\n useLayoutEffect: updateLayoutEffect,\n useMemo: updateMemo,\n useReducer: rerenderReducer,\n@@ -2468,6 +2487,15 @@ if (__DEV__) {\n checkDepsAreArrayDev(deps);\n return mountImperativeHandle(ref, create, deps);\n },\n+ useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+ ): void {\n+ currentHookNameInDev = 'useInsertionEffect';\n+ mountHookTypesDev();\n+ checkDepsAreArrayDev(deps);\n+ return mountInsertionEffect(create, deps);\n+ },\n useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\n@@ -2602,6 +2630,14 @@ if (__DEV__) {\n updateHookTypesDev();\n return mountImperativeHandle(ref, create, deps);\n },\n+ useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+ ): void {\n+ currentHookNameInDev = 'useInsertionEffect';\n+ updateHookTypesDev();\n+ return mountInsertionEffect(create, deps);\n+ },\n useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\n@@ -2734,6 +2770,14 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateImperativeHandle(ref, create, deps);\n },\n+ useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+ ): void {\n+ currentHookNameInDev = 'useInsertionEffect';\n+ updateHookTypesDev();\n+ return updateInsertionEffect(create, deps);\n+ },\n useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\n@@ -2867,6 +2911,14 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateImperativeHandle(ref, create, deps);\n },\n+ useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+ ): void {\n+ currentHookNameInDev = 'useInsertionEffect';\n+ updateHookTypesDev();\n+ return updateInsertionEffect(create, deps);\n+ },\n useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\n@@ -3004,6 +3056,15 @@ if (__DEV__) {\n mountHookTypesDev();\n return mountImperativeHandle(ref, create, deps);\n },\n+ useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+ ): void {\n+ currentHookNameInDev = 'useInsertionEffect';\n+ warnInvalidHookAccess();\n+ mountHookTypesDev();\n+ return mountInsertionEffect(create, deps);\n+ },\n useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\n@@ -3152,6 +3213,15 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateImperativeHandle(ref, create, deps);\n },\n+ useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+ ): void {\n+ currentHookNameInDev = 'useInsertionEffect';\n+ warnInvalidHookAccess();\n+ updateHookTypesDev();\n+ return updateInsertionEffect(create, deps);\n+ },\n useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\n@@ -3301,6 +3371,15 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateImperativeHandle(ref, create, deps);\n },\n+ useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+ ): void {\n+ currentHookNameInDev = 'useInsertionEffect';\n+ warnInvalidHookAccess();\n+ updateHookTypesDev();\n+ return updateInsertionEffect(create, deps);\n+ },\n useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\ndiff --git a\/packages\/react-reconciler\/src\/ReactHookEffectTags.js b\/packages\/react-reconciler\/src\/ReactHookEffectTags.js\nindex 0ccd7e2ccb..54be635a62 100644\n--- a\/packages\/react-reconciler\/src\/ReactHookEffectTags.js\n+++ b\/packages\/react-reconciler\/src\/ReactHookEffectTags.js\n@@ -9,11 +9,12 @@\n \n export type HookFlags = number;\n \n-export const NoFlags = \/* *\/ 0b000;\n+export const NoFlags = \/* *\/ 0b0000;\n \n \/\/ Represents whether effect should fire.\n-export const HasEffect = \/* *\/ 0b001;\n+export const HasEffect = \/* *\/ 0b0001;\n \n \/\/ Represents the phase in which the effect (not the clean-up) fires.\n-export const Layout = \/* *\/ 0b010;\n-export const Passive = \/* *\/ 0b100;\n+export const Insertion = \/* *\/ 0b0010;\n+export const Layout = \/* *\/ 0b0100;\n+export const Passive = \/* *\/ 0b1000;\ndiff --git a\/packages\/react-reconciler\/src\/ReactInternalTypes.js b\/packages\/react-reconciler\/src\/ReactInternalTypes.js\nindex 33bdb24af0..f07fd4634b 100644\n--- a\/packages\/react-reconciler\/src\/ReactInternalTypes.js\n+++ b\/packages\/react-reconciler\/src\/ReactInternalTypes.js\n@@ -33,6 +33,7 @@ export type HookType =\n | 'useContext'\n | 'useRef'\n | 'useEffect'\n+ | 'useInsertionEffect'\n | 'useLayoutEffect'\n | 'useCallback'\n | 'useMemo'\n@@ -286,6 +287,10 @@ export type Dispatcher = {|\n create: () => (() => void) | void,\n deps: Array | void | null,\n ): void,\n+ useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+ ): void,\n useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.js\nindex 9069ca71c7..55b9abdcd7 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.js\n@@ -22,6 +22,7 @@ let Suspense;\n let useState;\n let useReducer;\n let useEffect;\n+let useInsertionEffect;\n let useLayoutEffect;\n let useCallback;\n let useMemo;\n@@ -46,6 +47,7 @@ describe('ReactHooksWithNoopRenderer', () => {\n useState = React.useState;\n useReducer = React.useReducer;\n useEffect = React.useEffect;\n+ useInsertionEffect = React.unstable_useInsertionEffect;\n useLayoutEffect = React.useLayoutEffect;\n useCallback = React.useCallback;\n useMemo = React.useMemo;\n@@ -2682,6 +2684,415 @@ describe('ReactHooksWithNoopRenderer', () => {\n });\n });\n \n+ describe('useInsertionEffect', () => {\n+ \/\/ @gate experimental || www\n+ it('fires insertion effects after snapshots on update', () => {\n+ function CounterA(props) {\n+ useInsertionEffect(() => {\n+ Scheduler.unstable_yieldValue(`Create insertion`);\n+ return () => {\n+ Scheduler.unstable_yieldValue(`Destroy insertion`);\n+ };\n+ });\n+ return null;\n+ }\n+\n+ class CounterB extends React.Component {\n+ getSnapshotBeforeUpdate(prevProps, prevState) {\n+ Scheduler.unstable_yieldValue(`Get Snapshot`);\n+ return null;\n+ }\n+\n+ componentDidUpdate() {}\n+\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ act(() => {\n+ ReactNoop.render(\n+ <>\n+ \n+ \n+ <\/>,\n+ );\n+\n+ expect(Scheduler).toFlushAndYield(['Create insertion']);\n+ });\n+\n+ \/\/ Update\n+ act(() => {\n+ ReactNoop.render(\n+ <>\n+ \n+ \n+ <\/>,\n+ );\n+\n+ expect(Scheduler).toFlushAndYield([\n+ 'Get Snapshot',\n+ 'Destroy insertion',\n+ 'Create insertion',\n+ ]);\n+ });\n+\n+ \/\/ Unmount everything\n+ act(() => {\n+ ReactNoop.render(null);\n+\n+ expect(Scheduler).toFlushAndYield(['Destroy insertion']);\n+ });\n+ });\n+\n+ \/\/ @gate experimental || www\n+ it('fires insertion effects before layout effects', () => {\n+ let committedText = '(empty)';\n+\n+ function Counter(props) {\n+ useInsertionEffect(() => {\n+ Scheduler.unstable_yieldValue(\n+ `Create insertion [current: ${committedText}]`,\n+ );\n+ committedText = props.count + '';\n+ return () => {\n+ Scheduler.unstable_yieldValue(\n+ `Destroy insertion [current: ${committedText}]`,\n+ );\n+ };\n+ });\n+ useLayoutEffect(() => {\n+ Scheduler.unstable_yieldValue(\n+ `Create layout [current: ${committedText}]`,\n+ );\n+ return () => {\n+ Scheduler.unstable_yieldValue(\n+ `Destroy layout [current: ${committedText}]`,\n+ );\n+ };\n+ });\n+ useEffect(() => {\n+ Scheduler.unstable_yieldValue(\n+ `Create passive [current: ${committedText}]`,\n+ );\n+ return () => {\n+ Scheduler.unstable_yieldValue(\n+ `Destroy passive [current: ${committedText}]`,\n+ );\n+ };\n+ });\n+ return null;\n+ }\n+ act(() => {\n+ ReactNoop.render();\n+\n+ expect(Scheduler).toFlushUntilNextPaint([\n+ 'Create insertion [current: (empty)]',\n+ 'Create layout [current: 0]',\n+ ]);\n+ expect(committedText).toEqual('0');\n+ });\n+\n+ expect(Scheduler).toHaveYielded(['Create passive [current: 0]']);\n+\n+ \/\/ Unmount everything\n+ act(() => {\n+ ReactNoop.render(null);\n+\n+ expect(Scheduler).toFlushUntilNextPaint([\n+ 'Destroy insertion [current: 0]',\n+ 'Destroy layout [current: 0]',\n+ ]);\n+ });\n+\n+ expect(Scheduler).toHaveYielded(['Destroy passive [current: 0]']);\n+ });\n+\n+ \/\/ @gate experimental || www\n+ it('force flushes passive effects before firing new insertion effects', () => {\n+ let committedText = '(empty)';\n+\n+ function Counter(props) {\n+ useInsertionEffect(() => {\n+ Scheduler.unstable_yieldValue(\n+ `Create insertion [current: ${committedText}]`,\n+ );\n+ committedText = props.count + '';\n+ return () => {\n+ Scheduler.unstable_yieldValue(\n+ `Destroy insertion [current: ${committedText}]`,\n+ );\n+ };\n+ });\n+ useLayoutEffect(() => {\n+ Scheduler.unstable_yieldValue(\n+ `Create layout [current: ${committedText}]`,\n+ );\n+ committedText = props.count + '';\n+ return () => {\n+ Scheduler.unstable_yieldValue(\n+ `Destroy layout [current: ${committedText}]`,\n+ );\n+ };\n+ });\n+ useEffect(() => {\n+ Scheduler.unstable_yieldValue(\n+ `Create passive [current: ${committedText}]`,\n+ );\n+ return () => {\n+ Scheduler.unstable_yieldValue(\n+ `Destroy passive [current: ${committedText}]`,\n+ );\n+ };\n+ });\n+ return null;\n+ }\n+\n+ act(() => {\n+ React.startTransition(() => {\n+ ReactNoop.render();\n+ });\n+ expect(Scheduler).toFlushUntilNextPaint([\n+ 'Create insertion [current: (empty)]',\n+ 'Create layout [current: 0]',\n+ ]);\n+ expect(committedText).toEqual('0');\n+\n+ React.startTransition(() => {\n+ ReactNoop.render();\n+ });\n+ expect(Scheduler).toFlushUntilNextPaint([\n+ 'Create passive [current: 0]',\n+ 'Destroy insertion [current: 0]',\n+ 'Create insertion [current: 0]',\n+ 'Destroy layout [current: 1]',\n+ 'Create layout [current: 1]',\n+ ]);\n+ expect(committedText).toEqual('1');\n+ });\n+ expect(Scheduler).toHaveYielded([\n+ 'Destroy passive [current: 1]',\n+ 'Create passive [current: 1]',\n+ ]);\n+ });\n+\n+ \/\/ @gate experimental || www\n+ it('fires all insertion effects (interleaved) before firing any layout effects', () => {\n+ let committedA = '(empty)';\n+ let committedB = '(empty)';\n+\n+ function CounterA(props) {\n+ useInsertionEffect(() => {\n+ Scheduler.unstable_yieldValue(\n+ `Create Insertion 1 for Component A [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ committedA = props.count + '';\n+ return () => {\n+ Scheduler.unstable_yieldValue(\n+ `Destroy Insertion 1 for Component A [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ };\n+ });\n+ useInsertionEffect(() => {\n+ Scheduler.unstable_yieldValue(\n+ `Create Insertion 2 for Component A [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ committedA = props.count + '';\n+ return () => {\n+ Scheduler.unstable_yieldValue(\n+ `Destroy Insertion 2 for Component A [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ };\n+ });\n+\n+ useLayoutEffect(() => {\n+ Scheduler.unstable_yieldValue(\n+ `Create Layout 1 for Component A [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ return () => {\n+ Scheduler.unstable_yieldValue(\n+ `Destroy Layout 1 for Component A [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ };\n+ });\n+\n+ useLayoutEffect(() => {\n+ Scheduler.unstable_yieldValue(\n+ `Create Layout 2 for Component A [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ return () => {\n+ Scheduler.unstable_yieldValue(\n+ `Destroy Layout 2 for Component A [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ };\n+ });\n+ return null;\n+ }\n+\n+ function CounterB(props) {\n+ useInsertionEffect(() => {\n+ Scheduler.unstable_yieldValue(\n+ `Create Insertion 1 for Component B [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ committedB = props.count + '';\n+ return () => {\n+ Scheduler.unstable_yieldValue(\n+ `Destroy Insertion 1 for Component B [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ };\n+ });\n+ useInsertionEffect(() => {\n+ Scheduler.unstable_yieldValue(\n+ `Create Insertion 2 for Component B [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ committedB = props.count + '';\n+ return () => {\n+ Scheduler.unstable_yieldValue(\n+ `Destroy Insertion 2 for Component B [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ };\n+ });\n+\n+ useLayoutEffect(() => {\n+ Scheduler.unstable_yieldValue(\n+ `Create Layout 1 for Component B [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ return () => {\n+ Scheduler.unstable_yieldValue(\n+ `Destroy Layout 1 for Component B [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ };\n+ });\n+\n+ useLayoutEffect(() => {\n+ Scheduler.unstable_yieldValue(\n+ `Create Layout 2 for Component B [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ return () => {\n+ Scheduler.unstable_yieldValue(\n+ `Destroy Layout 2 for Component B [A: ${committedA}, B: ${committedB}]`,\n+ );\n+ };\n+ });\n+ return null;\n+ }\n+\n+ act(() => {\n+ ReactNoop.render(\n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ );\n+ expect(Scheduler).toFlushAndYield([\n+ \/\/ All insertion effects fire before all layout effects\n+ 'Create Insertion 1 for Component A [A: (empty), B: (empty)]',\n+ 'Create Insertion 2 for Component A [A: 0, B: (empty)]',\n+ 'Create Insertion 1 for Component B [A: 0, B: (empty)]',\n+ 'Create Insertion 2 for Component B [A: 0, B: 0]',\n+ 'Create Layout 1 for Component A [A: 0, B: 0]',\n+ 'Create Layout 2 for Component A [A: 0, B: 0]',\n+ 'Create Layout 1 for Component B [A: 0, B: 0]',\n+ 'Create Layout 2 for Component B [A: 0, B: 0]',\n+ ]);\n+ expect([committedA, committedB]).toEqual(['0', '0']);\n+ });\n+\n+ act(() => {\n+ ReactNoop.render(\n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ );\n+ expect(Scheduler).toFlushAndYield([\n+ 'Destroy Insertion 1 for Component A [A: 0, B: 0]',\n+ 'Destroy Insertion 2 for Component A [A: 0, B: 0]',\n+ 'Create Insertion 1 for Component A [A: 0, B: 0]',\n+ 'Create Insertion 2 for Component A [A: 1, B: 0]',\n+ 'Destroy Layout 1 for Component A [A: 1, B: 0]',\n+ 'Destroy Layout 2 for Component A [A: 1, B: 0]',\n+ 'Destroy Insertion 1 for Component B [A: 1, B: 0]',\n+ 'Destroy Insertion 2 for Component B [A: 1, B: 0]',\n+ 'Create Insertion 1 for Component B [A: 1, B: 0]',\n+ 'Create Insertion 2 for Component B [A: 1, B: 1]',\n+ 'Destroy Layout 1 for Component B [A: 1, B: 1]',\n+ 'Destroy Layout 2 for Component B [A: 1, B: 1]',\n+ 'Create Layout 1 for Component A [A: 1, B: 1]',\n+ 'Create Layout 2 for Component A [A: 1, B: 1]',\n+ 'Create Layout 1 for Component B [A: 1, B: 1]',\n+ 'Create Layout 2 for Component B [A: 1, B: 1]',\n+ ]);\n+ expect([committedA, committedB]).toEqual(['1', '1']);\n+\n+ \/\/ Unmount everything\n+ act(() => {\n+ ReactNoop.render(null);\n+\n+ expect(Scheduler).toFlushAndYield([\n+ 'Destroy Insertion 1 for Component A [A: 1, B: 1]',\n+ 'Destroy Insertion 2 for Component A [A: 1, B: 1]',\n+ 'Destroy Layout 1 for Component A [A: 1, B: 1]',\n+ 'Destroy Layout 2 for Component A [A: 1, B: 1]',\n+ 'Destroy Insertion 1 for Component B [A: 1, B: 1]',\n+ 'Destroy Insertion 2 for Component B [A: 1, B: 1]',\n+ 'Destroy Layout 1 for Component B [A: 1, B: 1]',\n+ 'Destroy Layout 2 for Component B [A: 1, B: 1]',\n+ ]);\n+ });\n+ });\n+ });\n+\n+ \/\/ @gate experimental || www\n+ it('assumes insertion effect destroy function is either a function or undefined', () => {\n+ function App(props) {\n+ useInsertionEffect(() => {\n+ return props.return;\n+ });\n+ return null;\n+ }\n+\n+ const root1 = ReactNoop.createRoot();\n+ expect(() =>\n+ act(() => {\n+ root1.render();\n+ }),\n+ ).toErrorDev([\n+ 'Warning: useInsertionEffect must not return anything besides a ' +\n+ 'function, which is used for clean-up. You returned: 17',\n+ ]);\n+\n+ const root2 = ReactNoop.createRoot();\n+ expect(() =>\n+ act(() => {\n+ root2.render();\n+ }),\n+ ).toErrorDev([\n+ 'Warning: useInsertionEffect must not return anything besides a ' +\n+ 'function, which is used for clean-up. You returned null. If your ' +\n+ 'effect does not require clean up, return undefined (or nothing).',\n+ ]);\n+\n+ const root3 = ReactNoop.createRoot();\n+ expect(() =>\n+ act(() => {\n+ root3.render();\n+ }),\n+ ).toErrorDev([\n+ 'Warning: useInsertionEffect must not return anything besides a ' +\n+ 'function, which is used for clean-up.\\n\\n' +\n+ 'It looks like you wrote useInsertionEffect(async () => ...) or returned a Promise.',\n+ ]);\n+\n+ \/\/ Error on unmount because React assumes the value is a function\n+ expect(() =>\n+ act(() => {\n+ root3.unmount();\n+ }),\n+ ).toThrow('is not a function');\n+ });\n+ });\n+\n describe('useLayoutEffect', () => {\n it('fires layout effects after the host has been mutated', () => {\n function getCommittedText() {\ndiff --git a\/packages\/react-server\/src\/ReactFizzHooks.js b\/packages\/react-server\/src\/ReactFizzHooks.js\nindex 51ea84e8c4..1618537ac1 100644\n--- a\/packages\/react-server\/src\/ReactFizzHooks.js\n+++ b\/packages\/react-server\/src\/ReactFizzHooks.js\n@@ -503,6 +503,7 @@ export const Dispatcher: DispatcherType = {\n useReducer,\n useRef,\n useState,\n+ useInsertionEffect: noop,\n useLayoutEffect,\n useCallback,\n \/\/ useImperativeHandle is not run in the server environment\ndiff --git a\/packages\/react-server\/src\/ReactFlightServer.js b\/packages\/react-server\/src\/ReactFlightServer.js\nindex efac391833..5429d3a3b9 100644\n--- a\/packages\/react-server\/src\/ReactFlightServer.js\n+++ b\/packages\/react-server\/src\/ReactFlightServer.js\n@@ -822,6 +822,7 @@ const Dispatcher: DispatcherType = {\n useReducer: (unsupportedHook: any),\n useRef: (unsupportedHook: any),\n useState: (unsupportedHook: any),\n+ useInsertionEffect: (unsupportedHook: any),\n useLayoutEffect: (unsupportedHook: any),\n useImperativeHandle: (unsupportedHook: any),\n useEffect: (unsupportedHook: any),\ndiff --git a\/packages\/react-suspense-test-utils\/src\/ReactSuspenseTestUtils.js b\/packages\/react-suspense-test-utils\/src\/ReactSuspenseTestUtils.js\nindex ca898150b7..b4b57c68b5 100644\n--- a\/packages\/react-suspense-test-utils\/src\/ReactSuspenseTestUtils.js\n+++ b\/packages\/react-suspense-test-utils\/src\/ReactSuspenseTestUtils.js\n@@ -35,6 +35,7 @@ export function waitForSuspense(fn: () => T): Promise {\n useReducer: unsupported,\n useRef: unsupported,\n useState: unsupported,\n+ useInsertionEffect: unsupported,\n useLayoutEffect: unsupported,\n useCallback: unsupported,\n useImperativeHandle: unsupported,\ndiff --git a\/packages\/react\/index.classic.fb.js b\/packages\/react\/index.classic.fb.js\nindex 756f69f271..7f8abc8631 100644\n--- a\/packages\/react\/index.classic.fb.js\n+++ b\/packages\/react\/index.classic.fb.js\n@@ -48,6 +48,7 @@ export {\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n+ unstable_useInsertionEffect,\n useMemo,\n useMutableSource,\n useMutableSource as unstable_useMutableSource,\ndiff --git a\/packages\/react\/index.experimental.js b\/packages\/react\/index.experimental.js\nindex 230e94f3a5..a0a9bbaca2 100644\n--- a\/packages\/react\/index.experimental.js\n+++ b\/packages\/react\/index.experimental.js\n@@ -42,6 +42,7 @@ export {\n useDeferredValue,\n useEffect,\n useImperativeHandle,\n+ unstable_useInsertionEffect,\n useLayoutEffect,\n useMemo,\n useMutableSource as unstable_useMutableSource,\ndiff --git a\/packages\/react\/index.js b\/packages\/react\/index.js\nindex 0acb8d9fa9..1b4552a90f 100644\n--- a\/packages\/react\/index.js\n+++ b\/packages\/react\/index.js\n@@ -67,6 +67,7 @@ export {\n useDeferredValue,\n useEffect,\n useImperativeHandle,\n+ unstable_useInsertionEffect,\n useLayoutEffect,\n useMemo,\n useMutableSource,\ndiff --git a\/packages\/react\/index.modern.fb.js b\/packages\/react\/index.modern.fb.js\nindex d87d7c891e..819d5fe90a 100644\n--- a\/packages\/react\/index.modern.fb.js\n+++ b\/packages\/react\/index.modern.fb.js\n@@ -46,6 +46,7 @@ export {\n useDeferredValue as unstable_useDeferredValue, \/\/ TODO: Remove once call sights updated to useDeferredValue\n useEffect,\n useImperativeHandle,\n+ unstable_useInsertionEffect,\n useLayoutEffect,\n useMemo,\n useMutableSource,\ndiff --git a\/packages\/react\/src\/React.js b\/packages\/react\/src\/React.js\nindex 24421bd86c..541e7a35d3 100644\n--- a\/packages\/react\/src\/React.js\n+++ b\/packages\/react\/src\/React.js\n@@ -41,6 +41,7 @@ import {\n useEffect,\n useImperativeHandle,\n useDebugValue,\n+ useInsertionEffect,\n useLayoutEffect,\n useMemo,\n useMutableSource,\n@@ -91,6 +92,7 @@ export {\n useEffect,\n useImperativeHandle,\n useDebugValue,\n+ useInsertionEffect as unstable_useInsertionEffect,\n useLayoutEffect,\n useMemo,\n useMutableSource,\ndiff --git a\/packages\/react\/src\/ReactHooks.js b\/packages\/react\/src\/ReactHooks.js\nindex b284267b64..0722cf4b20 100644\n--- a\/packages\/react\/src\/ReactHooks.js\n+++ b\/packages\/react\/src\/ReactHooks.js\n@@ -100,6 +100,14 @@ export function useEffect(\n return dispatcher.useEffect(create, deps);\n }\n \n+export function useInsertionEffect(\n+ create: () => (() => void) | void,\n+ deps: Array | void | null,\n+): void {\n+ const dispatcher = resolveDispatcher();\n+ return dispatcher.useInsertionEffect(create, deps);\n+}\n+\n export function useLayoutEffect(\n create: () => (() => void) | void,\n deps: Array | void | null,\n","body":"","commit":{"authoredAt":"2021-09-14T10:27:09-04:00","subject":"[Experimental] Add useInsertionEffect (#21913)","revision":"263cfa6ecb9879ecb629d4e04a8c26422b4c4ff9","authorName":"Ricky","shortRevision":"263cfa6ecb","authorEmail":"rickhanlonii@gmail.com"}}

dillon1000/react

Files changed