fix deepsource

Author: mayank1513

lib/src/client/type-out/utils.tsx

@@ -6,6 +6,7 @@ import styles from "./type-out.module.scss";
  * Supports waiting durations as numeric values.
  */
 export const setupTypingFX = (children: ReactNode): ReactNode => {
+  /** recursively setup the node */
   const handleNode = (node: ReactNode): ReactNode => {
     if (Array.isArray(node)) return node.map(handleNode);
 

packages/shared/src/client/demo/demo.tsx

@@ -4,6 +4,16 @@ import { TypeOut } from "typingfx";
 import styles from "./demo.module.scss";
 import { useEffect, useMemo, useState } from "react";
 
+const steps = [
+  <div key={0}>Hare</div>,
+  <div key={1}>
+    Hare <span style={{ color: "green" }}>Krishna</span> Hare Krishna Hare Krishna
+    <p>Hare Krishna</p>
+    <p>{3000}Hare Rama</p>
+  </div>,
+  <p key={2}>Hare Krishna {3000} Hare Krishna Krishna Krishna Hare Hare</p>,
+  <p key={3}>Hare Krishna Hare Krishna Hare Rama Hare Rama</p>,
+];
 /** React live demo */
 export function Demo() {
   const [paused, setPaused] = useState(false);
@@ -13,25 +23,20 @@ export function Demo() {
       setUser({ name: "Mayank" });
     }, 3000);
   }, []);
-  const steps = [
-    <div key={0}>Hare</div>,
-    <div key={1}>
-      Hare <span style={{ color: "green" }}>Krishna</span> Hare Krishna Hare Krishna
-      <p>Hare Krishna</p>
-      <p>{3000}Hare Rama</p>
-    </div>,
-    <p key={2}>Hare Krishna {3000} Hare Krishna Krishna Krishna Hare Hare</p>,
-    <p key={3}>Hare Krishna Hare Krishna Hare Rama Hare Rama</p>,
-  ];
-  const welcome = (
-    <>
-      {1000}Welcome <i>{`${user?.name},`}</i> {500}How can I help you?{-3000}
-    </>
+  const welcome = useMemo(
+    () => (
+      <>
+        {1000}Welcome <i>{`${user?.name},`}</i> {500}How can I help you?{-3000}
+      </>
+    ),
+    [user],
   );
   return (
     <div className={styles.demo}>
       <button onClick={() => setPaused(!paused)}>{paused ? "Resume" : "Pause"}</button>
-      <TypeOut paused={paused}>{welcome}</TypeOut>
+      <TypeOut paused={paused} steps={steps}>
+        {welcome}
+      </TypeOut>
     </div>
   );
 }