Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/content/state/v3/other/migrating.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ title: Migrating

Based on discussions with the React Compiler team and a lot of feedback from the community, we're changing the suggested primary way of using observables in React. The old ways will still work for a while so we don't break existing apps and we have some tools to aid in the migration, which can be done slowly over time.

Basically, we need to change from `observer` tracking all `get()` calls to using a `useValue` hook instead, which is just a renamed `useValue`.
Basically, we need to change from `observer` tracking all `get()` calls to using a `useValue` hook instead, which is just a renamed `useSelector`.

#### useValue to useValue
#### useSelector to useValue

`useValue` is renamed to `useValue`, because the term "Selector" has a lot of baggage from other state libraries and many new users found it confusing. `useValue` will still work for a while so you can make the change slowly if you want, or a global find and replace should work.
`useSelector` is renamed to `useValue`, because the term "Selector" has a lot of baggage from other state libraries and many new users found it confusing. `useSelector` will still work for a while so you can make the change slowly if you want, or a global find and replace should work.

```jsx
// 🔴 From
const value = useValue(state$.value)
const value = useSelector(state$.value)
// ✅ To
const value = useValue(state$.value)
```
Expand Down Expand Up @@ -45,7 +45,7 @@ const Component = observer(() => {

#### The full details

- ✅ A new hook `useValue` (just `useValue` with a new name) is now the default way to consume observables
- ✅ A new hook `useValue` (just `useSelector` with a new name) is now the default way to consume observables

```jsx
const state$ = observable({ value: 10 })
Expand Down Expand Up @@ -600,7 +600,7 @@ Just change `evt.dispatch()` to `evt.fire()` and all is good 👍.

### Deprecated automatic observing

We are deprecating the automatic observing that depended on hooking into React's internals. Components will no longer track observables automatically, but you can easily it per component in a few ways:
We are deprecating the automatic observing that depended on hooking into React's internals. Components will no longer track observables automatically, but you can easily do it per component in a few ways:

- Wrap components in `observer` to make them track automatically
- Wrap observable access in `useValue` to return a value and track automatically.
Expand Down
6 changes: 3 additions & 3 deletions docs/content/state/v3/react/react-api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ title: React API

### useValue

<Callout title="Migration from useValue$">
In previous versions this was called useValue or use$. If you were using `useValue` or `use$` it will still work for a while, but we suggest changing them to `useValue` as we'll remove `useValue` in a later version. Many people were unsure of what a "selector" was so it was unclear what it did. Plus, `useValue` is shorter 😀
<Callout title="Migration from useSelector or use$">
In previous versions this was called 'useSelector' or 'use$'. If you were using `useSelector` or `use$` it will still work for a while, but we suggest changing them to `useValue` as we'll remove `useSelector` and 'use$' in a later version. Many people were unsure of what a "selector" was so it was unclear what it did. Plus, `useValue` is shorter 😀
</Callout>

<Callout type="warn" title="Migration from use$">
`use$` was not compatible with React Compiler, so if you're using Compiler we strongly suggest migrating from `useValue`.
`use$` was not compatible with React Compiler, so if you're using Compiler we strongly suggest migrating to `useValue`.
</Callout>

`useValue` computes a value and automatically listens to any observables accessed while running, and only re-renders if the computed value changes. This can take either an observable or a function that consumes observables.
Expand Down