Confusion within the legend-state docs

[iSuslov]

It seems like there is a new recommended way to read state in react: use$. Old useSelector should be deprecated.

But the very next example nearly suggests that if we want to use it with react suspense, we should still use useSelector

More confusion

React example

In the first react example https://legendapp.com/open-source/state/v3/react/react-examples/

Persisted global state

import { observable } from "@legendapp/state"
import { syncObservable } from "@legendapp/state/sync"
import { ObservablePersistLocalStorage } from "@legendapp/state/persist-plugins/local-storage"
import { $React } from "@legendapp/state/react-web"
import { motion } from "framer-motion"
import { useRef } from "react"

const state$ = observable({
  settings: { showSidebar: false, theme: 'light' },
  user: {
    profile: { name: '', avatar: '' },
    messages: {}
  }
})

// Persist state
syncObservable(state$, {
  persist:{
    name: 'persistenceExample',
    plugin: ObservablePersistLocalStorage,
  }
})

// Create a reactive Framer-Motion div
const MotionDiv = reactive(motion.div)

function App() {
  const renderCount = ++useRef(0).current

  const sidebarHeight = () => (
    state$.settings.showSidebar.get() ? 96 : 0
  )

  return (
    <Box>
      <div>Renders: {renderCount}</div>
      <div>Username:</div>
      <$React.input
        className="input"
        $value={state$.user.profile.name}
      />
      <Button onClick={state$.settings.showSidebar.toggle}>
        Toggle footer
      </Button>
      <MotionDiv
        className="footer"
        $animate={() => ({
           height: state$.settings.showSidebar.get() ?
             96 : 0
        })}
      >
        <div className="p-4">Footer</div>
      </MotionDiv>
    </Box>
  )
}

Do I understand correctly that introduction of the use$ hook doesn't recommend us to use such constructs anymore:

  const sidebarHeight = () => (
    state$.settings.showSidebar.get() ? 96 : 0
  )

and it should be

  const sidebarHeight = use$(() => state$.settings.showSidebar.get() ? 96 : 0)

From migrating:

---

I think we should clean up the documentation so that less confusion arises when devs try to adopt this lib.

[iSuslov]

One more question.

Here https://legendapp.com/open-source/state/v3/react/fine-grained-reactivity/#render-an-observableselector-directly we have an example of using Memo:

import { Memo } from "@legendapp/state/react";

const count$ = observable(0);

// These components never re-render.
// The Memo element re-renders itself when its value changes.
function WithObservable() {
  return (
    <div>
      Count:
      <Memo>{count$}</Memo>
    </div>
  );
}
//...

I'm confused if we can consume globally defined count$ inside a React component without wrapping it into use$()?