Is there a better/cleaner way to do this ?

[ghostlexly]

Hello,

I recently discovered this library, and I have a question about a readability issue that I'm facing.

Firstly, is it necessary to use "enableLegendStateReact();" or "observer" in every component?

Secondly, can we use conditions in the template with useObservable without having to use useSelector? Because that forces me to declare a second constant. I'm also trying to avoid using observer to wrap my entire function as I find it greatly affects readability.

Thank you for the work you've done on this library!

Code example:
https://codesandbox.io/s/legend-state-tree-forked-yft2k6?file=/src/App.tsx

[jmeistrich]

To make a component reactive to an observable's changes you can use useSelector or observer. useSelector will make that one observable/function reactive whereas observer will automatically track any calls to get() within the component. If you're using useSelector then observer is not necessary. Docs

You only need to call enableLegendStateReact() once at the entry point of the app - that enables the feature of rendering observables directly, without needing to use useSelector or observer. Docs

Future

We're currently experimenting with a new feature to add a use() function to observables which runs a useSelector under the hood. I think should make it all easier, and you wouldn't necessarily need to declare a second constant. It's being worked on in the direct2 branch and version 1.3.0-next.4. We're just experimenting and iterating on it in our apps to make sure it's the best possible DX before we release it. The latest iteration would look like this:

function Component ()  {
   const test = useObservable(0)
   const value = test.use()
   ...
}

Or using it within the JSX like in your example would look like:

function Component ()  {
   const test = useObservable(0)

   return (<>
      {test.use() > 10 && <div>OMG MORE THAN 10!</div>}
   </>)
}