A new hook for update animations

[ameyms]

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]

I think you might be fighting against React here. Rather than manipulating the DOM yourself, you should be doing it through the render method.

It does mean that you won't really be able to use D3 to handle all the animations for you, but you can definitely achieve an identical animation (with the same or better performance) within React's render.

[ameyms]

@levibuzolic I am sorry. I don't think I understand.

Complex SVG shapes cannot be animated using CSS. This means that even if were to drop my dependency on D3, I would have to write some timer based code that transitions my SVG element from one shape A to shape B. If I want my render method to return the SVG element as shape B, I should have already gone A to (almost) B before this new structure is pushed to DOM. Else React will interrupt my transition.

Hence, there needs to be some callback function to tell React that "I have finished whatever tween I was performing as a part of this update. You can now go ahead and update the DOM"

[levibuzolic]

@ameyms sorry, I probably didn't explain myself very well.

Basically what you want is to use a timing function to manipulate some kind of progress state, then allow the render method to handle rendering your animation/transition based on that state.

It's important to think of your render method as something that can (and should) run many times. It isn't just the method that returns a "template" of HTML. It should be able to return a DOM that acurately represents the current components props and state at any given time.

As soon as you have a 3rd party library change the DOM, then your component state won't match up with the DOM and you'll run into trouble if render gets called again.

If you have your componentWillEnter (and similar) methods trigger a setInterval or setTimeout (or library timing function) that manipulates state over time, then your render function will re-run for every state change and re-render your SVG to represent this new state.

Have a look at projects like https://github.com/pleasetrythisathome/react.animate which give a simplified interface for transitioning between two states.

If you still need help, I'll put together an example component.

[ameyms]

So are you saying I should setState inside componentDidUpdate? That seems as hacky as my current solution. That also means I will have to reinvent most of D3 code! :sad:

[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.
/>

[ameyms]

I will close this issue if React authors also share same opinion as @levibuzolic.

/cc @spicyj @vjeux @zpao

[sophiebits]

Yes, @levibuzolic's approach sounds great.