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 e312afcb..a75454e2 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 07b00837..5aeba51e 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 c554c1ba..462be5fb 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 e8cd5e0f..80ccbe1d 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 5e500d2e..9c162b71 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 c82fd02a..dbd26dac 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 7d417de9..6f4899ea 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 35c60526..f97700a1 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 5b5cb1a0..607e37d9 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 5b5cb1a0..607e37d9 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 5b5cb1a0..607e37d9 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 b615a2c7..def1ee58 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 93975185..5262ec03 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 bb0d7584..52a9ea2b 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 7cb9acea..63b09808 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 753e4c8d..1fd0067d 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 ddb7ac5d..e6c869ed 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 015cbdc3..a0b0a846 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 a1bc3552..c4c835fe 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 a75454e2..3ae824d2 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 5aeba51e..07b00837 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 f48ad02b..273dff8f 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 72d53cbc..bf8b22fc 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 462be5fb..c554c1ba 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 80ccbe1d..e8cd5e0f 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 9c162b71..5e500d2e 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 dbd26dac..c82fd02a 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 6f4899ea..7d417de9 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 f97700a1..35c60526 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 607e37d9..5b5cb1a0 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 607e37d9..5b5cb1a0 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 607e37d9..5b5cb1a0 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 def1ee58..b615a2c7 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 5262ec03..93975185 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 52a9ea2b..bb0d7584 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 63b09808..7cb9acea 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 1fd0067d..753e4c8d 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 e6c869ed..ddb7ac5d 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 a0b0a846..015cbdc3 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 c4c835fe..a1bc3552 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 52bdc69b..8d70e43e 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 ce363582..ab36d042 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 3ae824d2..e312afcb 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 273dff8f..f48ad02b 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 bf8b22fc..72d53cbc 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 e8cd5e0f..80ccbe1d 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 5e500d2e..9c162b71 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 c82fd02a..dbd26dac 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 7d417de9..6f4899ea 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 35c60526..f97700a1 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 5b5cb1a0..607e37d9 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 5b5cb1a0..607e37d9 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 5b5cb1a0..607e37d9 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 b615a2c7..def1ee58 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 93975185..5262ec03 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 bb0d7584..52a9ea2b 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 7cb9acea..63b09808 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 753e4c8d..1fd0067d 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 ddb7ac5d..e6c869ed 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 015cbdc3..a0b0a846 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 a1bc3552..c4c835fe 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 8d70e43e..52bdc69b 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 ab36d042..ce363582 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 }, )