How to use Observables like useState in React?

[AradSharafi]

I want to use Observables in React to create a state that behaves like the useState hook. Specifically, I sometimes have a state that I want to turn into an Observable. How can I make an Observable work like a state?

I have tried using an Observable in a component, but when it changes, the component does not update. To handle this, I have been using the useSelector hook in the component to re-render as useState. Is this a good approach, or is there a better way to handle this situation?

[jmeistrich]

See https://legendapp.com/open-source/state/react-basics/#two-ways-to-re-render-on-state-changes

You can make the component an observer to re-render when any tracked observable changes, or useSelector works too. I usually do it like this:

const Component = observer(function Component() {
   const num$ = useObservable(0)
   const num = num$.get()

   return (
      <>
         <button onClick={() => num$.set(value => value + 1)}>Add</button>
         <div>Num: {num}</div>
      </>
   )
})

[matthewmturner]

Are the children of Component also automatically observer's if you pass num$ as a prop? Or do you have to call observer on those as well?

[jmeistrich]

Each component's render function is run in its own tracking context (that's just how React works) so if you want child components to be observers they'd need to be wrapped in observer too. This way we know which specific observables each component cares about. It would be a huge problem otherwise - we wouldn't know which component was listening to which observable so we'd have to just re-render everything, which would be terribly slow 😂.

For what it's worth, probably less than half of the components in our apps use observer. Others make use of the components like Switch/Show/For/Legend.input etc... or they use reactive props like className$. Or they don't have their own state and just have styling and pass props down. Or low level components might use useSelector on a single prop. So making every single component an observer could add unneeded overhead.

In our apps we wrap all components in an HOC anyway to add Sentry error handling, so we just have an alternate that adds observer. So we use either component(function MyComponent ... or componentObserver(function MyComponent... depending on whether or not we want it to observe.