A new hook for update animations

Problem

For SVG elements that need animation, a ‘hook’ is needed to tween the element from one configuration to another before React steps in and updates the DOM (and thereby prevents the animation).

My current work-around

For SVG components that need animation, I have to write render method that always returns the same ‘dummy’ DOM so that React doesn’t find any diffs and I can handle all DOM updates myself inside the componentDidUpdate. IMO, this results in a very non-idiomatic ReactJS code because the render method does not have a true representation of what the SVG element will look like after applying state and props. See this example.

Possible Solution

It would be helpful if components inside transition groups had a componentWillTween(callback) method similar to componentWillEnter etc.

This would be invoked after componentWillUpdate but before componentDidUpdate for components added to an existing TransitionGroup. It would block updates from being flushed to DOM until the callback is called. It would not be called on the initial render of a TransitionGroup.

[levibuzolic]

Definitely don’t setState in componentDidUpdate that will result in an infinite loop.

Use setState in a timing function which will update state that will modify your render. It’s not hacky, it’s what React is made for.

You also won’t need to duplicate much/any of D3’s code, you just need a timing function.

Your render will end up looking something like:

<rect
  className="bar"
  x={ this.state.progress * this.props.x }
  y={ this.state.progress * this.props.y }
  width={ this.state.progress * this.props.width }
  height={ this.state.progress * this.props.height }
  fill={this.props.color} // color is a little trickier, you'll need a library or method that can generate a colour based on a start/end point and progress.
/>

[sophiebits]

Yes, @levibuzolic’s approach sounds great.