React Native not rendering on changed state for victory native chart

300 Views Asked by At

I am trying to update a Victory chart on button press using state from a react hook like so:

const [weightData, setData] = useState([]);
const [date, setDate] = useState(new Date());
const [weight, setWeight] = useState(150);

Where the chart takes the weightData

<VictoryLine
   style={{
     data: { stroke: "red" },
     parent: { border: "1px solid #ccc" },
   }}
   data={weightData}
/>

And has that data updated on button press like so:

const addWeight = () => {
  setData(prevData => {
    return [{x: date, y: weight}, ...prevData];
  });
}
<Button
  color="red"
  onPress={addWeight}
  title="Add"
/>

My issue with this method is that the rendering seems to be about 3 button clicks behind. I feel like it has something to do with updating the state being asynchronous, however, none of the fixes I tried worked. Checking with dev tools shows the state is updating with the correct objects each time, however the graph lags 3 updates behind it seems. Any suggestions on how to make react render upon button press would be greatly appreciated.

0

There are 0 best solutions below