How does React know to re-render?

[jeffreyschultz]

I have been studying the code for the last day and curious how React knows to rerender a component from a legend state change. What is the mechanism that drives that notifies React of an update?

[jmeistrich]

Hi @jeffreyschultz!

All of the React hooks and components are built on top of useSelector. That runs React's useSyncExternalStore hook around trackSelector (which is also the base of observe).

trackSelector runs a function in an observing context by calling the selector function/observable between beginTracking and endTracking. That tracks which observable nodes were accessed during the tracking and subscribes the observer function to their changes. In the case of useSelector, the observer function is a little update function which triggers useSyncExternalStore to re-render.

Does that help? I realize that's a pretty short and dense answer... I wonder if it would be useful to write out a more detailed description of how things work in a docs page?

[matthewmturner]

I think there is a lot of value in adding documentation on the internals. To both improve understanding of the library and make it easier to contribute for people external to the project.

[jeffreyschultz]

@jmeistrich

Thank you for the reply! This gives me a better path forward to understanding the codebase. Much appreciated!

[jozsefm]

Does that mean Legend State is only compatible with React v 18+ right?

[jmeistrich]

It uses React's use-sync-external-store shim to make it backwards compatible, so Legend-State should work fine in React 16.8.0 and above. We're using it ourselves in an app that's still on React 17 and it's just fine.

[stephenh]

@jmeistrich the useSelector primitive using useSyncExternalStore makes sense!

But what about useComputed? I happened to glance at it's source, and afaict it's not use useSelector, it's just got a useMemo around the core computed?

[jmeistrich]

useObservable, useComputed, and useObservableReducer are for creating observables so they don't need to subscribe to updates. So they're just light wrappers around useMemo to create the observable in local state.

[stephenh]

Oh right! Sorry about that; our useComputed is what crosses the mobx/react boundary, so that's what I went in expecting to see, but right right, that is Legends useSelector.

Makes sense that useComputed is just making new observables...I need to unlearn that in my head, but it does make sense.

Thanks for the quick explanation!

[nouman2075]

I checked the source code for useSelector and in useSelector, useRef and useSyncExternalStore hooks are called conditionally. It violates the rule of react hooks. Correct me if i missed something...

[jmeistrich]

That is an optimization to skip creating hooks when using the observer HOC. tracking.inRender can only be true if the component is being rendered by observer. So since it's not possible for the value to change between renders, it will always take the same path so it can't actually violate the rules of hooks.

I'll add some comments around that.