react hook useEffect has a missing dependency error

Question

import React, { useState, useEffect, useRef } from 'react';
import styles from './TextAnimation.module.scss';

const TextAnimation = () => {
    const [typedText] = useState([
        "welcome to Byc",
        "change your life"
    ]);
    const [value, setValue] = useState();
    const [inType, setInType] = useState(false);
    
    const isMounted = useRef();
    
    let attachClasses = [styles.Blink];
    if(inType) {
        attachClasses.push(styles.Typing)
    }
    
    const typingDelay = 200;
    const erasingDelay = 100;
    const newTextDelay = 5000;

    let textArrayIndex = 0;
    let charIndex = 0;
    
    const type = () => {
        if(charIndex < typedText[textArrayIndex].length + 1) {
            if(isMounted.current) {
                setValue(typedText[textArrayIndex].substring(0, charIndex));
                charIndex ++;
                setTimeout(type, typingDelay);
            }
        } else {
            if(isMounted.current) {
                setInType(false);
                setTimeout(erase, newTextDelay);
            }
        }
    };

    const erase = () => {
        if(charIndex > 0) {
            if(isMounted.current) {
                setValue(typedText[textArrayIndex].substring(0, charIndex - 1));
                charIndex --;
                setTimeout(erase, erasingDelay);
            }
        } else {
            if(isMounted.current) {
                setInType(false);
                textArrayIndex ++;
                if(textArrayIndex >= typedText.length) {
                    textArrayIndex = 0;
                }
                setTimeout(type, newTextDelay - 3100);
            }
        }
    };
    
    useEffect(() => {
        isMounted.current = true;
        type();
        return () => {
            isMounted.current = false;
        }
    }, [])

    return (
        <div className={styles.TextAnimation}>
            <span className={styles.Text} >{value}</span><span className=        
            {attachClasses.join(' ')} >&nbsp;</span>
        </div>
    );
};

export default TextAnimation;

Hello, i am trying to make text animation but i got this message...

react hook useEffect has a missing dependency: 'type'. Either include it or remove the dependency array

I tried put type in the [ ] just like this,

useEffect(() => {

 ...

}, [type])

but it didn't work I tried to search the solution in many way but i couldn't Is there any can help me? Thank you

https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook <= does this answer you qs — Jake Lam, Oct 18 '20 at 08:03
`type` is a function which is created on each render, so `useEffect` will be called on each render too. Try to memorize the function `type` with `useCallback` hook. — Alexandr, Oct 18 '20 at 08:08
You can also move the function `type` definition into the `useEffect` callback. — norbitrial, Oct 18 '20 at 08:30

react hook useEffect has a missing dependency error

0 Answers0