Question 378061 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I have a question about setState in React, specifically when it's inside a callback function of a fetch and when it's not

why in the first code when the setAllMemes is called the component wait for all the code to finish before re-rendering and in the second code it re-render before the code has finished

first code

import React from "react"

export default function Meme() {
    console.log("react render")
    const [allMemes, setAllMemes] = React.useState([])

    console.log("allMemes outside the use effect" , allMemes)    

    React.useEffect(() => {
    
        console.log("before setAllMemes")
        setAllMemes(["string1","string2"]);
        console.log("after setAllMemes");
            
        console.log("allMemes inside the use effect" , allMemes);
    }, [])

    return (
        <main>
        
        </main>
    )
}

the output in the console

›react render
›allMemes outside the use effect,[]
›before setAllMemes
›after setAllMemes
›allMemes inside the use effect,[]
›react render
›allMemes outside the use effect,["string1", "string2"]

second code

import React from "react"

export default function Meme() {
     console.log("react render")
     const [allMemes, setAllMemes] = React.useState([])

     console.log("allMemes outside the use effect" , allMemes)    

     React.useEffect(() => {
        fetch("https://api.imgflip.com/get_memes")
            .then(res => res.json())
            .then(data => {
                console.log("before setAllMemes")
                setAllMemes(data.data.memes);
                console.log("after setAllMemes");
                })
        console.log("allMemes inside the use effect" , allMemes);
        }, [])

        return (
            <main>
        
            </main>
        )
    }

the output in the console

›react render
›allMemes outside the use effect,[]
›allMemes inside the use effect,[]
›before setAllMemes
›react render
›allMemes outside the use effect [array of object from the api]
›after setAllMemes
Tags:

2

Answers


  1. 0

    In the first code snippet, the setAllMemes function is called synchronously inside the useEffect hook. Since this is synchronous, it completes before the next lines of code execute. When you log allMemes inside the useEffect, it still shows an empty array because the state update hasn’t taken effect yet. When the component re-renders after the state update, the updated allMemes array is displayed.

    In the second code snippet, the setAllMemes function is called asynchronously inside the useEffect hook after fetching data from an api. The fetch returns a Promise, and the setAllMemes function is called in the Promise’s then callback. This means that setAllMemes is called asynchronously, and the next lines of code after the fetch operation continue to execute while the data is being fetched. When you log allMemes inside the useEffect, it still shows an empty array because the state update hasn’t happened yet.

    Login or Signup to reply.
  2. 0

    Something is off with your output. Check by running this snippet. It is not rendering before after setAllMemes.

    function Meme() {
     console.log("react render")
     const [allMemes, setAllMemes] = React.useState([])

     console.log("allMemes outside the use effect" , allMemes)    

     React.useEffect(() => {
        fetch("https://api.imgflip.com/get_memes")
            .then(res => res.json())
            .then(data => {
                console.log("before setAllMemes")
                setAllMemes(data.data.memes);
                console.log("after setAllMemes");
                })
        console.log("allMemes inside the use effect" , allMemes);
        }, [])

        return (
            <main>
        
            </main>
        )
    }
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Meme />);
    <div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search