React - best approach for adding a stateless moveable character

#1

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!

#2

I’m no expert, but I thought the whole point of using React was to let it manage state and decide the most efficient time to re-render, knowing that it only re-renders when it needs to.

That being said, they do have a function shouldComponentUpdate that will return a boolean as to whether or not you think that component should render.

#3