Next.js Discord

Discord Forum

What is making this code slow? (minimal reproduction codesandbox included)

Unanswered
Grass carp posted this in #help-forum
Open in Discord
Grass carpOP
Code Sandbox: https://codesandbox.io/p/sandbox/jovial-sunset-s5zhwv?file=%2Fsrc%2Fapp%2Fpage.tsx%3A1%2C1

When I call addToURL or removeFromURL, the function getColorName gets called for every color id in the URL (cf: console logs).
I would like it to be called only once, for the added id (or even never, when removing an id).

Another thing is that I would have expected to get the "Loading color name..." fallback immediately after the user selected a color.
That's what I expected to see when I added the artificial delay using await in getColorName.

Thus, the questions are:
- How can I avoid calling getColorName n times when adding or removing a color?
- How can I get an instant loading state for the color name?

Thank you very much for your help 🙂

5 Replies

KINXZ
you could get all the color names at once and cache them and use optimistic ui
nevermind.. the optimistic ui will not work with searchparams
Grass carpOP
I tried useOptimistic actually (not within this minimal reproduction project though 🤔). But I didn't managed to make it work, or at least it didn't worked as I thought it would.

Btw, besides the link to the nextjs doc you shared, I didn't find any doc around useOptimistic (not even on the new react.dev website).

Did you find other official ressources you can share?
For example, how do you know that "the optimistic ui will not work with searchparams" ?

Thanks 🙏
KINXZ
no i dont have more resources. I saw a video on x/twitter once with a small explanation. I dont think it will work because searchParams because of the push to a "new page" , but I might be wrong.