Infinite Loop when trying to keep data UpToDate

Question

const fetchAllNotes = async () => {
    try {
      console.log("Fetching notes...");
      const response = await fetch(`${host}/notes/fetchAllNotes`, {
        method: "GET",
        headers: {
          "Content-type": "application/json",
          "jwt-token": tkn,
        },
      });
      const json = await response.json();
      console.log(json);
      return (json);

    } catch (error) {
      console.log("Error fetching notes:", error);
      return ([]);
    }
  };

-- Above is my function to fetch all notes using api.

//Component I am rendering

import { useContext, useEffect, useState } from "react";
import noteContext from "./noteContext";
import {Container} from 'react-bootstrap'
import Noteitem from "./Noteitem";
import AddNote from "./AddNote";

export default function Notes(){
    const {fetchAllNotes} = useContext(noteContext);
    
    const [notes, setNotes] = useState([]);
    

    useEffect(() => {
        async function getNotes(){
            console.log("Use Effect HOOK...");
         const data = await fetchAllNotes();
          setNotes(data);
        }
        getNotes();
      }, []);


    return(<>
    <AddNote />
    <Container>
        <h2>Your Notes: </h2>
        <Container className="row my-2">
        {notes.map(note =>{
            return <Noteitem key={note._id} note={note} />;
        })}
        </Container>
        
    </Container>

    </>)
}

-- The problem is it updates the UI on initial render, but if i update or delete a note it won't show up until I refresh the page. If i put the notes(state variable) as dependency in Use effect it starts an infinite loop. I am so struck for last 2 days trying to solve it. Any help is much appreciated / Thank You :D

async function getNotes(){
            console.log("Use Effect HOOK...");
         const data = await fetchAllNotes();
          setNotes(data);
        }

useEffect(() => {
        getNotes();
      }, [notes]); 

-- i tried doing something like this but then it just starts infinite loop

Answer 1

If you put notes in the dependencies array of the useEffect, the callback of useEffect will be executed everytime notes is updated (so when setNoted is called). That's why you have an infinite loop.

If you want to update your data everytime an action is done, the best way is to separate the function getNotes like you did, calling it when the component is initialised (with useEffect with an empty dependency array) and every time an operation is done

Like this :

const updateNote = async (id, note) => {
   await yourMethodToUpdateTheNote(id, note);
   getNote();
}