How to throttle your react component state

Hi,

Today we’re going to learn how to throttle (what is throttling?) updates of your react component. In my case, it was useful for limiting the most computationally expensive function – constructing a tree graph with data about each fractal element. The value of the component’s state is being manipulated by the user on a slider, which means that it can change even more often than 60 times per second. The animation would still be equally smooth if the update was limited to, let’s say, 20 times per second (due to use of tweening in the process of drawing) and it’s the easy way to spare some unnecessary instruction cycles.

That being said, let me show you how to throttle state changes in a component:

1. Find a library with react hook for throttling state on github:
2. Install it in your project: npm i use-throttle --save
3. Use it in your component like this:

// FractalRenderer.tsx
import { useThrottle } from "use-throttle"; 
 
function useFractalRenderer() { 
const { state: targetState, dispatch } = useFractalReducer(); 
const throttledState = useThrottle(targetState, 50); // 🔴 
// ...

Now your throttledState variable is changing at most 20 times per second. Hooray!

Sincerely yours,
~Marek

Discuss on twitter • Edit on GitHub