Question 181683 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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>
Tags:

2

Answers


  1. 0 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Text</title>
</head>
<body>
  <h1 class="text-4xl lg:text-6xl">
    <span id="animatedText"></span>
  </h1>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/typed.min.js"></script>
  <script>
    const AnimatedText = () => {
      const textRef = document.getElementById('animatedText');

      function getRandomSpeed(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
      }

      if (textRef) {
        const options = {
          strings: ['Developer'],
          typeSpeed: getRandomSpeed(50, 100),
          backSpeed: getRandomSpeed(50, 100),
          startDelay: 500,
          cursorChar: '|',
          loop: true,
          showCursor: true,
          cursorSpeed: 100,
          shuffle: false,
          smartBackspace: true,
          backDelay: getRandomSpeed(500, 1500),
        };

        const typed = new Typed(textRef, options);

        window.addEventListener('beforeunload', () => {
          typed.destroy();
        });
      }
    };

    AnimatedText();
  </script>
</body>
</html>
    Login or Signup to reply.
  2. 0

    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'],
            });
        }
    }
}, []);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search