CODEWITHSUNDEEP
reactjsreact-hooks
Dalibor Pavlik
Dalibor Pavlik

Reputation: 327

How do I force useEffect hook to run after useNavigate hook is used? How do I force initial render after UseNavigate hook is used?

How do I force useEffect hook to run after useNavigate hook is used? How do I force initial render after UseNavigate hook is used?

In the App.js component, I have this code. The App.js is homepage so it has the "/" path.

const [contacts, setContacts] = useState([]);
     
useEffect(() => {
        const retrieveContacts = async function () {
          const response = await api.get("/");
          setContacts(response.data);
        };
        retrieveContacts();
      }, []);

In the Delete.js component, I have this code. The Delete.js component has the "/delete" path.

  async function deleteContact() {
     await props.deleteContactHandler(contact._id);
     navigate("/");
  }

Originally, I retrieved two contacts from my database. I do retrieve them in the App.js component and my screen looks like this.

enter image description here

After that, I decided to delete one of the contacts (Mike). This is done in the Delete.js component. This is my delete page.

enter image description here

I pressed the "Yes, let´s delete it contact" contact and I am navigated back to the home page (App.js is re-rendered).

http://localhost:3000/

The problem is, that both of the contacts are still there. It looks like the Mike contact has not been deleted from the database.

So what do I do?

I pressed F5 to re-render the component and the Mike contact is gone.

enter image description here

Why is that? This is because I have retrieved the data from the database. When I press F5, the component renders for the first time (it is called initial render), and therefore, the function that is in the useEffect hook runs.

const response = await api.get("/");

Unfortunately, the App.js component is not rendered for the first time when I

navigate ("/")

back to the App.js component and, therefore, the function in the useEffect hook is not fired. As a result, the list of contacts is not updated (the deleted contact is still there).

Is there a way to change this? Can I force initial render of the App.js component after I run the useNavigate hook with

navigate("/").

???

Upvotes: 0

Views: 565

Answers (1)

Tarmah
Tarmah

Reputation: 159

As far as i can judge , whats happening is that navigate is navigating the app to the / url and since this url is the same as before the , the home component is not unmounted . Its the same mounted component and hence when you free f5 the whole app gets rendered and this is when the home component is again rendered.

You can always force the component to re-render when you press the delete button.

Something like

const [updated, setUpdated] = useState(false);
 
useEffect(() => {
        const retrieveContacts = async function () {
          const response = await api.get("/");
          setContacts(response.data);
        };
        retrieveContacts();
      }, [updated]);

And then pass the setter down the delete component

  async function deleteContact() {
     await props.deleteContactHandler(contact._id);
     setUpdated(true);
     navigate("/");
  }

Upvotes: 2

Related Questions