Recoil: render twice on component mount (useRecoilValue, useRecoilState) no StrictMode

[NikitaBazhenov]

Hello,

I am really excited about this project, I've played around and just notice that my component was rendered twice after it mounted even without StrictMode(in production) #75

I've created a small example without StrictMode enabled on code sandbox:
https://codesandbox.io/s/recoil-itit-double-render-jzbun

just wondering what I am doing wrong
I appreciate any help!

[Shmew]

I've also noticed it always renders twice on initialization of a component that subscribes to a recoil value.

[elis-k]

Just noticed that it rendered 4 times on initalization of a component for me.
And it renders twice on every update. How can this affect performance and user experience?

[NikitaBazhenov]

@elis-k probably you are run your app in development env and you are using on root level in your app, please check this issue related to StrictMode: facebook/react#15074
so if you are in StrictMode you will see 4 times rendering in dev (2 times React.StrictMode + 2 times useRecoilValue) and in production build, StrictMode is doesn't work, so it will be 2 times because of useRecoilValue) 😞

[Shmew]

Yeah I've tested renders and it's only on the initialization, after that it's a single render per committed update that's subscribed by the component.

[semvis123]

Does someone have a fix for this? it breaks my code.

[drarmstr]

@semvis123 - How is this breaking your code?

[semvis123]

@drarmstr It causes my function to run twice, which is not good for performance, and if API calls are placed inside those get called twice.

[drarmstr]

React render functions shouldn’t have side effects, so this should only be an optimization not a correctness issue. That’s why the React strict mode does extra renders to help test for side effects.

[semvis123]

Where should I put my function, so it only runs once?

[drarmstr]

Check out ‘useEffect()’ for side effects.

[semvis123]

Thanks, I will definitely try that.

[drarmstr]

Recent optimizations should remove the extra render from Recoil during mount. This should be available in master; we're working on fixing an issue and then it will be release with 0.0.11.

[smith-chris]

Hey, I believe this is still happening with lates 0.1.1 and 0.0.11 mentioned above. React.StrictMode disabled ofc. Any ideas?

Also forked sandbox from OP shows that the issue is still there: https://codesandbox.io/s/recoil-itit-double-render-forked-pr502?file=/package.json

[drarmstr]

@smith-chris - Are you using the experimental React version with Concurrent Mode support?

[salvoravida]

Issue CodeSandBox
https://codesandbox.io/s/recoil-legacy-double-render-30bjc

Fix CodeSandBox
https://codesandbox.io/s/recoil-legacy-double-render-fixed-2oxfj

@smith-chris
you can test the pr with package '@salvoravida/recoil' 0.1.3

[salvoravida]

@drarmstr please can you check the PR?

the problem is on _LEGACY implementation

[drarmstr]

The "LEGACY" implementation had the extra render the experimental React Concurrent Mode support fixed. But, interesting that my optimization in #749 may also be used to prevent the initial double render. Thanks, will take a look!

[lucasbordeau]

Hi, we are experiencing this bug on a complex UI involving a few dozen of atoms on many components. We've got many re-renders that slow down our web based editor, even if only in dev mode, it's not what we are expecting from a state management library.

We are currently running on the @salvoravida fork, with an alias mapping in webpack and tsconfig to keep the import ... from 'recoil';. It works ! No more re-render, thanks.

We are awaiting the new version of recoil with this fix, keep it up guys !

[drarmstr]

Thanks for the extra testing @lucasbordeau

[salvoravida]

@lucasbordeau
https://github.com/facebookexperimental/Recoil/pull/825

have you found a similar issue?

can you test di this pr?