[SOLVED] Not deleting at first

and after that it reloads the page

TL;DR

The user was experiencing an issue with their delete function causing the page to infinitely call a function. Another user pointed out that the issue was likely caused by the `useEffect` hook depending on the `todos` state, which was being changed in the `loadData` function. The user shared their code and explained that adding a payload to the `useEffect` hook caused the infinite loop. Another user suggested that adding a reload after deleting a todo is not the right approach and asked why it was necessary. The user shared their code for the delete function, which included a `window.location.reload()` after deleting. The other user questioned why

i don't see the print statement 🧐

also it seems like the page is refreshing? 🧐

yes bcz after printing the statement page relaods itself

why?

TypeScript

const deleteTodoHandler = async (id) => {
    try {
      db.deleteDocument(
        import.meta.env.VITE_APPWRITE_DATABASE_ID,
        import.meta.env.VITE_APPWRITE_COLLECTION_ID,
        id
      );
      console.log('deleted');
      window.location.reload();
    } catch (err) {
      console.log(err);
      window.location.reload();
    }
  };

here is the code

why are you adding the reload?

to render the list after newly add item or deleting item

i don't think that's the right approach...

I know but in the useEffect function if I gave the any payload or leave it empty it calls the function infinitely

TypeScript

useEffect(() => {
    const loadData = async () => {
      setLoader(true);
      try {
        const getTodos = await db.listDocuments(
          import.meta.env.VITE_APPWRITE_DATABASE_ID,
          import.meta.env.VITE_APPWRITE_COLLECTION_ID
        );
        setTodos(getTodos.documents);
      } catch (err) {
        console.log(err);
      }
    };
    loadData();
    setLoader(false);
  }, []);

how do you know it calls the function infinitely?

see this video

if I gave any payload then its happening

what do you mean?

TypeScript

useEffect(() => {
    const loadData = async () => {
      setLoader(true);
      try {
        const getTodos = await db.listDocuments(
          import.meta.env.VITE_APPWRITE_DATABASE_ID,
          import.meta.env.VITE_APPWRITE_COLLECTION_ID
        );
        setTodos(getTodos.documents);
      } catch (err) {
        console.log(err);
      }
    };
    loadData();
    setLoader(false);
  }, [todos]);

I mean this code

yes, that's causing the infinite loop. That todos at the bottom means "run this whenever todos changes" and you're changing todo in the loadData function. Does that make sense?