React fetch data every time page reloads - reactjs

I am making a react SPA application, atm I'm using fetch every time page loads, I would like to know if it's better to store such data(for example: user data) in Local Storage and if yes, what if some data in the backend DB changes?
Sorry if there are similar questions, I just couldn't find them,
Thanks

Store user data after fetching from server in local storage is good solution that I have used before.
Use React-Query
For update user data after that updated in DB I recommend using a swr approach packages like react-query which sync your local data with server immediately.

Related

React Redux REST API - when to reload data into application

I am currently working on a MERN stack application with a React Redux front end. It is an job management system with a calendar showing booked in jobs/events.
I have a question regarding best practices around making API calls and loading data into my app. The database is small scale at the moment so a small amount of data is loaded into my Redux store.
When is best to make GET requests to load my data into my app and handle changes made by other clients? Do I load all data on each page load? Is there a cleaner/more efficient way to do this?
Any help/guidance is much appreciated, thank you
From my personal experience, I believe that if your application will be accessed by different users simultaneously, you could GET the calendar data when a user first accesses his calendar and whenever the user is going to add a new job/event. This way he has access to the latest data before creating a new event. Also when creating an event, if the API returns an error because there is a collision between events you can update the data on the FE. This would be a lazy approach and it wouldn't keep the calendar constantly updated.
If you need data to be fresh you could also set a timer and execute GETs periodically.

Fetch data only once, and then store it in local storage

So, I have an app where I'm fetching data users from jsonplaceholder using react-redux.
The problem is, everytime I refresh the page, the data also erased(?) (I'm sorry for my lack of vocab) and fetched again.
The thing is, I want it to not erased (again, sorry) and still there. I've tried this one and I keep getting error, either it's invalid assignment to const or is not defined.
Is anybody here know how to keep the fetched data in local storage? Thanks before!
When you refresh then your react state will go on the initial state. If you want to store the data and don.t want to erase it after refresh, then you have to use the localstore or some lightweight database (like some Persistant database). Then only your data will not erase after refresh.

Should I call from server or client if data is already on client side?

I feel this is a stupid question, but I am having a problem answering it myself, so I am relying on experienced programmers to help me with this.
I have a react app that is running on a laravel backend (php), and using redux for a presisted state for my app.
I essentially request all data that will be present on another page, and would like to know, if I should just use the data that I initially have in my redux store or just reload everything on a different page?
You should use the data in redux store. But persisted data can be altered, so in case you want to verify the data or something along the lines, you can just compare the data that is on the client side with that on the server. Otherwise, the very idea of redux is to use data in multiple pages (components)

What is the most optimsed way to update locally stored table data in react redux app

In a CRM project I'm storing leads(there are 1000+ leads, I'm getting 10 at a time for pagination) that I get from an api in localStorage. On second load I want to use the local storage to show stored data immediately and update the store with new leads if any new leads are available in the api. To me this seems like he best UX, but I'm unsure about how to go about this.
Also whenever I get new data I don't want to re render the whole page, just render in the new leads.
How do I achieve this?
TL DR: How n when to update localStorage data(which came from an api) that I have persisted with redux persist efficiently with new items that might be available in the api?
I think you can check this up.
http://rationalappdev.com/storing-data-from-api-with-redux-in-react-native-apps/

Practical approach for design a todo-app

I try to make a todo-app using react/(maybe)redux. My goal is to have a client that cant communicate with server using RESTful API to fetch and update data.
I already wrote my server that can handle AJAX request and host it on heroku.
My next step is to create a front-end using react or react/redux. Im not sure what is the right approach to store and update data.
Should I fetch and update data directly from client to server? If this the case, I think I only need to use react, do I ?
The second approach, I guess I need to use react and redux, is to fetch the "initial" data from server and store in reducers, display and change whatever user wants. Then, at the end, update the data back to server.
Im still learning web dev. I really appreciate any suggestion or documents that I can read
React alone will be plenty sufficient for a small app. As a rule, adding redux adds complexity and it is best used when many containers need to access the same state.

Resources