From 9e60efa0efa8ca77cd31953eb5a26c40038a3741 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Tue, 19 May 2026 09:39:29 -0600 Subject: [PATCH 1/3] Remove unused isPending from RouterContext Pending UI is derived by comparing location and nextLocation, so isPending from useTransition was never read from context. Drop it from context values, use a discarded binding for useTransition, and update the pending-ui exercise notes. Co-authored-by: Cursor --- exercises/04.router/02.problem.pending-ui/README.mdx | 8 ++++---- exercises/04.router/02.problem.pending-ui/ui/index.js | 4 ++-- exercises/04.router/02.solution.pending-ui/ui/index.js | 3 +-- .../04.router/03.problem.race-conditions/ui/index.js | 3 +-- .../04.router/03.solution.race-conditions/ui/index.js | 3 +-- exercises/04.router/04.problem.history/ui/index.js | 3 +-- exercises/04.router/04.solution.history/ui/index.js | 3 +-- exercises/04.router/05.problem.cache/ui/index.js | 3 +-- exercises/04.router/05.solution.cache/ui/index.js | 3 +-- .../05.actions/01.problem.action-reference/ui/index.js | 3 +-- .../05.actions/01.solution.action-reference/ui/index.js | 3 +-- exercises/05.actions/02.problem.client/ui/index.js | 3 +-- exercises/05.actions/02.solution.client/ui/index.js | 3 +-- exercises/05.actions/03.problem.server/ui/index.js | 3 +-- exercises/05.actions/03.solution.server/ui/index.js | 3 +-- exercises/05.actions/04.problem.revalidation/ui/index.js | 3 +-- exercises/05.actions/04.solution.revalidation/ui/index.js | 3 +-- .../05.problem.history-revalidation/ui/index.js | 3 +-- .../05.solution.history-revalidation/ui/index.js | 3 +-- 19 files changed, 23 insertions(+), 40 deletions(-) diff --git a/exercises/04.router/02.problem.pending-ui/README.mdx b/exercises/04.router/02.problem.pending-ui/README.mdx index e312afc..a75454e 100644 --- a/exercises/04.router/02.problem.pending-ui/README.mdx +++ b/exercises/04.router/02.problem.pending-ui/README.mdx @@ -13,15 +13,15 @@ To be able to do this effectively, we need a few things: is changing We've already got our transition wrapped in a `startTransition`, but this is the -global one from `react`. We need to use one from `useTransition` instead so we -get access to the `isPending` state. +global one from `react`. We need to use one from `useTransition` instead so our +navigation updates are marked as transitions. Then we'll change our `location` to be a `nextLocation` and then use `useDeferredValue` to get the `location` so that it remains unchanged until the transition is complete. -Then we can add the `isPending` and `nextLocation` to our router context and use -that to determine pending states for our UI. +Then we can add `nextLocation` to our router context and compare it with +`location` to determine pending states for our UI. 🧝‍♂️ You're going to want to use the `parseLocationState` utility I made for this one. Here's how it works: diff --git a/exercises/04.router/02.problem.pending-ui/ui/index.js b/exercises/04.router/02.problem.pending-ui/ui/index.js index 07b0083..5aeba51 100644 --- a/exercises/04.router/02.problem.pending-ui/ui/index.js +++ b/exercises/04.router/02.problem.pending-ui/ui/index.js @@ -32,7 +32,7 @@ function Root() { // 🐨 change this to nextLocation const [location, setLocation] = useState(initialLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - // 🐨 call useTransition here to get isPending and startTransition + // 🐨 call useTransition here to get startTransition // 🐨 create a location variable set to useDeferredValue of the nextLocation @@ -61,7 +61,7 @@ function Root() { value: { navigate, location, - // 🐨 add the nextLocation and isPending to this context value + // 🐨 add the nextLocation to this context value }, }, use(contentPromise), diff --git a/exercises/04.router/02.solution.pending-ui/ui/index.js b/exercises/04.router/02.solution.pending-ui/ui/index.js index c554c1b..462be5f 100644 --- a/exercises/04.router/02.solution.pending-ui/ui/index.js +++ b/exercises/04.router/02.solution.pending-ui/ui/index.js @@ -29,7 +29,7 @@ const initialContentPromise = createFromFetch(fetchContent(initialLocation)) function Root() { const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) @@ -59,7 +59,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/03.problem.race-conditions/ui/index.js b/exercises/04.router/03.problem.race-conditions/ui/index.js index e8cd5e0..80ccbe1 100644 --- a/exercises/04.router/03.problem.race-conditions/ui/index.js +++ b/exercises/04.router/03.problem.race-conditions/ui/index.js @@ -32,7 +32,7 @@ function Root() { // 🐨 create a latestNav ref here which you can initialize to null if you like const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) @@ -65,7 +65,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/03.solution.race-conditions/ui/index.js b/exercises/04.router/03.solution.race-conditions/ui/index.js index 5e500d2..9c162b7 100644 --- a/exercises/04.router/03.solution.race-conditions/ui/index.js +++ b/exercises/04.router/03.solution.race-conditions/ui/index.js @@ -31,7 +31,7 @@ function Root() { const latestNav = useRef(null) const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) @@ -64,7 +64,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/04.problem.history/ui/index.js b/exercises/04.router/04.problem.history/ui/index.js index c82fd02..dbd26da 100644 --- a/exercises/04.router/04.problem.history/ui/index.js +++ b/exercises/04.router/04.problem.history/ui/index.js @@ -33,7 +33,7 @@ function Root() { const latestNav = useRef(null) const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) @@ -76,7 +76,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/04.solution.history/ui/index.js b/exercises/04.router/04.solution.history/ui/index.js index 7d417de..6f4899e 100644 --- a/exercises/04.router/04.solution.history/ui/index.js +++ b/exercises/04.router/04.solution.history/ui/index.js @@ -32,7 +32,7 @@ function Root() { const latestNav = useRef(null) const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) @@ -79,7 +79,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/05.problem.cache/ui/index.js b/exercises/04.router/05.problem.cache/ui/index.js index 35c6052..f97700a 100644 --- a/exercises/04.router/05.problem.cache/ui/index.js +++ b/exercises/04.router/05.problem.cache/ui/index.js @@ -43,7 +43,7 @@ function Root() { const [nextLocation, setNextLocation] = useState(getGlobalLocation) // 🐨 change this to contentKey const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) // 🐨 get the contentPromise from the contentCache by the contentKey @@ -102,7 +102,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/05.solution.cache/ui/index.js b/exercises/04.router/05.solution.cache/ui/index.js index 5b5cb1a..607e37d 100644 --- a/exercises/04.router/05.solution.cache/ui/index.js +++ b/exercises/04.router/05.solution.cache/ui/index.js @@ -41,7 +41,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -96,7 +96,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/05.actions/01.problem.action-reference/ui/index.js b/exercises/05.actions/01.problem.action-reference/ui/index.js index 5b5cb1a..607e37d 100644 --- a/exercises/05.actions/01.problem.action-reference/ui/index.js +++ b/exercises/05.actions/01.problem.action-reference/ui/index.js @@ -41,7 +41,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -96,7 +96,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/05.actions/01.solution.action-reference/ui/index.js b/exercises/05.actions/01.solution.action-reference/ui/index.js index 5b5cb1a..607e37d 100644 --- a/exercises/05.actions/01.solution.action-reference/ui/index.js +++ b/exercises/05.actions/01.solution.action-reference/ui/index.js @@ -41,7 +41,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -96,7 +96,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/05.actions/02.problem.client/ui/index.js b/exercises/05.actions/02.problem.client/ui/index.js index b615a2c..def1ee5 100644 --- a/exercises/05.actions/02.problem.client/ui/index.js +++ b/exercises/05.actions/02.problem.client/ui/index.js @@ -52,7 +52,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -107,7 +107,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/05.actions/02.solution.client/ui/index.js b/exercises/05.actions/02.solution.client/ui/index.js index 9397518..5262ec0 100644 --- a/exercises/05.actions/02.solution.client/ui/index.js +++ b/exercises/05.actions/02.solution.client/ui/index.js @@ -53,7 +53,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -108,7 +108,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/05.actions/03.problem.server/ui/index.js b/exercises/05.actions/03.problem.server/ui/index.js index bb0d758..52a9ea2 100644 --- a/exercises/05.actions/03.problem.server/ui/index.js +++ b/exercises/05.actions/03.problem.server/ui/index.js @@ -53,7 +53,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -108,7 +108,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, // 🐨 the contentPromise is now an object with a root property, update this diff --git a/exercises/05.actions/03.solution.server/ui/index.js b/exercises/05.actions/03.solution.server/ui/index.js index 7cb9ace..63b0980 100644 --- a/exercises/05.actions/03.solution.server/ui/index.js +++ b/exercises/05.actions/03.solution.server/ui/index.js @@ -53,7 +53,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -108,7 +108,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise).root, diff --git a/exercises/05.actions/04.problem.revalidation/ui/index.js b/exercises/05.actions/04.problem.revalidation/ui/index.js index 753e4c8..1fd0067 100644 --- a/exercises/05.actions/04.problem.revalidation/ui/index.js +++ b/exercises/05.actions/04.problem.revalidation/ui/index.js @@ -80,7 +80,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() // 🐨 add a useEffect here that reassigns updateContentKey to a function that // accepts a newContentKey and calls setContentKey(newContentKey) in a startTransition @@ -141,7 +141,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise).root, diff --git a/exercises/05.actions/04.solution.revalidation/ui/index.js b/exercises/05.actions/04.solution.revalidation/ui/index.js index ddb7ac5..e6c869e 100644 --- a/exercises/05.actions/04.solution.revalidation/ui/index.js +++ b/exercises/05.actions/04.solution.revalidation/ui/index.js @@ -73,7 +73,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() // set the updateContentKey function in a useEffect to avoid issues with // concurrent rendering (useDeferredValue will create throw-away renders). @@ -136,7 +136,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise).root, diff --git a/exercises/05.actions/05.problem.history-revalidation/ui/index.js b/exercises/05.actions/05.problem.history-revalidation/ui/index.js index 015cbdc..a0b0a84 100644 --- a/exercises/05.actions/05.problem.history-revalidation/ui/index.js +++ b/exercises/05.actions/05.problem.history-revalidation/ui/index.js @@ -73,7 +73,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() // set the updateContentKey function in a useEffect to avoid issues with // concurrent rendering (useDeferredValue will create throw-away renders). @@ -145,7 +145,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise).root, diff --git a/exercises/05.actions/05.solution.history-revalidation/ui/index.js b/exercises/05.actions/05.solution.history-revalidation/ui/index.js index a1bc355..c4c835f 100644 --- a/exercises/05.actions/05.solution.history-revalidation/ui/index.js +++ b/exercises/05.actions/05.solution.history-revalidation/ui/index.js @@ -73,7 +73,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() // set the updateContentKey function in a useEffect to avoid issues with // concurrent rendering (useDeferredValue will create throw-away renders). @@ -142,7 +142,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise).root, From ee225aec5d28e6dee2c3e7f12fb02ffe398c9daa Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Tue, 19 May 2026 09:41:26 -0600 Subject: [PATCH 2/3] Use isPending from RouterContext in pending UI Keep isPending in RouterContext and combine it with location vs nextLocation comparisons so pending states only show during an active transition. Update the pending-ui exercise notes accordingly. Fixes #27 Co-authored-by: Cursor --- exercises/04.router/02.problem.pending-ui/README.mdx | 10 ++++++---- exercises/04.router/02.problem.pending-ui/ui/index.js | 4 ++-- .../02.problem.pending-ui/ui/ship-details-pending.js | 6 +++--- .../04.router/02.problem.pending-ui/ui/ship-search.js | 6 +++--- exercises/04.router/02.solution.pending-ui/ui/index.js | 3 ++- .../02.solution.pending-ui/ui/ship-details-pending.js | 7 ++++--- .../04.router/02.solution.pending-ui/ui/ship-search.js | 7 ++++--- .../04.router/03.problem.race-conditions/ui/index.js | 3 ++- .../ui/ship-details-pending.js | 7 ++++--- .../03.problem.race-conditions/ui/ship-search.js | 7 ++++--- .../04.router/03.solution.race-conditions/ui/index.js | 3 ++- .../ui/ship-details-pending.js | 7 ++++--- .../03.solution.race-conditions/ui/ship-search.js | 7 ++++--- exercises/04.router/04.problem.history/ui/index.js | 3 ++- .../04.problem.history/ui/ship-details-pending.js | 7 ++++--- .../04.router/04.problem.history/ui/ship-search.js | 7 ++++--- exercises/04.router/04.solution.history/ui/index.js | 3 ++- .../04.solution.history/ui/ship-details-pending.js | 7 ++++--- .../04.router/04.solution.history/ui/ship-search.js | 7 ++++--- exercises/04.router/05.problem.cache/ui/index.js | 3 ++- .../05.problem.cache/ui/ship-details-pending.js | 7 ++++--- exercises/04.router/05.problem.cache/ui/ship-search.js | 7 ++++--- exercises/04.router/05.solution.cache/ui/index.js | 3 ++- .../05.solution.cache/ui/ship-details-pending.js | 7 ++++--- .../04.router/05.solution.cache/ui/ship-search.js | 7 ++++--- .../05.actions/01.problem.action-reference/ui/index.js | 3 ++- .../ui/ship-details-pending.js | 7 ++++--- .../01.problem.action-reference/ui/ship-search.js | 7 ++++--- .../01.solution.action-reference/ui/index.js | 3 ++- .../ui/ship-details-pending.js | 7 ++++--- .../01.solution.action-reference/ui/ship-search.js | 7 ++++--- exercises/05.actions/02.problem.client/ui/index.js | 3 ++- .../02.problem.client/ui/ship-details-pending.js | 7 ++++--- .../05.actions/02.problem.client/ui/ship-search.js | 7 ++++--- exercises/05.actions/02.solution.client/ui/index.js | 3 ++- .../02.solution.client/ui/ship-details-pending.js | 7 ++++--- .../05.actions/02.solution.client/ui/ship-search.js | 7 ++++--- exercises/05.actions/03.problem.server/ui/index.js | 3 ++- .../03.problem.server/ui/ship-details-pending.js | 7 ++++--- .../05.actions/03.problem.server/ui/ship-search.js | 7 ++++--- exercises/05.actions/03.solution.server/ui/index.js | 3 ++- .../03.solution.server/ui/ship-details-pending.js | 7 ++++--- .../05.actions/03.solution.server/ui/ship-search.js | 7 ++++--- .../05.actions/04.problem.revalidation/ui/index.js | 3 ++- .../04.problem.revalidation/ui/ship-details-pending.js | 7 ++++--- .../04.problem.revalidation/ui/ship-search.js | 7 ++++--- .../05.actions/04.solution.revalidation/ui/index.js | 3 ++- .../ui/ship-details-pending.js | 7 ++++--- .../04.solution.revalidation/ui/ship-search.js | 7 ++++--- .../05.problem.history-revalidation/ui/index.js | 3 ++- .../ui/ship-details-pending.js | 7 ++++--- .../05.problem.history-revalidation/ui/ship-search.js | 7 ++++--- .../05.solution.history-revalidation/ui/index.js | 3 ++- .../ui/ship-details-pending.js | 7 ++++--- .../05.solution.history-revalidation/ui/ship-search.js | 7 ++++--- 55 files changed, 184 insertions(+), 131 deletions(-) diff --git a/exercises/04.router/02.problem.pending-ui/README.mdx b/exercises/04.router/02.problem.pending-ui/README.mdx index a75454e..3ae824d 100644 --- a/exercises/04.router/02.problem.pending-ui/README.mdx +++ b/exercises/04.router/02.problem.pending-ui/README.mdx @@ -13,15 +13,17 @@ To be able to do this effectively, we need a few things: is changing We've already got our transition wrapped in a `startTransition`, but this is the -global one from `react`. We need to use one from `useTransition` instead so our -navigation updates are marked as transitions. +global one from `react`. We need to use one from `useTransition` instead so we +get access to the `isPending` state. Then we'll change our `location` to be a `nextLocation` and then use `useDeferredValue` to get the `location` so that it remains unchanged until the transition is complete. -Then we can add `nextLocation` to our router context and compare it with -`location` to determine pending states for our UI. +Then we can add `isPending`, `nextLocation`, and `location` to our router +context. Compare `nextLocation` with `location` to see which part of the URL is +changing, and combine that with `isPending` so we only show pending UI while a +transition is actually in progress. 🧝‍♂️ You're going to want to use the `parseLocationState` utility I made for this one. Here's how it works: diff --git a/exercises/04.router/02.problem.pending-ui/ui/index.js b/exercises/04.router/02.problem.pending-ui/ui/index.js index 5aeba51..07b0083 100644 --- a/exercises/04.router/02.problem.pending-ui/ui/index.js +++ b/exercises/04.router/02.problem.pending-ui/ui/index.js @@ -32,7 +32,7 @@ function Root() { // 🐨 change this to nextLocation const [location, setLocation] = useState(initialLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - // 🐨 call useTransition here to get startTransition + // 🐨 call useTransition here to get isPending and startTransition // 🐨 create a location variable set to useDeferredValue of the nextLocation @@ -61,7 +61,7 @@ function Root() { value: { navigate, location, - // 🐨 add the nextLocation to this context value + // 🐨 add the nextLocation and isPending to this context value }, }, use(contentPromise), diff --git a/exercises/04.router/02.problem.pending-ui/ui/ship-details-pending.js b/exercises/04.router/02.problem.pending-ui/ui/ship-details-pending.js index f48ad02..273dff8 100644 --- a/exercises/04.router/02.problem.pending-ui/ui/ship-details-pending.js +++ b/exercises/04.router/02.problem.pending-ui/ui/ship-details-pending.js @@ -7,9 +7,9 @@ import { createElement as h } from 'react' // import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - // 🐨 get the location and nextLocation from useRouter - // 🐨 the details are pending if the shipId of the nextLocation differs from - // the shipId of the current location + // 🐨 get the location, nextLocation, and isPending from useRouter + // 🐨 the details are pending if isPending is true and the shipId of the + // nextLocation differs from the shipId of the current location // 💰 use parseLocationState to get the shipId. // 💯 for extra credit, avoid a flash of loading state with useSpinDelay const isShipDetailsPending = false diff --git a/exercises/04.router/02.problem.pending-ui/ui/ship-search.js b/exercises/04.router/02.problem.pending-ui/ui/ship-search.js index 72d53cb..bf8b22f 100644 --- a/exercises/04.router/02.problem.pending-ui/ui/ship-search.js +++ b/exercises/04.router/02.problem.pending-ui/ui/ship-search.js @@ -8,10 +8,10 @@ import { mergeLocationState, useRouter } from './router.js' // import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - // 🐨 get the nextLocation here + // 🐨 get the nextLocation and isPending here const { navigate, location } = useRouter() - // 🐨 we're pending if the nextLocation's search is different from the current - // location's search + // 🐨 we're pending if isPending is true and the nextLocation's search is + // different from the current location's search // 💰 you'll want to use parseLocationState for this // 💯 for extra credit, avoid a flash of loading state with useSpinDelay const isShipSearchPending = false diff --git a/exercises/04.router/02.solution.pending-ui/ui/index.js b/exercises/04.router/02.solution.pending-ui/ui/index.js index 462be5f..c554c1b 100644 --- a/exercises/04.router/02.solution.pending-ui/ui/index.js +++ b/exercises/04.router/02.solution.pending-ui/ui/index.js @@ -29,7 +29,7 @@ const initialContentPromise = createFromFetch(fetchContent(initialLocation)) function Root() { const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() const location = useDeferredValue(nextLocation) @@ -59,6 +59,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/02.solution.pending-ui/ui/ship-details-pending.js b/exercises/04.router/02.solution.pending-ui/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/04.router/02.solution.pending-ui/ui/ship-details-pending.js +++ b/exercises/04.router/02.solution.pending-ui/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/02.solution.pending-ui/ui/ship-search.js b/exercises/04.router/02.solution.pending-ui/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/04.router/02.solution.pending-ui/ui/ship-search.js +++ b/exercises/04.router/02.solution.pending-ui/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/03.problem.race-conditions/ui/index.js b/exercises/04.router/03.problem.race-conditions/ui/index.js index 80ccbe1..e8cd5e0 100644 --- a/exercises/04.router/03.problem.race-conditions/ui/index.js +++ b/exercises/04.router/03.problem.race-conditions/ui/index.js @@ -32,7 +32,7 @@ function Root() { // 🐨 create a latestNav ref here which you can initialize to null if you like const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() const location = useDeferredValue(nextLocation) @@ -65,6 +65,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/03.problem.race-conditions/ui/ship-details-pending.js b/exercises/04.router/03.problem.race-conditions/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/04.router/03.problem.race-conditions/ui/ship-details-pending.js +++ b/exercises/04.router/03.problem.race-conditions/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/03.problem.race-conditions/ui/ship-search.js b/exercises/04.router/03.problem.race-conditions/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/04.router/03.problem.race-conditions/ui/ship-search.js +++ b/exercises/04.router/03.problem.race-conditions/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/03.solution.race-conditions/ui/index.js b/exercises/04.router/03.solution.race-conditions/ui/index.js index 9c162b7..5e500d2 100644 --- a/exercises/04.router/03.solution.race-conditions/ui/index.js +++ b/exercises/04.router/03.solution.race-conditions/ui/index.js @@ -31,7 +31,7 @@ function Root() { const latestNav = useRef(null) const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() const location = useDeferredValue(nextLocation) @@ -64,6 +64,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/03.solution.race-conditions/ui/ship-details-pending.js b/exercises/04.router/03.solution.race-conditions/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/04.router/03.solution.race-conditions/ui/ship-details-pending.js +++ b/exercises/04.router/03.solution.race-conditions/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/03.solution.race-conditions/ui/ship-search.js b/exercises/04.router/03.solution.race-conditions/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/04.router/03.solution.race-conditions/ui/ship-search.js +++ b/exercises/04.router/03.solution.race-conditions/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/04.problem.history/ui/index.js b/exercises/04.router/04.problem.history/ui/index.js index dbd26da..c82fd02 100644 --- a/exercises/04.router/04.problem.history/ui/index.js +++ b/exercises/04.router/04.problem.history/ui/index.js @@ -33,7 +33,7 @@ function Root() { const latestNav = useRef(null) const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() const location = useDeferredValue(nextLocation) @@ -76,6 +76,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/04.problem.history/ui/ship-details-pending.js b/exercises/04.router/04.problem.history/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/04.router/04.problem.history/ui/ship-details-pending.js +++ b/exercises/04.router/04.problem.history/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/04.problem.history/ui/ship-search.js b/exercises/04.router/04.problem.history/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/04.router/04.problem.history/ui/ship-search.js +++ b/exercises/04.router/04.problem.history/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/04.solution.history/ui/index.js b/exercises/04.router/04.solution.history/ui/index.js index 6f4899e..7d417de 100644 --- a/exercises/04.router/04.solution.history/ui/index.js +++ b/exercises/04.router/04.solution.history/ui/index.js @@ -32,7 +32,7 @@ function Root() { const latestNav = useRef(null) const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() const location = useDeferredValue(nextLocation) @@ -79,6 +79,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/04.solution.history/ui/ship-details-pending.js b/exercises/04.router/04.solution.history/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/04.router/04.solution.history/ui/ship-details-pending.js +++ b/exercises/04.router/04.solution.history/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/04.solution.history/ui/ship-search.js b/exercises/04.router/04.solution.history/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/04.router/04.solution.history/ui/ship-search.js +++ b/exercises/04.router/04.solution.history/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/05.problem.cache/ui/index.js b/exercises/04.router/05.problem.cache/ui/index.js index f97700a..35c6052 100644 --- a/exercises/04.router/05.problem.cache/ui/index.js +++ b/exercises/04.router/05.problem.cache/ui/index.js @@ -43,7 +43,7 @@ function Root() { const [nextLocation, setNextLocation] = useState(getGlobalLocation) // 🐨 change this to contentKey const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() const location = useDeferredValue(nextLocation) // 🐨 get the contentPromise from the contentCache by the contentKey @@ -102,6 +102,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/05.problem.cache/ui/ship-details-pending.js b/exercises/04.router/05.problem.cache/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/04.router/05.problem.cache/ui/ship-details-pending.js +++ b/exercises/04.router/05.problem.cache/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/05.problem.cache/ui/ship-search.js b/exercises/04.router/05.problem.cache/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/04.router/05.problem.cache/ui/ship-search.js +++ b/exercises/04.router/05.problem.cache/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/05.solution.cache/ui/index.js b/exercises/04.router/05.solution.cache/ui/index.js index 607e37d..5b5cb1a 100644 --- a/exercises/04.router/05.solution.cache/ui/index.js +++ b/exercises/04.router/05.solution.cache/ui/index.js @@ -41,7 +41,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -96,6 +96,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/05.solution.cache/ui/ship-details-pending.js b/exercises/04.router/05.solution.cache/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/04.router/05.solution.cache/ui/ship-details-pending.js +++ b/exercises/04.router/05.solution.cache/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/05.solution.cache/ui/ship-search.js b/exercises/04.router/05.solution.cache/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/04.router/05.solution.cache/ui/ship-search.js +++ b/exercises/04.router/05.solution.cache/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/01.problem.action-reference/ui/index.js b/exercises/05.actions/01.problem.action-reference/ui/index.js index 607e37d..5b5cb1a 100644 --- a/exercises/05.actions/01.problem.action-reference/ui/index.js +++ b/exercises/05.actions/01.problem.action-reference/ui/index.js @@ -41,7 +41,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -96,6 +96,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise), diff --git a/exercises/05.actions/01.problem.action-reference/ui/ship-details-pending.js b/exercises/05.actions/01.problem.action-reference/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/05.actions/01.problem.action-reference/ui/ship-details-pending.js +++ b/exercises/05.actions/01.problem.action-reference/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/01.problem.action-reference/ui/ship-search.js b/exercises/05.actions/01.problem.action-reference/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/05.actions/01.problem.action-reference/ui/ship-search.js +++ b/exercises/05.actions/01.problem.action-reference/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/01.solution.action-reference/ui/index.js b/exercises/05.actions/01.solution.action-reference/ui/index.js index 607e37d..5b5cb1a 100644 --- a/exercises/05.actions/01.solution.action-reference/ui/index.js +++ b/exercises/05.actions/01.solution.action-reference/ui/index.js @@ -41,7 +41,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -96,6 +96,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise), diff --git a/exercises/05.actions/01.solution.action-reference/ui/ship-details-pending.js b/exercises/05.actions/01.solution.action-reference/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/05.actions/01.solution.action-reference/ui/ship-details-pending.js +++ b/exercises/05.actions/01.solution.action-reference/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/01.solution.action-reference/ui/ship-search.js b/exercises/05.actions/01.solution.action-reference/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/05.actions/01.solution.action-reference/ui/ship-search.js +++ b/exercises/05.actions/01.solution.action-reference/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/02.problem.client/ui/index.js b/exercises/05.actions/02.problem.client/ui/index.js index def1ee5..b615a2c 100644 --- a/exercises/05.actions/02.problem.client/ui/index.js +++ b/exercises/05.actions/02.problem.client/ui/index.js @@ -52,7 +52,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -107,6 +107,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise), diff --git a/exercises/05.actions/02.problem.client/ui/ship-details-pending.js b/exercises/05.actions/02.problem.client/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/05.actions/02.problem.client/ui/ship-details-pending.js +++ b/exercises/05.actions/02.problem.client/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/02.problem.client/ui/ship-search.js b/exercises/05.actions/02.problem.client/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/05.actions/02.problem.client/ui/ship-search.js +++ b/exercises/05.actions/02.problem.client/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/02.solution.client/ui/index.js b/exercises/05.actions/02.solution.client/ui/index.js index 5262ec0..9397518 100644 --- a/exercises/05.actions/02.solution.client/ui/index.js +++ b/exercises/05.actions/02.solution.client/ui/index.js @@ -53,7 +53,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -108,6 +108,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise), diff --git a/exercises/05.actions/02.solution.client/ui/ship-details-pending.js b/exercises/05.actions/02.solution.client/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/05.actions/02.solution.client/ui/ship-details-pending.js +++ b/exercises/05.actions/02.solution.client/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/02.solution.client/ui/ship-search.js b/exercises/05.actions/02.solution.client/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/05.actions/02.solution.client/ui/ship-search.js +++ b/exercises/05.actions/02.solution.client/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/03.problem.server/ui/index.js b/exercises/05.actions/03.problem.server/ui/index.js index 52a9ea2..bb0d758 100644 --- a/exercises/05.actions/03.problem.server/ui/index.js +++ b/exercises/05.actions/03.problem.server/ui/index.js @@ -53,7 +53,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -108,6 +108,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, // 🐨 the contentPromise is now an object with a root property, update this diff --git a/exercises/05.actions/03.problem.server/ui/ship-details-pending.js b/exercises/05.actions/03.problem.server/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/05.actions/03.problem.server/ui/ship-details-pending.js +++ b/exercises/05.actions/03.problem.server/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/03.problem.server/ui/ship-search.js b/exercises/05.actions/03.problem.server/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/05.actions/03.problem.server/ui/ship-search.js +++ b/exercises/05.actions/03.problem.server/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/03.solution.server/ui/index.js b/exercises/05.actions/03.solution.server/ui/index.js index 63b0980..7cb9ace 100644 --- a/exercises/05.actions/03.solution.server/ui/index.js +++ b/exercises/05.actions/03.solution.server/ui/index.js @@ -53,7 +53,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -108,6 +108,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise).root, diff --git a/exercises/05.actions/03.solution.server/ui/ship-details-pending.js b/exercises/05.actions/03.solution.server/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/05.actions/03.solution.server/ui/ship-details-pending.js +++ b/exercises/05.actions/03.solution.server/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/03.solution.server/ui/ship-search.js b/exercises/05.actions/03.solution.server/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/05.actions/03.solution.server/ui/ship-search.js +++ b/exercises/05.actions/03.solution.server/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/04.problem.revalidation/ui/index.js b/exercises/05.actions/04.problem.revalidation/ui/index.js index 1fd0067..753e4c8 100644 --- a/exercises/05.actions/04.problem.revalidation/ui/index.js +++ b/exercises/05.actions/04.problem.revalidation/ui/index.js @@ -80,7 +80,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() // 🐨 add a useEffect here that reassigns updateContentKey to a function that // accepts a newContentKey and calls setContentKey(newContentKey) in a startTransition @@ -141,6 +141,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise).root, diff --git a/exercises/05.actions/04.problem.revalidation/ui/ship-details-pending.js b/exercises/05.actions/04.problem.revalidation/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/05.actions/04.problem.revalidation/ui/ship-details-pending.js +++ b/exercises/05.actions/04.problem.revalidation/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/04.problem.revalidation/ui/ship-search.js b/exercises/05.actions/04.problem.revalidation/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/05.actions/04.problem.revalidation/ui/ship-search.js +++ b/exercises/05.actions/04.problem.revalidation/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/04.solution.revalidation/ui/index.js b/exercises/05.actions/04.solution.revalidation/ui/index.js index e6c869e..ddb7ac5 100644 --- a/exercises/05.actions/04.solution.revalidation/ui/index.js +++ b/exercises/05.actions/04.solution.revalidation/ui/index.js @@ -73,7 +73,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() // set the updateContentKey function in a useEffect to avoid issues with // concurrent rendering (useDeferredValue will create throw-away renders). @@ -136,6 +136,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise).root, diff --git a/exercises/05.actions/04.solution.revalidation/ui/ship-details-pending.js b/exercises/05.actions/04.solution.revalidation/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/05.actions/04.solution.revalidation/ui/ship-details-pending.js +++ b/exercises/05.actions/04.solution.revalidation/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/04.solution.revalidation/ui/ship-search.js b/exercises/05.actions/04.solution.revalidation/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/05.actions/04.solution.revalidation/ui/ship-search.js +++ b/exercises/05.actions/04.solution.revalidation/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/05.problem.history-revalidation/ui/index.js b/exercises/05.actions/05.problem.history-revalidation/ui/index.js index a0b0a84..015cbdc 100644 --- a/exercises/05.actions/05.problem.history-revalidation/ui/index.js +++ b/exercises/05.actions/05.problem.history-revalidation/ui/index.js @@ -73,7 +73,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() // set the updateContentKey function in a useEffect to avoid issues with // concurrent rendering (useDeferredValue will create throw-away renders). @@ -145,6 +145,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise).root, diff --git a/exercises/05.actions/05.problem.history-revalidation/ui/ship-details-pending.js b/exercises/05.actions/05.problem.history-revalidation/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/05.actions/05.problem.history-revalidation/ui/ship-details-pending.js +++ b/exercises/05.actions/05.problem.history-revalidation/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/05.problem.history-revalidation/ui/ship-search.js b/exercises/05.actions/05.problem.history-revalidation/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/05.actions/05.problem.history-revalidation/ui/ship-search.js +++ b/exercises/05.actions/05.problem.history-revalidation/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/05.solution.history-revalidation/ui/index.js b/exercises/05.actions/05.solution.history-revalidation/ui/index.js index c4c835f..a1bc355 100644 --- a/exercises/05.actions/05.solution.history-revalidation/ui/index.js +++ b/exercises/05.actions/05.solution.history-revalidation/ui/index.js @@ -73,7 +73,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [, startTransition] = useTransition() + const [isPending, startTransition] = useTransition() // set the updateContentKey function in a useEffect to avoid issues with // concurrent rendering (useDeferredValue will create throw-away renders). @@ -142,6 +142,7 @@ function Root() { navigate, location, nextLocation, + isPending, }, }, use(contentPromise).root, diff --git a/exercises/05.actions/05.solution.history-revalidation/ui/ship-details-pending.js b/exercises/05.actions/05.solution.history-revalidation/ui/ship-details-pending.js index 52bdc69..8d70e43 100644 --- a/exercises/05.actions/05.solution.history-revalidation/ui/ship-details-pending.js +++ b/exercises/05.actions/05.solution.history-revalidation/ui/ship-details-pending.js @@ -5,10 +5,11 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation } = useRouter() + const { location, nextLocation, isPending } = useRouter() const isShipDetailsPending = useSpinDelay( - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + isPending && + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/05.solution.history-revalidation/ui/ship-search.js b/exercises/05.actions/05.solution.history-revalidation/ui/ship-search.js index ce36358..ab36d04 100644 --- a/exercises/05.actions/05.solution.history-revalidation/ui/ship-search.js +++ b/exercises/05.actions/05.solution.history-revalidation/ui/ship-search.js @@ -6,10 +6,11 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation } = useRouter() + const { navigate, location, nextLocation, isPending } = useRouter() const isShipSearchPending = useSpinDelay( - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + isPending && + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) From 2b3e81c7162fa3b8f743e0319430419b364cc20c Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Tue, 19 May 2026 09:45:26 -0600 Subject: [PATCH 3/3] Remove unused isPending from RouterContext after pending-ui Drop isPending from RouterContext in exercises after the pending-ui step, where pending state is derived from location vs nextLocation. Leave the pending-ui exercise unchanged. Fixes #27 Co-authored-by: Cursor --- exercises/04.router/02.problem.pending-ui/README.mdx | 6 ++---- .../02.problem.pending-ui/ui/ship-details-pending.js | 6 +++--- .../04.router/02.problem.pending-ui/ui/ship-search.js | 6 +++--- .../02.solution.pending-ui/ui/ship-details-pending.js | 7 +++---- .../04.router/02.solution.pending-ui/ui/ship-search.js | 7 +++---- exercises/04.router/03.problem.race-conditions/ui/index.js | 3 +-- .../03.problem.race-conditions/ui/ship-details-pending.js | 7 +++---- .../04.router/03.problem.race-conditions/ui/ship-search.js | 7 +++---- .../04.router/03.solution.race-conditions/ui/index.js | 3 +-- .../03.solution.race-conditions/ui/ship-details-pending.js | 7 +++---- .../03.solution.race-conditions/ui/ship-search.js | 7 +++---- exercises/04.router/04.problem.history/ui/index.js | 3 +-- .../04.problem.history/ui/ship-details-pending.js | 7 +++---- exercises/04.router/04.problem.history/ui/ship-search.js | 7 +++---- exercises/04.router/04.solution.history/ui/index.js | 3 +-- .../04.solution.history/ui/ship-details-pending.js | 7 +++---- exercises/04.router/04.solution.history/ui/ship-search.js | 7 +++---- exercises/04.router/05.problem.cache/ui/index.js | 3 +-- .../04.router/05.problem.cache/ui/ship-details-pending.js | 7 +++---- exercises/04.router/05.problem.cache/ui/ship-search.js | 7 +++---- exercises/04.router/05.solution.cache/ui/index.js | 3 +-- .../04.router/05.solution.cache/ui/ship-details-pending.js | 7 +++---- exercises/04.router/05.solution.cache/ui/ship-search.js | 7 +++---- .../05.actions/01.problem.action-reference/ui/index.js | 3 +-- .../01.problem.action-reference/ui/ship-details-pending.js | 7 +++---- .../01.problem.action-reference/ui/ship-search.js | 7 +++---- .../05.actions/01.solution.action-reference/ui/index.js | 3 +-- .../ui/ship-details-pending.js | 7 +++---- .../01.solution.action-reference/ui/ship-search.js | 7 +++---- exercises/05.actions/02.problem.client/ui/index.js | 3 +-- .../02.problem.client/ui/ship-details-pending.js | 7 +++---- exercises/05.actions/02.problem.client/ui/ship-search.js | 7 +++---- exercises/05.actions/02.solution.client/ui/index.js | 3 +-- .../02.solution.client/ui/ship-details-pending.js | 7 +++---- exercises/05.actions/02.solution.client/ui/ship-search.js | 7 +++---- exercises/05.actions/03.problem.server/ui/index.js | 3 +-- .../03.problem.server/ui/ship-details-pending.js | 7 +++---- exercises/05.actions/03.problem.server/ui/ship-search.js | 7 +++---- exercises/05.actions/03.solution.server/ui/index.js | 3 +-- .../03.solution.server/ui/ship-details-pending.js | 7 +++---- exercises/05.actions/03.solution.server/ui/ship-search.js | 7 +++---- exercises/05.actions/04.problem.revalidation/ui/index.js | 3 +-- .../04.problem.revalidation/ui/ship-details-pending.js | 7 +++---- .../05.actions/04.problem.revalidation/ui/ship-search.js | 7 +++---- exercises/05.actions/04.solution.revalidation/ui/index.js | 3 +-- .../04.solution.revalidation/ui/ship-details-pending.js | 7 +++---- .../05.actions/04.solution.revalidation/ui/ship-search.js | 7 +++---- .../05.actions/05.problem.history-revalidation/ui/index.js | 3 +-- .../ui/ship-details-pending.js | 7 +++---- .../05.problem.history-revalidation/ui/ship-search.js | 7 +++---- .../05.solution.history-revalidation/ui/index.js | 3 +-- .../ui/ship-details-pending.js | 7 +++---- .../05.solution.history-revalidation/ui/ship-search.js | 7 +++---- 53 files changed, 126 insertions(+), 178 deletions(-) diff --git a/exercises/04.router/02.problem.pending-ui/README.mdx b/exercises/04.router/02.problem.pending-ui/README.mdx index 3ae824d..e312afc 100644 --- a/exercises/04.router/02.problem.pending-ui/README.mdx +++ b/exercises/04.router/02.problem.pending-ui/README.mdx @@ -20,10 +20,8 @@ Then we'll change our `location` to be a `nextLocation` and then use `useDeferredValue` to get the `location` so that it remains unchanged until the transition is complete. -Then we can add `isPending`, `nextLocation`, and `location` to our router -context. Compare `nextLocation` with `location` to see which part of the URL is -changing, and combine that with `isPending` so we only show pending UI while a -transition is actually in progress. +Then we can add the `isPending` and `nextLocation` to our router context and use +that to determine pending states for our UI. 🧝‍♂️ You're going to want to use the `parseLocationState` utility I made for this one. Here's how it works: diff --git a/exercises/04.router/02.problem.pending-ui/ui/ship-details-pending.js b/exercises/04.router/02.problem.pending-ui/ui/ship-details-pending.js index 273dff8..f48ad02 100644 --- a/exercises/04.router/02.problem.pending-ui/ui/ship-details-pending.js +++ b/exercises/04.router/02.problem.pending-ui/ui/ship-details-pending.js @@ -7,9 +7,9 @@ import { createElement as h } from 'react' // import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - // 🐨 get the location, nextLocation, and isPending from useRouter - // 🐨 the details are pending if isPending is true and the shipId of the - // nextLocation differs from the shipId of the current location + // 🐨 get the location and nextLocation from useRouter + // 🐨 the details are pending if the shipId of the nextLocation differs from + // the shipId of the current location // 💰 use parseLocationState to get the shipId. // 💯 for extra credit, avoid a flash of loading state with useSpinDelay const isShipDetailsPending = false diff --git a/exercises/04.router/02.problem.pending-ui/ui/ship-search.js b/exercises/04.router/02.problem.pending-ui/ui/ship-search.js index bf8b22f..72d53cb 100644 --- a/exercises/04.router/02.problem.pending-ui/ui/ship-search.js +++ b/exercises/04.router/02.problem.pending-ui/ui/ship-search.js @@ -8,10 +8,10 @@ import { mergeLocationState, useRouter } from './router.js' // import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - // 🐨 get the nextLocation and isPending here + // 🐨 get the nextLocation here const { navigate, location } = useRouter() - // 🐨 we're pending if isPending is true and the nextLocation's search is - // different from the current location's search + // 🐨 we're pending if the nextLocation's search is different from the current + // location's search // 💰 you'll want to use parseLocationState for this // 💯 for extra credit, avoid a flash of loading state with useSpinDelay const isShipSearchPending = false diff --git a/exercises/04.router/02.solution.pending-ui/ui/ship-details-pending.js b/exercises/04.router/02.solution.pending-ui/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/04.router/02.solution.pending-ui/ui/ship-details-pending.js +++ b/exercises/04.router/02.solution.pending-ui/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/02.solution.pending-ui/ui/ship-search.js b/exercises/04.router/02.solution.pending-ui/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/04.router/02.solution.pending-ui/ui/ship-search.js +++ b/exercises/04.router/02.solution.pending-ui/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/03.problem.race-conditions/ui/index.js b/exercises/04.router/03.problem.race-conditions/ui/index.js index e8cd5e0..80ccbe1 100644 --- a/exercises/04.router/03.problem.race-conditions/ui/index.js +++ b/exercises/04.router/03.problem.race-conditions/ui/index.js @@ -32,7 +32,7 @@ function Root() { // 🐨 create a latestNav ref here which you can initialize to null if you like const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) @@ -65,7 +65,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/03.problem.race-conditions/ui/ship-details-pending.js b/exercises/04.router/03.problem.race-conditions/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/04.router/03.problem.race-conditions/ui/ship-details-pending.js +++ b/exercises/04.router/03.problem.race-conditions/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/03.problem.race-conditions/ui/ship-search.js b/exercises/04.router/03.problem.race-conditions/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/04.router/03.problem.race-conditions/ui/ship-search.js +++ b/exercises/04.router/03.problem.race-conditions/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/03.solution.race-conditions/ui/index.js b/exercises/04.router/03.solution.race-conditions/ui/index.js index 5e500d2..9c162b7 100644 --- a/exercises/04.router/03.solution.race-conditions/ui/index.js +++ b/exercises/04.router/03.solution.race-conditions/ui/index.js @@ -31,7 +31,7 @@ function Root() { const latestNav = useRef(null) const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) @@ -64,7 +64,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/03.solution.race-conditions/ui/ship-details-pending.js b/exercises/04.router/03.solution.race-conditions/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/04.router/03.solution.race-conditions/ui/ship-details-pending.js +++ b/exercises/04.router/03.solution.race-conditions/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/03.solution.race-conditions/ui/ship-search.js b/exercises/04.router/03.solution.race-conditions/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/04.router/03.solution.race-conditions/ui/ship-search.js +++ b/exercises/04.router/03.solution.race-conditions/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/04.problem.history/ui/index.js b/exercises/04.router/04.problem.history/ui/index.js index c82fd02..dbd26da 100644 --- a/exercises/04.router/04.problem.history/ui/index.js +++ b/exercises/04.router/04.problem.history/ui/index.js @@ -33,7 +33,7 @@ function Root() { const latestNav = useRef(null) const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) @@ -76,7 +76,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/04.problem.history/ui/ship-details-pending.js b/exercises/04.router/04.problem.history/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/04.router/04.problem.history/ui/ship-details-pending.js +++ b/exercises/04.router/04.problem.history/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/04.problem.history/ui/ship-search.js b/exercises/04.router/04.problem.history/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/04.router/04.problem.history/ui/ship-search.js +++ b/exercises/04.router/04.problem.history/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/04.solution.history/ui/index.js b/exercises/04.router/04.solution.history/ui/index.js index 7d417de..6f4899e 100644 --- a/exercises/04.router/04.solution.history/ui/index.js +++ b/exercises/04.router/04.solution.history/ui/index.js @@ -32,7 +32,7 @@ function Root() { const latestNav = useRef(null) const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) @@ -79,7 +79,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/04.solution.history/ui/ship-details-pending.js b/exercises/04.router/04.solution.history/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/04.router/04.solution.history/ui/ship-details-pending.js +++ b/exercises/04.router/04.solution.history/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/04.solution.history/ui/ship-search.js b/exercises/04.router/04.solution.history/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/04.router/04.solution.history/ui/ship-search.js +++ b/exercises/04.router/04.solution.history/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/05.problem.cache/ui/index.js b/exercises/04.router/05.problem.cache/ui/index.js index 35c6052..f97700a 100644 --- a/exercises/04.router/05.problem.cache/ui/index.js +++ b/exercises/04.router/05.problem.cache/ui/index.js @@ -43,7 +43,7 @@ function Root() { const [nextLocation, setNextLocation] = useState(getGlobalLocation) // 🐨 change this to contentKey const [contentPromise, setContentPromise] = useState(initialContentPromise) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) // 🐨 get the contentPromise from the contentCache by the contentKey @@ -102,7 +102,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/05.problem.cache/ui/ship-details-pending.js b/exercises/04.router/05.problem.cache/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/04.router/05.problem.cache/ui/ship-details-pending.js +++ b/exercises/04.router/05.problem.cache/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/05.problem.cache/ui/ship-search.js b/exercises/04.router/05.problem.cache/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/04.router/05.problem.cache/ui/ship-search.js +++ b/exercises/04.router/05.problem.cache/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/05.solution.cache/ui/index.js b/exercises/04.router/05.solution.cache/ui/index.js index 5b5cb1a..607e37d 100644 --- a/exercises/04.router/05.solution.cache/ui/index.js +++ b/exercises/04.router/05.solution.cache/ui/index.js @@ -41,7 +41,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -96,7 +96,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/04.router/05.solution.cache/ui/ship-details-pending.js b/exercises/04.router/05.solution.cache/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/04.router/05.solution.cache/ui/ship-details-pending.js +++ b/exercises/04.router/05.solution.cache/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/04.router/05.solution.cache/ui/ship-search.js b/exercises/04.router/05.solution.cache/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/04.router/05.solution.cache/ui/ship-search.js +++ b/exercises/04.router/05.solution.cache/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/01.problem.action-reference/ui/index.js b/exercises/05.actions/01.problem.action-reference/ui/index.js index 5b5cb1a..607e37d 100644 --- a/exercises/05.actions/01.problem.action-reference/ui/index.js +++ b/exercises/05.actions/01.problem.action-reference/ui/index.js @@ -41,7 +41,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -96,7 +96,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/05.actions/01.problem.action-reference/ui/ship-details-pending.js b/exercises/05.actions/01.problem.action-reference/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/05.actions/01.problem.action-reference/ui/ship-details-pending.js +++ b/exercises/05.actions/01.problem.action-reference/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/01.problem.action-reference/ui/ship-search.js b/exercises/05.actions/01.problem.action-reference/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/05.actions/01.problem.action-reference/ui/ship-search.js +++ b/exercises/05.actions/01.problem.action-reference/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/01.solution.action-reference/ui/index.js b/exercises/05.actions/01.solution.action-reference/ui/index.js index 5b5cb1a..607e37d 100644 --- a/exercises/05.actions/01.solution.action-reference/ui/index.js +++ b/exercises/05.actions/01.solution.action-reference/ui/index.js @@ -41,7 +41,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -96,7 +96,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/05.actions/01.solution.action-reference/ui/ship-details-pending.js b/exercises/05.actions/01.solution.action-reference/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/05.actions/01.solution.action-reference/ui/ship-details-pending.js +++ b/exercises/05.actions/01.solution.action-reference/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/01.solution.action-reference/ui/ship-search.js b/exercises/05.actions/01.solution.action-reference/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/05.actions/01.solution.action-reference/ui/ship-search.js +++ b/exercises/05.actions/01.solution.action-reference/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/02.problem.client/ui/index.js b/exercises/05.actions/02.problem.client/ui/index.js index b615a2c..def1ee5 100644 --- a/exercises/05.actions/02.problem.client/ui/index.js +++ b/exercises/05.actions/02.problem.client/ui/index.js @@ -52,7 +52,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -107,7 +107,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/05.actions/02.problem.client/ui/ship-details-pending.js b/exercises/05.actions/02.problem.client/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/05.actions/02.problem.client/ui/ship-details-pending.js +++ b/exercises/05.actions/02.problem.client/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/02.problem.client/ui/ship-search.js b/exercises/05.actions/02.problem.client/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/05.actions/02.problem.client/ui/ship-search.js +++ b/exercises/05.actions/02.problem.client/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/02.solution.client/ui/index.js b/exercises/05.actions/02.solution.client/ui/index.js index 9397518..5262ec0 100644 --- a/exercises/05.actions/02.solution.client/ui/index.js +++ b/exercises/05.actions/02.solution.client/ui/index.js @@ -53,7 +53,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -108,7 +108,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise), diff --git a/exercises/05.actions/02.solution.client/ui/ship-details-pending.js b/exercises/05.actions/02.solution.client/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/05.actions/02.solution.client/ui/ship-details-pending.js +++ b/exercises/05.actions/02.solution.client/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/02.solution.client/ui/ship-search.js b/exercises/05.actions/02.solution.client/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/05.actions/02.solution.client/ui/ship-search.js +++ b/exercises/05.actions/02.solution.client/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/03.problem.server/ui/index.js b/exercises/05.actions/03.problem.server/ui/index.js index bb0d758..52a9ea2 100644 --- a/exercises/05.actions/03.problem.server/ui/index.js +++ b/exercises/05.actions/03.problem.server/ui/index.js @@ -53,7 +53,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -108,7 +108,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, // 🐨 the contentPromise is now an object with a root property, update this diff --git a/exercises/05.actions/03.problem.server/ui/ship-details-pending.js b/exercises/05.actions/03.problem.server/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/05.actions/03.problem.server/ui/ship-details-pending.js +++ b/exercises/05.actions/03.problem.server/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/03.problem.server/ui/ship-search.js b/exercises/05.actions/03.problem.server/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/05.actions/03.problem.server/ui/ship-search.js +++ b/exercises/05.actions/03.problem.server/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/03.solution.server/ui/index.js b/exercises/05.actions/03.solution.server/ui/index.js index 7cb9ace..63b0980 100644 --- a/exercises/05.actions/03.solution.server/ui/index.js +++ b/exercises/05.actions/03.solution.server/ui/index.js @@ -53,7 +53,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() const location = useDeferredValue(nextLocation) const contentPromise = contentCache.get(contentKey) @@ -108,7 +108,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise).root, diff --git a/exercises/05.actions/03.solution.server/ui/ship-details-pending.js b/exercises/05.actions/03.solution.server/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/05.actions/03.solution.server/ui/ship-details-pending.js +++ b/exercises/05.actions/03.solution.server/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/03.solution.server/ui/ship-search.js b/exercises/05.actions/03.solution.server/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/05.actions/03.solution.server/ui/ship-search.js +++ b/exercises/05.actions/03.solution.server/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/04.problem.revalidation/ui/index.js b/exercises/05.actions/04.problem.revalidation/ui/index.js index 753e4c8..1fd0067 100644 --- a/exercises/05.actions/04.problem.revalidation/ui/index.js +++ b/exercises/05.actions/04.problem.revalidation/ui/index.js @@ -80,7 +80,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() // 🐨 add a useEffect here that reassigns updateContentKey to a function that // accepts a newContentKey and calls setContentKey(newContentKey) in a startTransition @@ -141,7 +141,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise).root, diff --git a/exercises/05.actions/04.problem.revalidation/ui/ship-details-pending.js b/exercises/05.actions/04.problem.revalidation/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/05.actions/04.problem.revalidation/ui/ship-details-pending.js +++ b/exercises/05.actions/04.problem.revalidation/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/04.problem.revalidation/ui/ship-search.js b/exercises/05.actions/04.problem.revalidation/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/05.actions/04.problem.revalidation/ui/ship-search.js +++ b/exercises/05.actions/04.problem.revalidation/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/04.solution.revalidation/ui/index.js b/exercises/05.actions/04.solution.revalidation/ui/index.js index ddb7ac5..e6c869e 100644 --- a/exercises/05.actions/04.solution.revalidation/ui/index.js +++ b/exercises/05.actions/04.solution.revalidation/ui/index.js @@ -73,7 +73,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() // set the updateContentKey function in a useEffect to avoid issues with // concurrent rendering (useDeferredValue will create throw-away renders). @@ -136,7 +136,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise).root, diff --git a/exercises/05.actions/04.solution.revalidation/ui/ship-details-pending.js b/exercises/05.actions/04.solution.revalidation/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/05.actions/04.solution.revalidation/ui/ship-details-pending.js +++ b/exercises/05.actions/04.solution.revalidation/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/04.solution.revalidation/ui/ship-search.js b/exercises/05.actions/04.solution.revalidation/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/05.actions/04.solution.revalidation/ui/ship-search.js +++ b/exercises/05.actions/04.solution.revalidation/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/05.problem.history-revalidation/ui/index.js b/exercises/05.actions/05.problem.history-revalidation/ui/index.js index 015cbdc..a0b0a84 100644 --- a/exercises/05.actions/05.problem.history-revalidation/ui/index.js +++ b/exercises/05.actions/05.problem.history-revalidation/ui/index.js @@ -73,7 +73,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() // set the updateContentKey function in a useEffect to avoid issues with // concurrent rendering (useDeferredValue will create throw-away renders). @@ -145,7 +145,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise).root, diff --git a/exercises/05.actions/05.problem.history-revalidation/ui/ship-details-pending.js b/exercises/05.actions/05.problem.history-revalidation/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/05.actions/05.problem.history-revalidation/ui/ship-details-pending.js +++ b/exercises/05.actions/05.problem.history-revalidation/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/05.problem.history-revalidation/ui/ship-search.js b/exercises/05.actions/05.problem.history-revalidation/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/05.actions/05.problem.history-revalidation/ui/ship-search.js +++ b/exercises/05.actions/05.problem.history-revalidation/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/05.solution.history-revalidation/ui/index.js b/exercises/05.actions/05.solution.history-revalidation/ui/index.js index a1bc355..c4c835f 100644 --- a/exercises/05.actions/05.solution.history-revalidation/ui/index.js +++ b/exercises/05.actions/05.solution.history-revalidation/ui/index.js @@ -73,7 +73,7 @@ function Root() { const contentCache = useContentCache() const [nextLocation, setNextLocation] = useState(getGlobalLocation) const [contentKey, setContentKey] = useState(initialContentKey) - const [isPending, startTransition] = useTransition() + const [, startTransition] = useTransition() // set the updateContentKey function in a useEffect to avoid issues with // concurrent rendering (useDeferredValue will create throw-away renders). @@ -142,7 +142,6 @@ function Root() { navigate, location, nextLocation, - isPending, }, }, use(contentPromise).root, diff --git a/exercises/05.actions/05.solution.history-revalidation/ui/ship-details-pending.js b/exercises/05.actions/05.solution.history-revalidation/ui/ship-details-pending.js index 8d70e43..52bdc69 100644 --- a/exercises/05.actions/05.solution.history-revalidation/ui/ship-details-pending.js +++ b/exercises/05.actions/05.solution.history-revalidation/ui/ship-details-pending.js @@ -5,11 +5,10 @@ import { parseLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipDetailsPendingTransition({ children }) { - const { location, nextLocation, isPending } = useRouter() + const { location, nextLocation } = useRouter() const isShipDetailsPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).shipId !== - parseLocationState(location).shipId, + parseLocationState(nextLocation).shipId !== + parseLocationState(location).shipId, { delay: 300, minDuration: 350 }, ) diff --git a/exercises/05.actions/05.solution.history-revalidation/ui/ship-search.js b/exercises/05.actions/05.solution.history-revalidation/ui/ship-search.js index ab36d04..ce36358 100644 --- a/exercises/05.actions/05.solution.history-revalidation/ui/ship-search.js +++ b/exercises/05.actions/05.solution.history-revalidation/ui/ship-search.js @@ -6,11 +6,10 @@ import { parseLocationState, mergeLocationState, useRouter } from './router.js' import { useSpinDelay } from './spin-delay.js' export function ShipSearch({ search, results, fallback }) { - const { navigate, location, nextLocation, isPending } = useRouter() + const { navigate, location, nextLocation } = useRouter() const isShipSearchPending = useSpinDelay( - isPending && - parseLocationState(nextLocation).search !== - parseLocationState(location).search, + parseLocationState(nextLocation).search !== + parseLocationState(location).search, { delay: 300, minDuration: 350 }, )