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.