useEffect execution help

Hi, iam learning react but come threw a problem , Iam not able to understand execution flow of this app, i put some console logs but still iam not able to understand execution flow. kindly help

thanks in advance

import React,{useState, useEffect} from "react";
import axios from "axios";
let time=1;

const Search = () => {
    const [term, setTerm] = useState("programming");
    const [results, setResults]=useState([]);
    const [debouncedTerm, setDebouncedTerm]=useState(term);
     console.log("first useeffect called");
const timerId= setTimeout(()=>{
    console.log("set timeout called");

return () =>{

    console.log("second useeffect called");
const search = async () => {
const {data} = await axios.get("",{
        list: "search",
        origin: "*",

    console.log("set result called");



const renderedResults =>{
    console.log("map executed");
<div key={} className="item">
    <div className="right floated content">
        <a className="ui button"
    <div className="content">
        <div className="header">
        <span dangerouslySetInnerHTML={{__html:result.snippet}}></span>

        <div className="ui form">
            <div className="field">
                <label>Enter Search term</label>
                <input value={term} 
        <div className="ui cell list">

export default Search;

you can use console.time to also see a time of the console output.
To understand the flow of the code in this app, obviously you should be aware of how react and hooks work. The basics are, useEffect will run after the component has rendered. useState set functions will cause a component rerender. useEffect hooks also have a dependency array, which limits when the hook should be called. For example the first useEffect hook in the code has the “term” state variable provided as dependency, which means the hook will be called only if that state has been changed. In the hook itself there is a timer of 1s and once that timer runs out, it will call the setDebounceTerm, which is a state change, so the component will rerender. After the rerender, again useEffect hooks will be called, whenever their dependency values changed and cause a component rerender, whenever they change the component state.
The hook with axious.get function will run whenever the “debouncedTerm” state has been changed nad will take a while to execture(as it will wait for the asynch method to run) and again, it produces a state change with setResults, which will trigger a component rerender.

hi, this is the output of console

render 1
first useeffect called
second useeffect called
set timeout called
set result called
render 2
map executed

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.