Search code examples
reactjsnext.jsvercel

State not changing when build next.js project but is in dev server

setWordGroups((prev) => {
    if (prev) {
        prev.push(prev.shift()!);
        return [...prev];
    }
});

This is working as expected in the dev server npm run dev. but in production or when I build it npm run build npm run start the state is not changing. I have also tried JSON.perse(JSON.stringify(prev)), deleting the .next folder, and purging the Vercel Data Cache.

How do I fix this, it ain't triggering any useEffect depending on this state. here's the project

EDIT: this was happening because I was starting the dev server with npm run dev --turbo which was still an experimental feature then, that's why my dev server and build server were differing

Solution

  • This should fix it...

    setWordGroups((prev) => {
  if (prev) {
    const new = [...prev];
    new.push(new.shift()!); 
    return new;
  }

  return prev;
});

    Trying to modifying the original wordGroups array directly within the callback function caused the original code not to work. Modifying the original array might not be detected by React, leading to unexpected rendering behavior.