Delay unmounting of the component in React

When you want to trigger animations before the component will disappear from your page you need to postpone unmounting of the component.

It is fairly easy to animate a mounting component. You can just write CSS class with @keyframes rule and attach this CSS class to HTML element. That’s it. When the component mounts with appropriate styles it triggers the keyframes animation. But what if you want to trigger the animation when the component is going to unmount? You need to somehow delay unmounting of the component, so the animations will have time to end before the component will disappear from the document.

But how can you do this? The idea is very simple!

As you can see, I’ve created HOC that handles all the logic responsible for it. If the component wants to unmount, I am delaying it by setting the state in setTimeout. If the component wants to mount, I am just rendering it — without any delay. And that’s all!

Now you can use this HOC like this:

And this is how it looks in action:

Related posts:

The past year in my startup life has been a wild journey full of ups and downs. As I embark on the next adventure in my career, I want to share some of the key lessons that I learned at K4Connect, an…

Future Autonomous Organizations will rely on bots to run their routine and complex tasks better and cheaper than us humans.

This story is not about the details of the practices, configuration and strategy for taking the Angular applications in production. It is also not a tutorial about how to build Angular apps. This is…