When you make the change, you’ll receive an error in the terminal where you are running your React app:

ErrorAssignments to the 'mounted' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect  react-hooks/exhaustive-deps
When you make the change, you’ll receive an error in the terminal where you are running your React app:

ErrorAssignments to the 'mounted' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect  react-hooks/exhaustive-deps
Hello @JoeMorgan, At the end of the “Refreshing Fetched Data” section, my app didn’t really refresh data. It got updated in “db.json” and I could see that the data was fetched (in the Network tab). But the list state didn’t update. I think the reason is that conditional if (mounted) {}. Why is this happening ? After I added the code in the “Preventing Updates on Unmounted Components”, it did work and data got refreshed. Please explain why this is happening.

useEffect(() => {
        let mounted = true;
        if (list.length && !alert) {
            return;
        }
        getList().then((items) => {
            if (mounted) {
                console.log("fetched data");
                setList(items);
            }
        });
        return () => (mounted = false);
    }, [alert, list]);
This time, the effect also needs to fetch data when the page loads. Create a conditional that will exit the function before the data fetch if list.length is truthy—indicating you have already fetched the data—and alert is false—indicating you have already refreshed the data. Be sure to add alert and list to the array of triggers:

import React, { useEffect, useState } from 'react';
import './App.css';
import { getList, setItem } from '../../services/list';

function App() {
  const [alert, setAlert] = useState(false);
  const [itemInput, setItemInput] = useState('');
  const [list, setList] = useState([]);

  useEffect(() => {
    let mounted = true;
    if(list.length && !alert) {
      return;
    }
    getList()
      .then(items => {
        if(mounted) {
          setList(items)
        }
      })
    return () => mounted = false;
  }, [alert, list])

  ...

  return(
    <div className="wrapper">
      ...
    </div>
  )
}

export default App;
Hello, I am wondering if it is possible to call setTimeout in the handleSubmit procedure like here below? I tried and it seems it is working.

const handleSubmit = (e) => {
    e.preventDefault();
    setItem(itemInput)
      .then(() => {
        setItemInput('');
        setAlert(true);
        setTimeout(() => {
          setAlert(false);
        }, 1000)
      })
  };
tutorial/src/services/list.js

export function getList() {
  return fetch('http://localhost:3333/list')
    .then(data => data.json())
}

export function setItem(item) {
 return fetch('http://localhost:3333/list', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json'
   },
   body: JSON.stringify({ item })
 })
   .then(data => data.json())
}
api-tutorial/src/components/App/App.js

import React, { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [list, setList] = useState([]);
  return(
    <>
    </>
  )
}

export default App;
api-tutorial/src/components/App/App

import React, { useEffect, useState } from 'react';
import './App.css';
import { getList } from '../../services/list';

function App() {
  const [list, setList] = useState([]);

  useEffect(() => {
    let mounted = true;
    getList()
      .then(items => {
        if(mounted) {
          setList(items)
        }
      })
    return () => mounted = false;
  }, [])

  return(
    <div className="wrapper">
     <h1>My Grocery List</h1>
     <ul>
       {list.map(item => <li key={item.item}>{item.item}</li>)}
     </ul>
   </div>
  )
}

export default App;
api-tutorial/src/components/App/App.css

.wrapper {
    padding: 15px;
}
Save and close the file. Next, open App.css and add some minimal styling:

nano src/components/App/App.css

Recommend

How To Call Web APIs with the useEffect Hook in React Step 3 — Sending Data to an API Refreshing Fetched Data

How To Call Web APIs with the useEffect Hook in React Step 3 — Sending Data to an API Sending Data to a Service

How To Call Web APIs with the useEffect Hook in React Step 2 — Fetching Data from an API with useEffect

How To Call Web APIs with the useEffect Hook in React Step 1 — Creating a Project and a Local API

Como Instalar o Nginx no Ubuntu 18.04 Passo 5 – Configurando Blocos do Servidor (recomendado)

Como Instalar o Nginx no Ubuntu 18.04 Passo 4 – Gerenciando o Processo do Nginx

Como Instalar o Nginx no Ubuntu 18.04 Passo 3 – Verificando seu Servidor Web

Como Instalar o Nginx no Ubuntu 18.04 Passo 2 – Ajustando o Firewall

Como Instalar o Nginx no Ubuntu 18.04 Passo 1 – Instalando o Nginx

How To Migrate Linux Servers Part 2 - Transfer Core Data Dump and Transfer your Database files

How To Migrate Linux Servers Part 2 - Transfer Core Data Modifying Configuration Files The Robust and Recommended Way

How To Migrate Linux Servers Part 2 - Transfer Core Data Modifying Configuration Files The Quick and Dirty Way

How To Migrate Linux Servers Part 2 - Transfer Core Data Start Transferring Data Adjusting the Script to Sync Data and Files

How To Migrate Linux Servers Part 2 - Transfer Core Data Start Transferring Data Begin File Transfers Early

How To Migrate Linux Servers Part 2 - Transfer Core Data Start Transferring Data Installing and Using Screen

How To Migrate Linux Servers Part 2 - Transfer Core Data Install Needed Programs and Services Specifying Version Constraints and Installing

How To Migrate Linux Servers Part 2 - Transfer Core Data Install Needed Programs and Services Add Additional Repositories if Necessary

How To Migrate Linux Servers Part 2 - Transfer Core Data General Strategy Creating a Migration Script

An Introduction to Managing Secrets Safely with Version Control Systems Checking your Git Repository for Sensitive Data Scanning Your Projects

Como usar métodos Object no JavaScript Object.getPrototypeOf()

Como usar métodos Object no JavaScript Object.seal()

Como usar métodos Object no JavaScript Object.freeze()

Como usar métodos Object no JavaScript Object.assign()

Como usar métodos Object no JavaScript Object.entries()

Como usar métodos Object no JavaScript Object.values()

Como usar métodos Object no JavaScript Object.keys()

Como usar métodos Object no JavaScript Object.create()