using useEffectOnce hook to not render twice with React Strict mode

example/.gitignore

@@ -32,3 +32,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+package-dev.json

src/components/TypeAnimation/index.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, memo, HtmlHTMLAttributes } from 'react';
 import { type, type as typeloop } from '../../typical';
-
 import styles from './index.module.css';
+import { useEffectOnce } from '../../hooks/useEffectOnce';
 
 type Speed =
   | 1
@@ -159,7 +159,7 @@ const TypeAnimation: React.FC<TypeAnimationProps &
     }
   }
 
-  useEffect(() => {
+  useEffectOnce(() => {
     if (repeat === Infinity) {
       type(typeRef.current, speed, ...sequence, typeloop);
     } else if (typeof repeat === 'number') {
@@ -173,12 +173,15 @@ const TypeAnimation: React.FC<TypeAnimationProps &
     } else {
       type(typeRef.current, speed, ...sequence);
     }
+    return () => {
+      typeRef.current;
+    };
   });
 
   const Wrapper = wrapper;
   return <Wrapper style={style} className={finalClassName} ref={typeRef} />;
 };
 
 export default memo(TypeAnimation, (_, __) => {
-  return true; // IMMUTABLE!
+  return true; // IMMUTABLE
 });

src/hooks/useEffectOnce.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useEffectOnce = (effect: () => void | (() => void)) => {
+  const effectFn = useRef<() => void | (() => void)>(effect);
+  const destroyFn = useRef<void | (() => void)>();
+  const effectCalled = useRef(false);
+  const rendered = useRef(false);
+  const [, setVal] = useState<number>(0);
+
+  if (effectCalled.current) {
+    rendered.current = true;
+  }
+
+  useEffect(() => {
+    if (!effectCalled.current) {
+      destroyFn.current = effectFn.current();
+      effectCalled.current = true;
+    }
+
+    setVal(val => val + 1);
+
+    return () => {
+      if (!rendered.current) {
+        return;
+      }
+
+      if (destroyFn.current) {
+        destroyFn.current();
+      }
+    };
+  }, []);
+};