Rendering broken for arrays not wrapped in div

[tgreen7]

React Easy State version: x.x.x
Platform: browser / node / react-native / other

Describe the bug
If you have an array in your store and display it without wrapping it in a div it does not render or update properly.

For the toughest bugs only

https://codesandbox.io/s/pedantic-glade-ytrwo?file=/src/App.js

1. click add pet and the pet list will not update.
2. comment out line 15 and comment in line 16
3. Hit add pet and list will update

[peteyycz]

This is not a bug with the library, but a way react works, by default if you pass an array to react it is not going to render anything.

Try changing that line to:
{user.pets.map((pet) => <span key={pet}>{pet}</span>)}

And you'll see that it renders each pet in it's own span.

[tnrich]

@peteyycz I think you probably didn't look very closely at the example codesandbox or actually try it. I can reproduce exactly what @tgreen7 mentioned. See below:

Also react does render arrays of valid react components. See below with an array of strings:

[solkimicreb]

Some general thoughts: (scroll down for the specific issue explanation)

@peteyycz was party right that this is a very strange use-case that is only "accidentally" handled by React. React does not render objects but it does render arrays (because React elements are represented as arrays after compilation) and strings. As a result, it also handles arrays of strings.

I don't think we would change anything in the library because of this edge case only without a strong use-case from a user as it is not really real-life like. It is tightly linked with a more practical and broad issue though which may get addressed soon.

About the issue:

The component correctly re-renders, just add a console.log inside the render to see it. The freshly mutated array is not reflected in the view by React though because it did not change by reference. If you replace {user.pets} with {[...user.pets]} it should be refreshed.

This issue can also happen with complex multi-component third-party libraries. Check the "Passing nested data to third party components." for an explanation. In that case the third party component (or some of its children) is not re-rendered because the data it received as prop did not change as a reference.

I have an idea about how to solve this but it could lead to a bunch of other problems. I will reopen the issue and keep you updated here.