why it is animating as ddeevveellooppeerr instead of developer when using react hooks

Question

I am trying to create both rubberband effect and typing effect for my code and the rubberband effect works fine but i am not understanding the issue why the typing effect is not working correctly instead of Developer it is printing as DDeevveellooppeerr it starts when i refresh the page.

i have tried all the possible ways that i know none of them are working

this part of code is for my letters animation

  const [letterClass, setLetterClass] = useState('text-animate');
  const hiArray = ['H', 'i,'];
  const imArray = ['I', ' ', 'a', 'm'];
  const nameArray = ['u', 'm', 'a', 'n', 't', 'h'];
  const jobArray = ['W', 'e', 'b'];

  useEffect(() => {
    const timeout = setTimeout(() => {
      setLetterClass(prevLetterClass =>
        prevLetterClass === 'text-animate' ? 'text-animate-hover' : 'text-animate'
      );
    }, 3000);

    return () => clearTimeout(timeout);
  }, []);

this part is for the typing effect by using the ityped library

  const textRef = useRef();

  useEffect(() => {
    if (textRef.current) {
      init(textRef.current, {
        showCursor: false,
        backDelay: 1000,
        backSpeed: 60,
        strings: ['Developer'], 
      });
    }
  }, []);

this is my code

    <section className="bg-black text-white px-5 py-20 md:py-32">
      <div className="container mx-auto grid md:grid-cols-2 items-center justify-center md:justify-between relative">
        <div className="hero-info">
          <h1 className="text-4xl lg:text-6xl">
            <AnimatedLetters letterClass={letterClass} strArray={hiArray} idx={10} />{' '}
            <br />
            <AnimatedLetters letterClass={letterClass} strArray={imArray} idx={14} />{' '}
            <span className={`${letterClass} _16 text-accent`}>S</span>
            <AnimatedLetters letterClass={letterClass} strArray={nameArray} idx={17} /> <br />
            <AnimatedLetters letterClass={letterClass} strArray={jobArray} idx={23} />{' '}
            <span ref={textRef}></span>
          </h1>
        </div>
        <div className="blobc relative hero-img mt-16 md:mt-0">
          <div class="blob-overlay md:ml-auto"></div>
          <div className="blob md:ml-auto"></div>
        </div>
      </div>
    </section>

Answer 1

Your problem is because your project is in strict mode, causing components and effects to be run twice to find bugs

https://react.dev/reference/react/StrictMode

Your components will re-render an extra time to find bugs caused by impure rendering.
Your components will re-run Effects an extra time to find bugs caused by missing Effect cleanup.

You can fix it by either removing the <StrictMode> in index.js,
Or by returning an anonymous function in the effect:

useEffect(() =>
{
    return () => {
        if (textRef.current)
        {
            init(textRef.current, {
                showCursor: false,
                backDelay: 1000,
                backSpeed: 60,
                strings: ['Developer'],
            });
        }
    }
}, []);