double renders with react-beautiful-dnd

[jedierikb]

I am familiar with #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.

[a6625327]

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

How dose the Concurrent Mode will reduces double renders? Can u explain it in term of source code of the recoil for me ? Thank u very much!

[cornwe19]

Has there been any update on this issue? We're facing the same problem.

The only workaround I've found so far is to duplicate the recoil state with some dependent state within my component (using a hook like what is described here https://dev.to/bmingles/usedependentstate-react-usestate-hook-with-dependencies-29fj), but it's making a real mess of our code to have to capture 2 separate states like that.

[drarmstr]

@cornwe19 - Are you still having issues when using the latest experimental React with Concurrent Mode enabled?

[caiwukun]

hi~ same rerender problem with recoil@0.1.3
i run @salvoravida fork and it work
i wonder if this fix will be merged into master?

[cornwe19]

@drarmstr, as @caiwukun pointed out, switching to react experimental concurrent mode and Recoil 0.1.3 doesn't fix the issue. Is there a specific fork or experimental version of Recoil I should be using to take advantage of concurrent mode?

[timiscoding]

I'm seeing this issue too where recoil seems to be re-rendering before and after the atom state update which results in some list items briefly rendering their original order before the final order when dropping an item. I've even tried using react 18 with concurrent mode by using the new ReactDOM.createRoot API method.

Here's a sandbox: https://codesandbox.io/s/react-beautiful-dnd-recoil-flash-bug-58scv?file=/src/App.js

Ignoring the initial log, if you drop an item, it logs 'rendering recoil' before and after rendering the list whereas with the useState version, it only logs after.

[timiscoding]

On further investigation, this bug is related to #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.

[drarmstr]

Closing as this feature is now enabled by default.