React JS - how to best implement multiple states

In this [pen] ( I have a single div where all the rendering is tied to state change. A blue character moves side to side in a rain storm.

You can move the blue pixel left and right as the raindrops fall. But of course such a move triggers a state change in order for the blue pixel to be re-rendered in its new position. So if you move left or right really fast, the whole animation “bogs down” and the raindrops don’t fall as fast.

The solution I am considering is introducing two divs where the blue pixel moves about in an otherwise tranparent div over top of the div where the rain drops are falling.

Please before I start coding, am I making a mistake with the proposed design or is this how such problems are usually solved with React?


I would go with canvas for this kind of stuff. Animating so many DOM elements is not a good idea, And you don’t need React for this. I think React is better suited for apps whith a lot of user interaction rather than looped animations.

I think this solution is worth trying. The timer that runs each time the blue guy moves is probably what’s causing the slow down.

Seconding the “use canvas” suggestion. By all means have that canvas inside a React component (that has certain advantages: you can pass in messages and events to the canvas, the UI can be isolated). But the actual animated part is completely stateful with multiple moving parts, and whatever you do to optimise will have massively inferior performance to canvas (animating lots of DOM elements is bad news). Why you’re trying to do is exactly what canvas was built to do well