useListContext() causes infinite render loops

[stensrud]

What you were expecting:
When using useListContext(), I expect the returned values to be the same object instances when the values are the same.

What happened instead:
Upgrading ra-core to version 3.12.4 from version earlier than 3.12.3 (3.8.3) broke our production system. We tracked it down to this pull request: #5802

To my understanding, in React applications, one should adhere to strict immutable practices when passing props or state around: Never return the same object if the content has changed, and always return the same object if nothing has changed. This ensures very fast comparison of old and new values, and thus very fast rendering.

It seems, useListContext() started breaking these practices by never returning the same object for selectedIds.

Consider this example code:

const { selectedIds } = useListContext();

useEffect(() => {
  // trigger new render by updating state here
}, [selectedIds]);

This will easily result in infinite render loops, crashing the application.

Our ugly fix: JSON.stringify(selectedIds) !== JSON.stringify(oldSelectedIds)

Steps to reproduce:

I added an InfiniteLoop-component to PostList.
https://codesandbox.io/s/vigorous-currying-2vnyn?file=/src/posts/PostList.tsx

Not sure if it is demonstrating the problem correctly. Also I'm completely open to this is a misunderstanding on my part.

Environment

• React-admin version: 3.12.4
• Last version that did not exhibit the issue (if applicable): 3.12.2
• React version: 16.9.0
• Browser: Chrome, Safari

[djhi]

Hi and thanks for the report. There are many things happening on the codesandbox, including two conflicting versions of MUI and too much code non related to the issue.

I tried to reproduce the issue by adding the InfiniteLoop component to the simple example locally. Although it does run the effect multiple times, there is no infinite loop. The fact that it run the effects so many times is because how contexts work. It's a known issue in React and we can't do anything about it. See reactjs/rfcs#119 for more details.

Please reopen this if you can reproduce the issue in a minimal example.