Adding Items doesn't work properly when using create-react-app

[Dianoga]

Minimal reproduction repo: https://github.com/Dianoga/muuri-react-cra-bug

There seems to be an issue in apps created using create-react-app.

Specifically, when you add new items to the MuuriComponent they don't seem to get initialized properly.

In the screenshot below you can see the first three items that were created on the first render of MuuriComponent. The second set of three items were added to the state and render, but don't get the muuri properties.

Additionally, when navigating away from the page with the MuuriComponent and the broken items the below error shows up. That isn't demonstrated in the reproduction repo.

Interestingly, when you build the project (using npm run build) it behaves correctly.

I did a first pass at trying to figure out what was going on, but this is a complicated codebase and I pretty rapidly got lost.

[Dianoga]

I'm still digging but it looks like the new Item is being rendered properly, but before the useEffect stuff fires it's being rendered again which clears all the vars.

Also, the same issue occurs if the MuuriComponent initially renders without children and then renders again with children added.

[Dianoga]

I've been trying to come up with a way around the problem. My current idea is to keep track of the keys that have been actually been added and check the key of each child against that, but I don't have that working yet.

[paol-imi]

Hi @Dianoga

Thanks for the report, I will investigate thoroughly.

Now I have tried to reproduce the problem on codesandox, using the create-react-app sandbox and using the grid demo code.

The app seems to work, I noticed that the code was mistakenly changed.

this

<Item key={id} />

was changed to this

<Item key={"id"} />

And obviously made the app break. Could you try to reproduce the problem by copying the grid demo code?

[Dianoga]

I checked out your sandbox. One difference I saw from the normal create-react-app is not using React.StrictMode in the render call. When I add that to your sand box the behavior lines up with what I see.

ReactDom.render(<React.StrictMode><App /></React.StrictMode>, document.getElementById("root"));

StrictMode isn't reporting any problems, but I'm wondering if the extra checks it does slows things down enough that it's exposing a race condition.

From https://reactjs.org/docs/strict-mode.html

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

• Class component constructor, render, and shouldComponentUpdate methods
• Class component static getDerivedStateFromProps method
• Function component bodies
• State updater functions (the first argument to setState)
• Functions passed to useState, useMemo, or useReducer

[paol-imi]

It is strange behavior, I will investigate further.

I didn't understand if you managed to reproduce the bug with Strict mode.

[Dianoga]

With StrictMode added to your sandbox the bug occurs.

[kongweiying2]

I am also having this problem. It's a create react app using typescript. React 17 generated the app, but I downgraded to React 16 which didn't solve the issue.

EDIT: After applying #43, this fixed my issue. So I downgraded to React 16.13, and it worked even in Strict Mode.

[Secretmapper]

Fixed this with https://github.com/Secretmapper/muuri-react/tree/strict-muuri-0.9 - properly adding the old children using useEffect

[Mohamed-Raid]

Secretmapper

can you please explain i have the same issue here

[Mohamed-Raid]

sandbox

sandbox example does not exist :/