React.useEffect not triggering when dependency has changed

Question

Edit: I found the solution to this! See my answer below.

So essentially, I have a slice of state that is updating but not triggering the useEffect that has it as a dependency:

const [editableParticipants, setEditableParticipants] = useState(*initial value*);
const [joinLeftTimeState, setJoinLeftTimeState] = useState(*initial value*);

function addParticipant(newParticipant) {
  setEditableParticipants([
    ...editableParticipants,
    newParticipant
  ])
}

useEffect(() => {
  setJoinLeftTimeState(
    editableParticipants.map(*mapping stuff*)
  );
}, [editableParticipants]);

When addParticipant is triggered, editableParticipants is successfully updating but the effect isn't running, leaving joinLeftTimeState without an entry for the new participant. I put a console log in the effect itself, it's not triggering at all after addParticipant runs. What the heck?

https://stackoverflow.com/questions/54620928/useeffect-hook-not-firing-after-state-change Does this answer your question? — Tomer Ariel, May 26 '22 at 14:28
Because of a typo. `editableParticpants` in state, but you're watching for a change in `editableParticipants` (note the extra `i`). — Andy, May 26 '22 at 14:34
Thanks for catching that Andy, but the typo is just in me typing a simplified version here - it doesn't exist in my original code! Tomer, that was an issue of the new and old array being equal, and was fixed by spreading the old array into the new one. I'm already doing that, and adding an item to boot - the state is not === before and after. — Romy, May 26 '22 at 14:40
This should work, see https://codesandbox.io/s/react-hooks-playground-forked-f2ymtt?file=/src/index.tsx Can you provide a minimal reproducable example — Tom, May 26 '22 at 14:49
[I can't reproduce this](https://jsfiddle.net/mdwa81r4/). My example updates the state, and the `useEffect` catches the change, and logs the new state. (And yes, I do have a list of weird animals that I can drop into an example at a moment's notice). — Andy, May 26 '22 at 14:51
If the useEffect isn't getting triggered , the only reason is the dependency is not changing. Did you make sure that addParticipant is getting called ? Also could you check by putting a console log inside addParticipant — Kuncheria, May 26 '22 at 14:52
I've confirmed that the addParticipant function is being called and editableParticipants is updated to the new value. And I can't reproduce this bug either honestly... if I knew what to do to make this happen, I'd probably already know how to fix it. — Romy, May 26 '22 at 15:15

Romy · Answer 1 · 2022-05-26T17:16:58.423

So the problem here was a little complicated, but I'll try my best to sum it up.

Essentially, the render was trying to do a .find on joinLeftTimeState for a participant that had been added before the effect fired off (editableParticipants is updated but joinLeftTimeState isn't yet), causing everything to crash. Adding default values if the .find turned up empty allowed the code to progress and now the effect is firing properly.

function Table() {
  const [editableParticipants, setEditableParticipants] = useState(*initial 
  value*);
  const [joinLeftTimeState, setJoinLeftTimeState] = useState(*initial value*);

  function addParticipant(newParticipant) {
    setEditableParticipants([
      ...editableParticipants,
      newParticipant
    ])
  }

  useEffect(() => {
    setJoinLeftTimeState(
      editableParticipants.map(*mapping stuff*)
    );
  }, [editableParticipants]);

  return editableParticipants.map(
    ptcpnt => <Row joinLeftTimeState={joinLeftTimeState} participant={ptcpnt} />
  )
}

function Row({ joinLeftTimeState, participant }) {
  const defaultTimes = { a: '', b: '' };
  const userTimes = joinLeftTimeState.find(
    ptcpnt => ptcpnt.id === participant.id
  )
  const { a, b } = userTimes || defaultTimes;

  return (*stuff*)
}

The joys of asynchronous state updates, right? Thanks for all the ideas!

score -1 · Answer 2 · answered May 26 '22 at 15:12

-1

useEffect(() => {
 // do something
}, [dependency])

I'm guessing your dependency isn't changing cause map function doesn't change the current array, you need to assign the result to a new var.

consider this snippet:

var arr = [1,2,3];
arr.map(x=>x*2)
(3) [2, 4, 6]

while arr is still:

(3) [1, 2, 3]

answered May 26 '22 at 15:12

Eran Peled

767
6
6

1

I believe that OP expects the dependecy to change via the `addParticipant` function. – Tomer Ariel May 26 '22 at 15:14
The map isn't changing the editableParticipants array, it's setting the joinLeftTimeState to the result of that map. editableParticipants is being updated via the addParticipant function. – Romy May 26 '22 at 15:59

React.useEffect not triggering when dependency has changed

2 Answers2