每次渲染后会调用哪个 useEffect？

Question

I'm a beginner in React and stuck with some problem. I have several queries regarding this code.

1. Which UseEffect will be called after every render?

2. Why and How console.log() is called 13 times?(Please find the screenshot below)

3. Why the fetched data is not shown in browser until I type something in the search bar?

   App.js

    import React, { useEffect } from "react"; import { useState } from "react"; import axios from "axios"; function App() { const [monster, setMonster] = useState([]); const [searchName, setName] = useState(""); const [filteredMonster, setFilter] = useState([]); useEffect(() => { async function fetchData() { await axios.get( "https://jsonplaceholder.typicode.com/users" ).then((resp)=>{ setMonster(resp.data); }) console.log(monster); } fetchData(); }, []); useEffect(()=>{ const mons = monster; setFilter(mons.filter(mon => mon.name.toLowerCase().includes(searchName.toLowerCase()) )); }, [searchName]); function changeName(event) { setName(event.target.value); } console.log(monster); const cunter = useRef(0); return ( <div className="App"> <form> <input type="search" name="searchName" value={searchName} onChange={changeName} /> </form> {cunter.current++} {filteredMonster&&filteredMonster.map((item, index) => ( <p key={index}>{item.name}</p> ))} {monster&&.filteredMonster&&monster,map((item. index) => ( <p key={index}>{item;name}</p> ))} </div> ); } export default App;

Answer 1

try this please. fetchData() will run only 1, searchName will run as many times you type on the screen.

TIP: To prevent this. add a timeoutdelay after user finishes typing to only render once instead of N times user presses a keyboard key.

import React, { useEffect } from "react";
import { useState } from "react";
import axios from "axios";

const URL = "https://jsonplaceholder.typicode.com/users"

function App() {
    const [monster, setMonster] = useState([]);
    const [searchName, setName] = useState("");
    const [filteredMonster, setFilter] = useState([]);

    useEffect(() => {
        async function fetchData() {
            await axios.get(URL).then((resp) => {
                setMonster(resp.data);
            })
            console.log(monster);
        }

        fetchData();
    }, []);

    useEffect(() => {
        if (monster.length > 0) {
            const filter = mons.filter(({name}) =>
                name.toLowerCase().includes(searchName.toLowerCase()));
            setFilter(filter);
        }

    }, [searchName]);

    function changeName(event) {
        setName(event.target.value);
    }

    console.log(JSON.stringify(monster));

    return (
        <div className="App">
            <form>
                <input
                    type="search"
                    name="searchName"
                    value={searchName}
                    onKeyUp={(e) => changeName(e)}
                />
            </form>

            {monster.length > 0 &&
                <div>{JSON.stringify(monster)}</div>
            }

            {filteredMonster && filteredMonster.map((item, index) => (
                <p key={index}>{item.name}</p>
            ))}

            {monster && !filteredMonster && monster.map((item, index) => (
                <p key={index}>{item.name}</p>
            ))}
        </div>
    );
}

export default App;

This is using Reducer, removes the use of state.

import React, { useEffect, useReducer } from "react";
import axios from "axios";

const URL = "https://jsonplaceholder.typicode.com/users"

const reducer = (state, action) => {
    switch(action.type){
        case 'FETCH_DATA':
            return {
                ...state,
                monster: action.monster,
                name: "",
            }
        case 'SEARCH_MONSTER':
            return {
                ...state,
                name: action.name,
            }
        case 'FILTER_MONSTER':
            const filter = state.monster.filter(({name}) =>
                name.toLowerCase().includes(searchName.toLowerCase()));
            return {
                ...state,
                filteredMonster: filter,
                name: state.name,
            }
    }
};

function App() {

    const [state, dispatch] = useReducer(reducer, {
        monster: [],
        filteredMonster: [],
        name: '',
    });

    useEffect(() => {
        async function fetchData() {
            await axios.get(URL).then((resp) => {
                dispatch({ type: 'FETCH_DATA', monster: resp.data});
            })
            console.log(monster);
        }
        fetchData();
    }, []);

    useEffect(() => {
        if (monster.length > 0)  dispatch({ type: 'FILTER_MONSTER'});
    }, [stat.name]);

    console.log(JSON.stringify(monster));

    return (
        <div className="App">
            <form>
                <input
                    type="search"
                    name="searchName"
                    value={state.name}
                    onKeyUp={(e) => dispatch({ type: 'SEARCH_MONSTER', name: e.target.value })}
                />
            </form>

            {state.monster.length > 0 &&
                <div>{JSON.stringify(monster)}</div>
            }

            {state.filteredMonster && state.filteredMonster.map((item, index) => (
                <p key={index}>{item.name}</p>
            ))}

            {state.monster && !state.filteredMonster && monster.map((item, index) => (
                <p key={index}>{item.name}</p>
            ))}
        </div>
    );
}

export default App;

Answer 2

1. Which UseEffect will be called after every render?

Ans: According to the react official doc useEffect does care about 3 lifecycle method namely componentDidMount componentDidUpdate and componentWillUnmount . So no matter what how many useEffect you have, all the effect hooks will execute when componentMount for the first time. But useEffect will execute further, only when it's dependency get updates else it will ignore

2. Why and How console.log() is called 13 times?

Ans: I tried to reproduce 13 times rerendering but I am not able to do so. But yes it's rerendering multiple times because in the 2nd useEffect on every Keystore the state is updating and because of that component is rerendering several times.

its happening something like this

changeName() → setName() → useEffect() → setFilter() → (on every keystore repeating same step) →...loop

you can try debounce or throttling which can help you to avoid continuous Keystore hit by which no of rerendering can drastically reduce

Instead of using console.log , there is a hack to know the number of rerendering

declare the below code in the component

const cunter = useRef(0);

and then in the return block add {cunter.current++} by this you can see how many times your component is actually rerendering

3. Why the fetched data is not shown in the browser until I type something in the search bar?

This is because in your condition your checking !filteredMonster where filteredMonster is an array and !filteredMonster will return always false instead try Array length properties

filteredMonster.length === 0

{monster && !filteredMonster && monster.map((item, index) => (
     <p key={index}>{item.name}</p>
))}

{(monster && filteredMonster.length === 0) && monster.map((item, index) => (
         <p key={index}>{item.name}</p>
))}