<h2 dir="auto">Problem</h2>
<p dir="auto">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).</p>
<h2 dir="auto">My current work-around</h2>
<p dir="auto">For SVG components that need animation, I have to write <code class="notranslate">render</code> 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 <code class="notranslate">componentDidUpdate</code>. IMO, this results in a very non-idiomatic ReactJS code because the <code class="notranslate">render</code> method does not have a true representation of what the SVG element will look like after applying state and props.<br>
See <a href="https://github.com/ameyms/diffract/blob/master/src/BarGraph.jsx#L75-L93">this example</a>.</p>
<h2 dir="auto">Possible Solution</h2>
<p dir="auto">It would be helpful if components inside transition groups had a <code class="notranslate">componentWillTween(callback)</code> method similar to <code class="notranslate">componentWillEnter</code> etc.</p>
<p dir="auto">This would be invoked after <code class="notranslate">componentWillUpdate</code> but before <code class="notranslate">componentDidUpdate</code> for components added to an existing <code class="notranslate">TransitionGroup</code>. It would block updates from being flushed to DOM until the <strong><code class="notranslate">callback</code></strong> is called. It would <strong>not</strong> be called on the initial render of a TransitionGroup.</p>
<p dir="auto">I just spent &gt;20min wondering why my page was hanging. Turns out I had referenced the component I was rendering in the return method.</p>
<p dir="auto">I know it's a stupid mistake however to prevent more time being wasted on it I propose a circular reference check which should throw an error.</p>
<p dir="auto">I may work on a pull request later if I have time and it hasn't been patched yet.</p>