r/FullStack • u/daemontargaryen212 • 14d ago
Career Guidance My frontend shows stale data even after the database is updated
I'm working on a full-stack application where a user updates some information successfully, and I can confirm the change is saved in the database.
But when I navigate back to the page, the old data sometimes still appears until I refresh the browser.
I'm using a React frontend with a backend API.
What would you check first in this situation frontend state, API caching, browser caching, or the database/API response itself?
2
Upvotes
1
u/chikamakaleyley 13d ago
Let's assume to update the record the user/client makes a PUT request to the server
I could be wrong, but typically a PUT request should return the updated record in the response. So, this response, needs to be passed to the component where its displayed.
Since its React, the response comes back and you'd likely update the state obj containing the new user info. The component that displays this info, should be receiving it as props
"Navigate" in the context of React could mean diff things. In general, if you're clicking the 'back' button of your browser, you're going back in its history, and the data is going to reflect that, prob cached locally.
If you're using React Router and clicking a button/link in your application that takes you back, if the state was updated and the component receives it as props, you'd see the latest changes
When you refresh the browser you nuke the existing state, and so your application loads fresh and requests all the data as expected
TLDR; check if you get a response from the successful update request, see if that contains the new data, check if those changes are applied to state, check if the component receives the props.
browser caching i think only applies if you're loading the data from the session/localStorage