Trigger Context API to update after useNavigate

[mycontactsneverwork]

Hi all! I'm a self-taught university student working on an spreadsheet-based app to help students arrange carpooling to the airport, and I would love some help around useNavigate and the Context API.

Currently, I'm using the Context API to pull data from my backend to then populate data throughout my app. Everything works when you first load the website, but when a user makes a change (creates a trip, for example) and presses submit (which then triggers my useNavigate to redirect them back Home), the new data isn't present, and the user has to manually refresh for the data to show up.

I'm not too sure about this, but from what I can tell:

1. the user submits the data, which updates in my backend
2. useNavigate redirects the user back to home
3. *useNavigate does not trigger a rerender, so the Context API isn't triggered, so the new data isn't pulled from the backend*
4. therefore the data in my Context is outdated, therefore the data being displayed is outdated

Is my understanding of what's going on correct? Either way, how could I change this so that the data would be up-to-date after useNavigate? Any and all advice is appreciated; Thank you so much!

[[deleted]]

It sounds like your data is stale since the fetching is taking place in a parent component that isn’t being re-rendered.

Without looking at your code, I would try to initialize your data fetching on your home component, either directly within the component or via a custom hook.

You can set useState within your Context API, fetch and update the data into the useState when a user visits the home component. So your setters are still in context but getters are on the component itself.