1

So I have an onClick method that loops about 1,000 times before returning, and at the end of each loop, it changes the state. Is there a way to get the component to re-render at the end of each loop as well? I though just updating the state would do it, but that didn't work. I also tried calling this.forceUpdate() after updating the state every loop, but that didn't work either. It just does all of the updating all at once after onClick returns.

Is there a way to have the component update while the event handler is running? I am thinking the solution lies in multithreading, but I don't know if there is a better way.

Max Gordon
  • 195
  • 14
  • maybe check this answer out https://stackoverflow.com/a/33613918/2763250 TL;DR `setState` is batched in the react synthetic event handlers – Anthony Aug 07 '20 at 18:21
  • Why do you want that type of behavior? React batches state updates for performance. What is your exact requirement? – Ajeet Shah Aug 07 '20 at 18:29
  • I'm iteratively adding paths to an SVG element, and I want to animate it because it takes up to a minute to finish – Max Gordon Aug 07 '20 at 18:32
  • You should use animation. Check https://www.react-spring.io/ and [this](https://medium.com/@neerajlag/svg-animations-in-react-using-react-spring-78b1f12b46d). – Ajeet Shah Aug 07 '20 at 18:50

1 Answers1

1

It mostly about event loop. And batching of setState in React. If you want to animate things https://en.reactjs.org/docs/animation.html

Alexander Alexandrov
  • 1,254
  • 5
  • 15