Animations in React

Avoid using props to continuously update components

The Wrong Way

Before we talk about the right way, let's talk a little bit about how you should not handle animations in React.

References

Use React.createRef to animate elements and then trigger a component on complete.

Context, not Redux

State duplication gets expensive

The state object in a Redux store is immutable, this means for each update, a copy is made, updated and replaces the previous state. Redux does this to ensure all references recieve the same updated state simultaneously, a great solution for keeping your application data in sync, but computaionaly expensive when performing fast-iterative updates like in animation.

CSS3 animations

CSS3 animations use GPU acceleration

The JavaScript Popmotion animation suite provides an easy to use toolset for calculating and applying efficient animations to your UI.

Data Visualisations

Sometimes you need to manage animations for large groups of elements and data, like in the case of data visualisation. Fortunately D3 has an extensive library of tools to handle just that, and it's been used for longer than you can say React. D3 visualisation library handles DOM elements outside of React’s MVC service, so D3 scripts don’t need to know about the component they are nested within.