State transformation in useEntity hangs browser

Describe the bug Trying to use Array.map inside tranform argument hangs Chrome 91

Getting Too many re-renders. React limits the number of renders to prevent an infinite loop

To Reproduce Create an entity with items property and try to use in useEntity with some transformations

// In state file
const StateEntity = entity({ items: [/*your items*/] })

// In component
const items = useEntity(StateEntity, s=> s.items.map(x => ({...x, newProp: true}));

(https://codesandbox.io/s/zealous-almeida-l9qs6?file=/src/App.tsx)

Expected behavior State transforms as it updates and doesn’t hang browser

Desktop (please complete the following information):

• OS: Windows 10 Pro 21H1
• Browser: Chrome
• Version: 91.0.4472.164

[arnelenero]

Thanks for the suggestion. It might work to just combine these:

  useIsoEffect(() => entity._subscribe(subscriberFn), [subscriberFn, entity])

  // Re-sync state in case transform function has changed
  subscriberFn(entity._value)

into

  useIsoEffect(() => {
     // Re-sync state in case transform function has changed
     subscriberFn(entity._value)
  
     return entity._subscribe(subscriberFn)
  }, [subscriberFn, entity])

I will have to run tests against this, though.

[arnelenero]

After revisiting this I can confirm that the original code, where the subscriberFn is called to re-sync state in case the transform function has changed, is indeed intentional and safe. It will not cause any re-render unconditionally because subscriberFn performs comparison with current entity value. Therefore, the discussed enhancement above would not provide the intended result.

There has been no reported issues that are similar to the original issue reported here, and the original sandbox currently appears to be working as intended.

Due to the above, I am closing this issue. We can reopen if a similar issue resurfaces.