react.dev icon indicating copy to clipboard operation
react.dev copied to clipboard

useInsertionEffect in Strict mode with strict effects

Open smitpatel1010 opened this issue 3 years ago • 3 comments

As stated here https://github.com/reactjs/reactjs.org/blob/main/content/docs/strict-mode.md?plain=1#L181 useInsertionEffect is included with enableStrictEffects flags in react. but it is not working. and react code also doesn't seem to have this check for useInsertionEffect. please suggest if this is the bug in docs or react code?

demo url - https://codesandbox.io/s/react-18-strict-mode-effects-forked-72d6wp?file=/src/App.js

smitpatel1010 avatar Jul 17 '22 13:07 smitpatel1010

useInsertionEffect is a newer api introduced in React 18 as a solution for problems faced in CSS-in-JS libraries with concurrent rendering. it has nothing to do with strict mode whereas if strict mode is enabled it will remount in dev mode intentionally to spot some bugs related to side-effects .

here are the logs for your demo. everything work as expected. Screenshot 2022-07-25 at 12-36-45 CodeSandbox

G3root avatar Jul 25 '22 07:07 G3root

Hey @G3root , I think you missed my point here. I know why this hook is added in react 18. My concern is for the behaviour of this hook in strict mode is not as mentioned in the docs.

As you can see here effects should get cleared and triggered again while mouting. This behaviour is applicable on useInsertionEffect as per docs here.

But as you can see in my demo url I don't see any Clear Insertion Effect 1 log. and as per docs cleanup should get triggered.

smitpatel1010 avatar Jul 25 '22 08:07 smitpatel1010

Hey @gaearon, What do you think about this issue?

smitpatel1010 avatar Jul 26 '22 08:07 smitpatel1010