In this [pen] (http://codepen.io/profaneVoodoo/pen/MmqmKd?sort_col=item_updated_at) 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?