From 296bf8b66907e16ba8ae9e2650878a30580804f4 Mon Sep 17 00:00:00 2001 From: MCW77 Date: Mon, 10 Nov 2025 16:20:00 +0100 Subject: [PATCH] fix: correct the useSelector to useValue find/replace jumble --- docs/content/state/v3/other/migrating.mdx | 12 ++++++------ docs/content/state/v3/react/react-api.mdx | 6 +++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/content/state/v3/other/migrating.mdx b/docs/content/state/v3/other/migrating.mdx index 937ad62..a67122b 100644 --- a/docs/content/state/v3/other/migrating.mdx +++ b/docs/content/state/v3/other/migrating.mdx @@ -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) ``` @@ -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 }) @@ -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. diff --git a/docs/content/state/v3/react/react-api.mdx b/docs/content/state/v3/react/react-api.mdx index d517f0f..492f4fd 100644 --- a/docs/content/state/v3/react/react-api.mdx +++ b/docs/content/state/v3/react/react-api.mdx @@ -6,12 +6,12 @@ title: React API ### 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 😀 + +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 😀 -`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`. `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.