App Router methods async?
Unanswered
Cuvier’s Dwarf Caiman posted this in #help-forum
Cuvier’s Dwarf CaimanOP
From some testing and an attempt to squash an unruly bug, it seems like the app router is asynchronous. I can't include the full code as it's for my company, but this comment I wrote may hopefully explain more:
ETA: To give a little more context, this issue only crops up when we have a component set up to read the search query param and fill the input and also to change the search query param with user input, so yes, there's a weird feeback loop involved in our own logic.
/** As far as I can tell, `router.replace()` only replaces the url asynchronously,
* which can lead to user input being replaced by an older input if the user
* types after the timeout but before execution of the timeout's callback
* finishes. The change in `search` will cause the timeout to start ticking again,
* but then params will finally change from router.replace() finally causing it,
* which causes the timeout to get cleared (so new params don't get set from the input)
* and then setSearch in its useEffect runs with stale user input.
*
* So we need the flag `hasUserTypedSinceRouterReplaceQueued`
*/
const hasUserTypedSinceRouterReplaceQueued = useRef(false)ETA: To give a little more context, this issue only crops up when we have a component set up to read the search query param and fill the input and also to change the search query param with user input, so yes, there's a weird feeback loop involved in our own logic.
3 Replies
Cuvier’s Dwarf CaimanOP
@joulev For a search box use https://nextjs-faq.com/sharing-client-side-state-with-server-components#sending-state-from-the-client-side-to-the-server
Cuvier’s Dwarf CaimanOP
Oh, thanks. I just tried that and it doesn't resolve my specific issue, but it's good to know about.
I think my specific issue comes from the weird loop ➿ that comes from having two separate inputs that update the same search parameter, but also update themeselves whenever the search paramter changes (that's how they stay in sync with each other).
I think my specific issue comes from the weird loop ➿ that comes from having two separate inputs that update the same search parameter, but also update themeselves whenever the search paramter changes (that's how they stay in sync with each other).