This repository has been archived by the owner on Jan 1, 2025. It is now read-only.
Experimental hooks for useTransition() support #1572
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
CLA Signed
|
This pull request was exported from Phabricator. Differential Revision: D33812933 |
drarmstr
added a commit
to drarmstr/Recoil
that referenced
this pull request
Jan 28, 2022
…1572) Summary: Pull Request resolved: facebookexperimental#1572 Expose experimental `useTransition()` support for React 18 by exposing variants of Recoil hooks using a different rendering mode that works with `useTransition()`: * `useRecoilValue_TRANSITION_SUPPORT_UNSTABLE()` * `useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE()` * `useRecoilState_TRANSITION_SUPPORT_UNSTABLE()` Example usage to display previous state while a selector is pending: ``` function QueryResults() { const queryParams = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom); const results = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(myQuerySelector(queryParams)); return results; } function MyApp() { const [queryParams, setQueryParams] = useRecoilState_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom); const [inTransition, startTransition] = useTransition(); return ( <div> {inTransition ? <div>[Loading new results...]</div> : ''} Results: <React.Suspense><QueryResults /></React.Suspense> <button onClick={() => { startTransition(() => { setQueryParams(...new params...); }); } > New Query </button> </div> ); } ``` Reviewed By: habond Differential Revision: D33812933 fbshipit-source-id: a8fb903067b31867c5a24691a19050674f42b7a1
|
This pull request was exported from Phabricator. Differential Revision: D33812933 |
drarmstr
force-pushed
the
export-D33812933
branch
from
d5aad7c to
e9a0716
Compare
drarmstr
added a commit
to drarmstr/Recoil
that referenced
this pull request
Jan 29, 2022
…1572) Summary: Pull Request resolved: facebookexperimental#1572 Expose experimental `useTransition()` support for React 18 by exposing variants of Recoil hooks using a different rendering mode that works with `useTransition()`: * `useRecoilValue_TRANSITION_SUPPORT_UNSTABLE()` * `useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE()` * `useRecoilState_TRANSITION_SUPPORT_UNSTABLE()` Example usage to display previous state while a selector is pending: ``` function QueryResults() { const queryParams = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom); const results = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(myQuerySelector(queryParams)); return results; } function MyApp() { const [queryParams, setQueryParams] = useRecoilState_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom); const [inTransition, startTransition] = useTransition(); return ( <div> {inTransition ? <div>[Loading new results...]</div> : ''} Results: <React.Suspense><QueryResults /></React.Suspense> <button onClick={() => { startTransition(() => { setQueryParams(...new params...); }); } > New Query </button> </div> ); } ``` Reviewed By: habond Differential Revision: D33812933 fbshipit-source-id: 62968b2c855dd75326ee522a5bff6078712fb3e7
|
This pull request was exported from Phabricator. Differential Revision: D33812933 |
drarmstr
force-pushed
the
export-D33812933
branch
from
e9a0716 to
66065f1
Compare
Summary: Pull Request resolved: facebookexperimental#1569 Enable unit tests for `useRecoilTransaction()` tests that write state. Test that subsequent reads in the same transaction obtain the latest value. Also fix atom effects to use the `'set'` trigger when initiated from a `set()` in a transaction. Differential Revision: https://www.internalfb.com/diff/D33677172?entry_point=27 fbshipit-source-id: 48edbe74175225bedc9104889a36be32d2765c6d
Summary: * Add `isRetained()` to `Snapshot` methods * Remove `undefined` from `type` in `RecoilStateInfo` Drive-by cleanup of wording in warning when using released snapshots to change pseudo-function name to avoid starting with `use` so it doesn't look like a hook. Differential Revision: https://www.internalfb.com/diff/D33593402?entry_point=27 fbshipit-source-id: 2f9d5ce58b8d0be27ef755aec9831213495dd955
…1572) Summary: Pull Request resolved: facebookexperimental#1572 Expose experimental `useTransition()` support for React 18 by exposing variants of Recoil hooks using a different rendering mode that works with `useTransition()`: * `useRecoilValue_TRANSITION_SUPPORT_UNSTABLE()` * `useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE()` * `useRecoilState_TRANSITION_SUPPORT_UNSTABLE()` Example usage to display previous state while a selector is pending: ``` function QueryResults() { const queryParams = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom); const results = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(myQuerySelector(queryParams)); return results; } function MyApp() { const [queryParams, setQueryParams] = useRecoilState_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom); const [inTransition, startTransition] = useTransition(); return ( <div> {inTransition ? <div>[Loading new results...]</div> : ''} Results: <React.Suspense><QueryResults /></React.Suspense> <button onClick={() => { startTransition(() => { setQueryParams(...new params...); }); } > New Query </button> </div> ); } ``` Reviewed By: habond Differential Revision: D33812933 fbshipit-source-id: e1866dda017a2b4d02406c33f47f698d26d1c8c6
|
This pull request was exported from Phabricator. Differential Revision: D33812933 |
drarmstr
force-pushed
the
export-D33812933
branch
from
66065f1 to
5e3c05d
Compare
AlexGuz23
pushed a commit
to AlexGuz23/Recoil
that referenced
this pull request
Nov 3, 2022
Summary: Pull Request resolved: facebookexperimental/Recoil#1572 Expose experimental `useTransition()` support for React 18 by exposing variants of Recoil hooks using a different rendering mode that works with `useTransition()`: * `useRecoilValue_TRANSITION_SUPPORT_UNSTABLE()` * `useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE()` * `useRecoilState_TRANSITION_SUPPORT_UNSTABLE()` Example usage to display previous state while a selector is pending: ``` function QueryResults() { const queryParams = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom); const results = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(myQuerySelector(queryParams)); return results; } function MyApp() { const [queryParams, setQueryParams] = useRecoilState_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom); const [inTransition, startTransition] = useTransition(); return ( <div> {inTransition ? <div>[Loading new results...]</div> : ''} Results: <React.Suspense><QueryResults /></React.Suspense> <button onClick={() => { startTransition(() => { setQueryParams(...new params...); }); } > New Query </button> </div> ); } ``` Reviewed By: habond Differential Revision: D33812933 fbshipit-source-id: 1c4c80a6d6acfe1626dc815abf6358a02a0d6f5f
snipershooter0701
pushed a commit
to snipershooter0701/Recoil
that referenced
this pull request
Mar 5, 2023
Summary: Pull Request resolved: facebookexperimental/Recoil#1572 Expose experimental `useTransition()` support for React 18 by exposing variants of Recoil hooks using a different rendering mode that works with `useTransition()`: * `useRecoilValue_TRANSITION_SUPPORT_UNSTABLE()` * `useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE()` * `useRecoilState_TRANSITION_SUPPORT_UNSTABLE()` Example usage to display previous state while a selector is pending: ``` function QueryResults() { const queryParams = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom); const results = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(myQuerySelector(queryParams)); return results; } function MyApp() { const [queryParams, setQueryParams] = useRecoilState_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom); const [inTransition, startTransition] = useTransition(); return ( <div> {inTransition ? <div>[Loading new results...]</div> : ''} Results: <React.Suspense><QueryResults /></React.Suspense> <button onClick={() => { startTransition(() => { setQueryParams(...new params...); }); } > New Query </button> </div> ); } ``` Reviewed By: habond Differential Revision: D33812933 fbshipit-source-id: 1c4c80a6d6acfe1626dc815abf6358a02a0d6f5f
eagle2722
added a commit
to eagle2722/Recoil
that referenced
this pull request
Sep 21, 2024
Summary: Pull Request resolved: facebookexperimental/Recoil#1572 Expose experimental `useTransition()` support for React 18 by exposing variants of Recoil hooks using a different rendering mode that works with `useTransition()`: * `useRecoilValue_TRANSITION_SUPPORT_UNSTABLE()` * `useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE()` * `useRecoilState_TRANSITION_SUPPORT_UNSTABLE()` Example usage to display previous state while a selector is pending: ``` function QueryResults() { const queryParams = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom); const results = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(myQuerySelector(queryParams)); return results; } function MyApp() { const [queryParams, setQueryParams] = useRecoilState_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom); const [inTransition, startTransition] = useTransition(); return ( <div> {inTransition ? <div>[Loading new results...]</div> : ''} Results: <React.Suspense><QueryResults /></React.Suspense> <button onClick={() => { startTransition(() => { setQueryParams(...new params...); }); } > New Query </button> </div> ); } ``` Reviewed By: habond Differential Revision: D33812933 fbshipit-source-id: 1c4c80a6d6acfe1626dc815abf6358a02a0d6f5f
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
Expose experimental
useTransition()support for React 18 by exposing variants of Recoil hooks using a different rendering mode that works withuseTransition():useRecoilValue_TRANSITION_SUPPORT_UNSTABLE()useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE()useRecoilState_TRANSITION_SUPPORT_UNSTABLE()Example usage to display previous state while a selector is pending:
Reviewed By: habond
Differential Revision: D33812933