Animations are not smooth

[Nzent]

Animations aren't smooth it delete letters while typing , and shaking

https://user-images.githubusercontent.com/26079832/185244076-34c1f115-cb3c-4c44-bfab-0cce712fb161.mp4

[maxeth]

Hey,

which version are you on? This is a typical development-only bug that happens when you save changes in your code, as certain technologies (create-react-app, nextjs, etc.) try to hot-reload your page on changes while maintaining previous state but re-rendering the component, which may cause the animation to be applied multiple times to the same element since the animation is just an async function that is not stored in React state.

You need to hard-reload your page (refresh button at the top left of the browser) whenever you make changes to the component to reset the DOM and call-stack. If it also bugs out when you save changes that are not related to the TypeAnimation component, you probably have an older version installed as the component is now memoized permanently, which prevents any re-renders that cause this bug.

I think I could make the animation use React's state which would eliminate this (dev-only) bug, but it would cause a very high amount of re-renders of the component as all the parts of the sequence would get pushed sequentially (and potentially infintely) to the state-array.

[Nzent]

I used latest version of this package yesterday (can't remember the ver number) , I'm using Next.js 12.2.4 react": "18.2.0", I don't think it's a hard reload issue bcz I always did it to test as in doc, but I didn't tried it in production env, just dev mode

[maxeth]

I used latest version of this package yesterday (can't remember the ver number) , I'm using Next.js 12.2.4 react": "18.2.0", I don't think it's a hard reload issue bcz I always did it to test as in doc, but I didn't tried it in production env, just dev mode

next 12.2.4 is also used in /example and I just updated react to 18.2.0 (deployed on https://react-type-animation.vercel.app/) and the bug never appears, because it only happens when the component re-renders, but because the component is memoized permanently, it never does so until a hard-refresh

[Nzent]

I used latest version of this package yesterday (can't remember the ver number) , I'm using Next.js 12.2.4 react": "18.2.0", I don't think it's a hard reload issue bcz I always did it to test as in doc, but I didn't tried it in production env, just dev mode

next 12.2.4 is also used in /example and I just updated react to 18.2.0 (deployed on https://react-type-animation.vercel.app/) and the bug never appears, because it only happens when the component re-renders, but because the component is memoized permanently, it never does so until a hard-refresh

Hmm ... I'll give a another try in prod env By the way package is awesome 💖

[maxeth]

I used latest version of this package yesterday (can't remember the ver number) , I'm using Next.js 12.2.4 react": "18.2.0", I don't think it's a hard reload issue bcz I always did it to test as in doc, but I didn't tried it in production env, just dev mode

next 12.2.4 is also used in /example and I just updated react to 18.2.0 (deployed on https://react-type-animation.vercel.app/) and the bug never appears, because it only happens when the component re-renders, but because the component is memoized permanently, it never does so until a hard-refresh

Hmm ... I'll give a another try in prod env By the way package is awesome 💖

If it's really bugging out during dev on the latest version with hard-reloads it will most likely also bug in production, but I just tried all possible ways to re-render the component but because of this usage of memo:

export default memo(TypeAnimation, (_, __) => {
  return true; // immutable, never re-renders
});

It doesn't re-render in any scenario, so I can't really reproduce it anymore. This bug used to happen often with older versions without the memo, as next's _app or page-level state sometimes caused the component to re-render. You could try using React Dev Tools to see if the component re-renders at any given time.

[harrisonhoward]

I have this bug. This does not happen in production it only happens in dev mode with React.StrictMode enabled. React-StrictMode causes 2 renders to detect bad hook usage.

[harrisonhoward]

This bug will be because 2 typing animations are happening concurrently, you will need a unmount function

[maxeth]

I added a tested useEffectOnce hook now in v2.1.0 which also fixed the issue. It's just a tiny overhead but I guess it's worth it for the developing experience