Search code examples
javascriptreactjsreact-hooksuse-effect

do you know why useEffect execute everytimes i enter input?


do you why useEffect execute every times i type a letter at input?

I don't think the input will affect 'useEffect'...

import React, { useEffect, useState } from 'react';

const DBLab = () => {
    const [inputValue, setInputValue] = useState("");

    const printfunc = () => {
        console.log("print");
    }
    useEffect(()=> {
        const print = () => {
            printfunc();
        } 
        print();
    },[printfunc]);
    return (
        <div>
            <h1>dblab</h1>
            <h1>{hashHistory}</h1>
            <input type='text' value={inputValue} onChange={(e)=>setInputValue(e.target.value)}/>
        </div>
    )
}

export default DBLab;


Solution

  • Each time you enter a letter you update the inputValue which causes the component to re-render. When the component re-renders, the variable printfunc is re-initialised. And because your useEffect function has printfunc in the dependency array it is triggered each time this variable changes.

    To solve this, remove printfunc from the array like so:

        useEffect(()=> {
            const print = () => {
                printfunc();
            } 
            print();
        },[]);