Mount a component with useFilter for the created entity
useFilter calls listen for store changes in useEffect, thus it will be done after render.
Component retrieves an old list because the creation of the object is not done yet.
The new object is created and notifications are sent.
The component renders with an old list.
useEffect takes place and the component is subscribed to changes. But it's late.
I believe thins like this bug is the reason why other state managers use synchronous useLayoutEffect e.g. effector and storeon.
We don't have so much code in this effect for it to delay render. So it could be synchronous.
Another fix is to forceRender component after useEffect is done if the store value was changed during this time. But it will require more logic.
This bug is also fixed by React18 may be due to their changes in the rendering pipeline. Nonetheless, I think that a synchronous subscription for changes is better.
AleksandrSl
commented
2 years ago
Order of events during reproduction:
createSyncMapuseFilterfor the created entityuseFiltercallslistenfor store changes inuseEffect, thus it will be done after render.useEffecttakes place and the component is subscribed to changes. But it's late.I believe thins like this bug is the reason why other state managers use synchronous
useLayoutEffecte.g. effector and storeon. We don't have so much code in this effect for it to delay render. So it could be synchronous.Another fix is to forceRender component after
useEffectis done if the store value was changed during this time. But it will require more logic.This bug is also fixed by React18 may be due to their changes in the rendering pipeline. Nonetheless, I think that a synchronous subscription for changes is better.