Issue with react cache

[mighty thicket]

I am trying to use the react cache to avoid calling the database twice in a single request for the same data.

In my file I have

const getCocktailInfoForIngredients = cache(async (ingredients: string[]):Promise<{ingLabel:string,canUrl:string,cocktails:CocktailSer[]}> => {
    console.log("called getCocktailInfoForIngredients");

Later I have

export default async function Page({ params }: { params: { ingredients: string[] } }) {
      const {ingLabel,canUrl,cocktails} = await getCocktailInfoForIngredients(params.ingredients);
  ...
}

export async function generateMetadata(
    { params }: { params: { ingredients: string[] } },
    parent: ResolvingMetadata
  ): Promise<Metadata> {

    const {ingLabel,canUrl,cocktails} = await getCocktailInfoForIngredients(params.ingredients);
...

When the page loads I see two log outputs for getCocktailInfoForIngredients - I was expecting to only see that once.

[tight peak]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[mighty thicket]

I've tried this 10 different ways, the NextJS cache(unstable) seems to be working but this is confusing me

[rugged spoke]

react cache and unstable_cache are totally different. the result of cache from react only life in current request while the result of unstable_cache life until you revalidate it

[rugged spoke]

from the code here, I don't see any issue. You may want to check this
https://react.dev/reference/react/cache#memoized-function-still-runs

[mighty thicket]

Yea, I get the difference, but in this case react cache should be working.

[rugged spoke]

yes

[mighty thicket]

Figured it out.

The cache function cant accept an array, if I pass individual strings it works. In my use case this works since its a fixed list, but this seems like a pretty crazy limitation.

[rugged spoke]

If your arguments are not primitives (ex. objects, functions, arrays), ensure you’re passing the same object reference.

[rugged spoke]

try passing JSON.stringify(params.ingredients)

[rugged spoke]

const getData = cache(async (...args: string[]) => {});

getData(...[]);

does this work?

yeah this works too

[mighty thicket]

Basically everything but what I originally tried works :). Thanks for the help.