search

chenglou / react-tween-state

React animation.
Other
1.74k stars 70 forks source link

Whole component is always re-rendered #50

Open PetrGlad opened 9 years ago

PetrGlad commented 9 years ago

I have animation at top "main" component. I found out that when I change property of a component that is nested inside "main", the whole "main" component is re-rendered. Besides performance, this causes problems when there is a text input field which loses focus after re-render. Also it is strange that I had to add componentShouldUpdate to make animations work. It enables animations even when componentShouldUpdate always return true.

This can be reproduced only by adding tweenstate.Mixin without any animations enabled. I use Om (Clojurescript), ReactJS 13.3 and react-tween-state from master.

BTW, would you recommend using chenglou/react-motion instead?

chenglou commented 8 years ago

React-motion doesn't cover ordinary animation (only spring), but that's the way to go anyway. You should try it. Though React-motion also re-renders your thing. I know you're in Cljs but have you tried sprinkling some StaticContainer? Though shouldComponentUpdate isn't exposed in Om right?

PetrGlad commented 8 years ago

I tried also using react-spring but it still has some strange interactions with how Om detects state changes. E.g. it does not reflect local component's state changes if the component is inside react-spring. shouldComponentUpdate is available for override in Om but it cannot force update if Om does not consider it. This is what I do not like in Om - too much magic and it's not clear where to look when things break. So I better stay on trodden way: I have re-implemented the animations with CSS transitions (they turned out to be sufficient in my case). I never seen StaticContainer before,I'll have a look at it.