First off, check out this little vignette: http://codepen.io/profaneVoodoo/pen/MmqmKd
I want to add a "character" to the page that the user can move about the page as the rain drops fall (the character is either avoiding or collecting rain drops). I want the user to be able to move the character around with w-s-a-d or with the arrow keys, but WITHOUT triggering a state change/re-render in the page (I'd only want a change/re-render under certain conditions, such as the character "catches" a rain drop).
In general what is the best approach? I have one idea (some kind of transparent overlay gif on which the character actually moves around with the rain in the background) but I am new to react and really want to use it properly. Rather than ramming a square peg into a round hole, I'd like to know what the "industry standard" approach typically is for what I want to do.
Thanks in advance, fellow campers!