Double render of component

[dfunaki]

Hi, I have been trying to figure out why I am getting a double render of my component

<FlipMove enterAnimation="fade" leaveAnimation="fade" typeName="div" >
       <Card
       key={item.id}
         item={item} />
</FlipMove>

If I put a console.log in the render method of my Card component, I find that FlipMove renders the item twice? I am running into an issue where the Card items that are being rendered are getting mixed up with what was rendered previously. Has anyone else run into this issue? Is there a way I can stop this?

[joshwcomeau]

Hey @dfunaki,

So, I created a simple demo here that does what you describe: https://jsbin.com/taziyifixe/1/edit?js,console,output

In that case, when the items are shuffled, their render methods are invoked twice. This is because we use a transitionend callback to do some cleanup once the animation is completed.

It shouldn't be causing problems though, unless you're adding and removing items very quickly, which is a known issue.

If you can modify that jsbin to show the problem you're describing, I can see if I can find the problem.

[joshwcomeau]

Closing this as I haven't heard back. Feel free to follow up.

[dfunaki]

Hi Joshua, I am sorry I haven't been able to follow up just yet. Things have been a little busy. When I have a chance I will reopen this

…

-Dan

On Tue, Feb 14, 2017 at 9:45 PM, Joshua Comeau ***@***.***> wrote: Closing this as I haven't heard back. Feel free to follow up. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#126 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABK5uZ2Y_9NiWbHpQAMw-dGLsrvE3KZ5ks5rcmbNgaJpZM4L9_Cq> .