React-spring: useTransition re-renders / mounts twice

[pawelsas]

I use useTransition for a transition between screens.
I've implemented this based on the Simple Transition example.

Unfortunately, the entering component renders twice which causes a flickering in my special case (scroll down using ref). I've extended the example for presentation purposes. Please see the console.log. https://codesandbox.io/s/y7wwzyvjkz?fontsize=14

Is there a simple way to avoid this behaviour or is it a bug?

Thanks!

[drcmda]

does look to me like its mounting twice, the line should read

  useEffect(() => {
    console.log('Mounted')
  }, [])

Otherwise it's not a componentDidMount, but a componentDidUpdate in old lifecycle terms. What happens here is:

1. A mounts
2. State model changes to B
3. A is re-rendered with the old, retained state (A) which fades it out
4. B mounts and is rendered with the new state (B)

[pawelsas]

To me it looks more like it mounts on transition start (transitions.from) and on transition end (transitions.enter)?!

[drcmda]

I'm not sure i can reproduce, it mounts the A component once. Without the [] in the end of useEffect it will log "mounted" every time the component renders. It mounts and renders initially, and it renders once more on transition-out. When the component comes in again after clicking 3 times, it mounts again and goes through the same cycle.

[pawelsas]

Sorry, you're right.
The issue appears due to my code order. I need to include the pages [] in my Component.

I've updated the example:
https://codesandbox.io/s/y7wwzyvjkz?fontsize=14

[pawelsas]

I switched to React POSE. It works now like expected.

[elvisguillen]

@drcmda, I can confirm that @pawelsas issue is happening with me on version 8.0.19 with useTransition. I had a list with a simple accordion functionality that unintentionally re-rendered the new component after completely running the open animation. (Example with a timer in the conditionally rendered component)

Updating to React-Spring v9-beta.3 fixed this for me, not sure what the issue was exactly so I'm really looking forward to the stable release of v9. Would be helpful to know what's causing it to prevent it in the future.

Otherwise loving the new hooks, performance is a lot better with fewer renders in the profiler vs the old Props API.

Thanks!

[littlee]

should I upgrade to v9 now ?

[bailycase]

I am having the same issue of re-renders, even just calling the useTransition hook in a component causes a re-render.

[mcarabajal-technisys]

Do you have any news about this issue? Should i move to a beta version? or should i use react POSE. I will be waiting for a response, it's very importar issue in my project.

[kigorw]

Same problem. Mount - Unmount - Mount - on show, and on hide Unmount - Mount - Unmount
see https://codesandbox.io/s/react-spring-mountunmount-sbqns

@pawelsas please reopen issue as it's not fixed

[Martinnord]

This is also happening to my application when my component mounts. Would love to see a fix for this.

[cuginoAle]

Hello,
I am having the same issue as others, but this bug is marked as Closed !?
Is there a known workaround for this?

thanks

[tahv0]

I'm having this issue too. Any workarounds?

[aleclarson]

Anyone still seeing this bug should try v9 beta:

npm install react-spring@next

If that doesn't help, try the latest v9 canary.
Note: You'll need to change your useTransition call slightly. See #809

If you're still having problems, please open a new issue. 👍