在 state 更新后 React useEffect 不会重新加载我的组件

Question

I know this problem has been asked several times on stackoverflow but i can't make this work even after trying during several hours...

I am working with React.js for a year now but I recently moved to React hooks and stateless components so I don't have much experience with them so excuse me in advance if the solution is obvious because I really tried to solve it on my own before asking here...

1. What my code is doing:

I have a simple useEffect hook that i want to call when the props rank has changed. In the hook, i am calling toggleNodeByRank() method using .then and updating my state named data once the method has been executed.

2. What is happenning:

For now, (almost) everything is working fine and in the second console.log('===StateUpdated===', chartData); i can see that my state has the correct updated value.

The only problem is that my component doesn't reload and if I repeat the action that update the rank props, I can see the modifications.

I have seen some answers saying that the deps ( rank here) were not good, I have tried to add chartData in the deps aswell ( [rank, chartData] ) but the problem remain the same...

Maybe someone can help me on this one?

useEffect(() => 
  console.log('===PreviousState===', chartData);

  toggleNodeByRank(chartData, rank).then((data) => setChartData(data));

  console.log('===StateUpdated===', chartData);

}, [rank]);

3. Edit

Here is the toggleNodeByRank() function, since this is my company's code i prefer not to share too much, I hope this can help you guys..

  const toggleNodeByRank = async (node, rank) => {
    if (node && node.data) {
      // await update node.children depending on node.rank
      // - If I want to toggle the node :
      // I am saving the node.children in a state object (key = node.id, 
      // value = node.children) and I reset the node.children value to [ ]
      // - If I don't want to toggle the node :
      // I don't do anything and juste render
      // update another state to save the node.children data if needed.
      return node;
    }
  };

Answer 1

Since you are mutating the original node element in place instead of updating it in an immutable manner, setChartData isn't triggering a re-render as react checks if the value passed to state updater is actually changed from previous value or not and since the reference is same it believes that nothing has changed

According to React principles you must never mutate state values instead update them in an immutable way.

If its possible for you to update the state in an immutable manner, please do that in toggleNodeByRank

However you can still work around by shallow cloning the node like

const toggleNodeByRank = async (nodeArg, rank) => {
    const node = {...nodeArg};
    if (node && node.data) {
      return node;
    }
  };

After doing the above change, it would trigger a re-rerender but you must know that it isn't the best way

Answer 2

You have problem with understanding promises, in you code this 2 console.log will output same value because (data) => setChartData(data) is callback witch will be called after toggleNodeByRank is done. Basically your code executes in this way:

1) console.log('===PreviousState===', chartData);

2) toggleNodeByRank(chartData, rank); //here you just send request

3) console.log('===StateUpdated===', chartData);

4) (data) => setChartData(data)

So everything is fine and second time when u run your component update you see changed chartData