0

I have some fast updating (external signal) code that I use to setState which triggers a long rerender

sudo code:

const FastUpdate = ({signalPoint, otherProp}) => {
   const [state, setState] = useState(null)
   useEffect(() => {
      setState(calcNewState(signalPoint,otherProp))
   },[signalPoint]
   )
   return <VeryTimeConsimingComponent dependency={state}/>
}

In this senario that happens to me is that if signalPoint changes 15 times in 1 sec. Then 15 rerenders are triggered. However, by the time the 8th rerender is happening signalPoint has updated 11 times. SO I would like to tell React forget rerender #9,#10 and directly do #11

Is there a way to make this happen?

Today with time the lag on real time data just is playing catchup when intermediate data may not have value.

Debouncing does not work for this usecase

In the application I have the UI refresh of < 100ms is a requirement. so I can't just set a delay for all of the changes to come in. I want to start rerendering as soon as I get input but want to prevent one of the setState calls if the rerender is not complete and 2 new values have arrived.

MechMody
  • 3
  • 3
  • You can throttle the function that calls `setState` – Konrad Aug 15 '22 at 11:50
  • Does this answer your question? [React use debounce with setState](https://stackoverflow.com/questions/60789246/react-use-debounce-with-setstate) – thedude Aug 15 '22 at 11:54

0 Answers0