double renders with react-beautiful-dnd

I am familiar with https://github.com/facebookexperimental/Recoil/issues/307 rendering components with recoil twice on initialization.

But I am also getting double renders when I use https://github.com/atlassian/react-beautiful-dnd

Here is my test case [1] https://github.com/jedierikb/recoil-beautiful-dnd

& here is the line you can toggle to switch between useRecoilState and useState: https://github.com/jedierikb/recoil-beautiful-dnd/blob/master/src/App.js#L64

In the console you will note there are two renders after every drop operation when using useRecoilState.

I am not knowledgeable about what is happening under the hood in either library to possibly trigger the double rendering, but since it is a popular library I thought this issue might be of interest.

–

[1] adapted from one of their provided examples https://codesandbox.io/s/k260nyxq9v

[drarmstr]

We are finalizing a diff now for Concurrent Mode support that reduces double renders in more situations. Hopefully that may help this example.

[timiscoding]

On further investigation, this bug is related to https://github.com/facebookexperimental/Recoil/issues/1076 and already fixed in 0.4.0 but disabled by default behind the ‘recoil_early_rendering_2021’ flag. I made a fork of the package and re-enabled it as @timiscoding/recoil.

I have recreated the OP’s test case https://codesandbox.io/s/double-render-recoil-bug-2tmmq?file=/src/index.js and if you use my forked package, the problem is gone.