search

LottieFiles / dotlottie-web

Official LottieFiles player for rendering Lottie and dotLottie animations in the web. Supports React, Vue, Svelte, SolidJS and Web Components.
https://developers.lottiefiles.com/docs/dotlottie-player/
MIT License
193 stars 11 forks source link

`dotLottieRefCallback` always gives null instance on react dev server when StrictMode is enabled #233

Closed sheey11 closed 5 months ago

sheey11 commented 5 months ago

Overview

On react 18 dev server, the infamous strict mode will automatically unmount and remount every component to "test if the component is resilient to remounting". Since DotLottieReact will destory the dotLottie instance when unmounting, the ref callback will always carry a null "instance".

https://github.com/LottieFiles/dotlottie-web/blob/bb5954bff2960a34dec3f1806a0a3ba389ad4882/packages/react/src/use-dotlottie.tsx#L166-L175

Live demo: https://codesandbox.io/p/devbox/relaxed-morse-l256sp?file=%2Fapp%2Fpage.tsx

A temporary way to fix this is to disable react strict mode.

Consuming repo

What repo were you working in when this issue occurred?

dotlottie-react

Labels

theashraf commented 5 months ago

Thanks @sheey11 for reporting this, let me know if you're interested in fixing this issue. Thanks!

theashraf commented 5 months ago

@sheey11 fixed in @lottiefiles/dotlottie-react@0.6.4