React won't update state after using useState hook update function

Question

Unable to set state using the function returned from useState hook.

wrapping more functions and logging it at every point possible, it succeeds in asynchronously getting new data all the way down to the setData call which I can't find a way to peak inside. I also checked before render to see if data was changing in state but not in the webpage but the data object doesn't change in value after calling setData.

function PollResults(props) {
  const classes = useStyles2();
  const [data, setData] = useState([]);

  const changeData = data => {
    console.log(data);
    setData(data);
  };

  useEffect(() => {
    subscribeToResults(props.id, data => {
      //console.log(data);
      changeData(data);
    });
    return () => {
      unsubscribeToResults(props.id);
    };
  }, [props.id, setData]);
  //console.log(data);
  return <VictoryPie animate colorScale="qualitative" data={data} />;
}

Possible duplicate of [When to use React setState callback](https://stackoverflow.com/questions/42038590/when-to-use-react-setstate-callback) — Joseph D., Sep 29 '19 at 01:11
It's not quite clear what you are asking, can you please edit your question ? — Hamza El Aoutar, Sep 29 '19 at 01:21

score 0 · Answer 1 · answered Sep 29 '19 at 01:17

0

You need to do a simple change at your code:

function PollResults(props) {
  const classes = useStyles2();
  const [data, setData] = useState([]);

  const changeData = data => {
    console.log(data);
    setData([data]); // using [] around value.
  };

  useEffect(() => {
    subscribeToResults(props.id, data => {
      //console.log(data);
      changeData(data);
    });
    return () => {
      unsubscribeToResults(props.id);
    };
  }, [props.id, setData]);
  //console.log(data);
  return <VictoryPie animate colorScale="qualitative" data={data} />;
}

Maybe you will need to check your ChangeData method using hook useCallback to avoid infinite rerender (if this occurs).

answered Sep 29 '19 at 01:17

Carlos Querioz

277
3
7

But the data is an array of objects already, that would just turn it into a 2d array? – user3645925 Sep 29 '19 at 01:23
i have also tried it without an intermediary function and just calling setData directly in the useEffect callback but it didn't work that way either. – user3645925 Sep 29 '19 at 01:24
Ok. So the answer is already an array. Where come from subscribeToResults? It is not clear. – Carlos Querioz Sep 29 '19 at 01:47

React won't update state after using useState hook update function

1 Answers1