DEV Community

Iman YeckehZaare
Iman YeckehZaare

Posted on

5 5

Can a React usestate update be nested in another useState functional update?

There are n items the user can vote on. There are two React states:

  • votes is an array of the user's votes on every item.

const [votes, setVotes] = useState({});

  • voteChanges indicates how many times the user changed their votes on any of the items.

const [voteChanges, setVoteChanges] = useState(0);

We have a database listener defined in a useEffect. When votes are added/changed in the database, the listener gets called. We need the state votes to compare every new vote with its previous value in votes to decide whether to set voteChanges to true. However, we cannot define votes as a dependency in useEffect, otherwise we will end up in an infinite loop. To get access to the current value of votes, we use its functional update. Is it okay to call setVoteChanges inside the functional update of setVotes? If no, why and how should we solve this problem?

useEffect(() => {
    databaseListener((changes) => {
      setVotes((oldVotes) => {
        const oVotes = { ...oldVotes };
        for (let change of changes) {
          const itemId = change.id;
          const newVote = change.vote;
          if (oVotes[itemId] !== newVote) {
            setVoteChanges(oldCount => oldCount + 1);
          }
          oVotes[itemId] = newVote;
        }
        return oVotes;
      });
    });
  });
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay