react-router v4

[kbysiec]

Hi! First of all I would like to thank you for your time and effort for community and such an amazing lib!

I was looking for solution allowing to have transition of react-router-dom route changes and found #2 related to react-router v4.
Trying to recreate it using the newest version of react-spring I noticed the following in the console:

Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

https://codesandbox.io/s/x2j968z0vw

I started further investigation and noticed:

• last working version is 5.5.4 - https://codesandbox.io/s/qz6zw257o9
• from version 5.6.1 there is another message:
  Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. - https://codesandbox.io/s/0m1x0m4klw

Could you be so kind and have a look?
Thanks

[drcmda]

I think i know what it could be. There is indeed a setState in Transtion and if the component unmounts it can theoretically fire and cause a warning. Thankfully it's rather harmless, but i'll put some safeguards up.

[kfrp]

Hope it's okay to piggyback on this issue to ask a related question -

The demos linked by @kbysiec above are relying on absolute positioning. If we relatively position the Route rendered components, they animate simultaneously and the entering component appears below the leaving component while doing so - and then moves up into its proper position only after the leaving animation is completed. (Here's a forked codepen with position set as relative: https://codesandbox.io/s/n7lv2l27l0 )

Any thoughts on how one could chain the transitions, or set the leaving transition as immediate as in the case of Springs?

[drcmda]

transitions are always stacks, the exit-out transition can be relative, which is useful for lists, but for anything that replaces content you probably want it to be absolute, so that it overlays the previous content. If you could set the exit transition immediate it would simply disappear without trace.

Real chaining would need some more thought put into it, perhaps in v6. You could write it into the umbrella issue that's currently open.

[kfrp]

Thanks for that, I will add my voice to the roadmap discussion.

Meanwhile, I tried to replace the Transition with a Spring in some of the routes in the sandbox I linked before: https://codesandbox.io/s/n7lv2l27l0 so that I could continue working with a relatively positioned component (y'know, for science).

As you can see if you scroll down to the HSL component (line 60), I have used a key prop in order to re-render on every rerouting (using a modulus so that it's always only either 0 or 1, and presumably that means we are only dealing with two renders toggling back and forth as opposed to an infinite number). This feels a bit hacky because, 1) the key becomes a state that I have to hold for no other purpose, and 2) Re-rendering the Spring every time the component is updated, or re-rendering it if some prop meets a condition is a usecase that comes up often enough to deserve an inbuilt setting.

I believe reset is meant for that purpose (#160) but gives the error of "Maximum depth exceeded". Not using a key obviously renders the animation only at mounting time.

So - could I suggest a reset/rerun property that either reruns the animation on every render or takes a boolean as value? Something like <Spring reset={prop===someValue} ...>

Let me know what you think or if there's an existing workaround I'm missing.

[drcmda]

Are you on the latest react-spring? i recently fixed a bug that had something to do with reset. It did cause the endless loop under some conditions, but shouldn't any longer - and if it still does, i'd love to see the sandbox for it.

[kfrp]

Aha, that did it. Props to you! ;)

[drcmda]

@kbysiec i've set up protections against async setstate now.