1

Data usage really matters for my targeted users. So, I am looking for an APPROACH that'll help me reduce the number of data fetching during react rerender cycles in React and React-native App.

Let's say I have a page that renders all the Items fetched from an API. Since the API's data can be updated at anytime, I am obliged to re-call the API whenever the user displays this page.

IS THERE ANY WAY FOR ME TO KNOW THAT THE DATA HAS BEEN UPDATED WITHOUT BEING OBIGED TO RECALL THE API?? Because I think that the less HTTP requests I send the less mobile data I consume (Maybe I am wrong... I don't know)

I thought of implementing a solution with Redux and Socket.io : I wanted to prepare an event called data-updated that will be managed by socket.io and whenever one of the users performs an action that updates the item lits (The API data), the data-updated event will be triggered and all the connected users will be notified. Then in the data-updated event handler I will update the item list state slice in the redux store.

My worry is that since socke.io keeps the connection between users and the server alive during the whole session, Won't this approach consume even more Mobile data than recalling the server at any rendering??

Judy Nkwama
  • 81
  • 7

2 Answers2

0

You can proceed with graphql with mutations and its caching mechanism, its pretty cool and if I mention if it is handled efficiently you can run your application in 2g network also with speed. Checkout its usage and advantages over REST you gonna love it. https://graphql.org/

Another way is by using redisCache but personally I've not used it though you can check.

mainak
  • 1,886
  • 2
  • 9
  • 19
  • hi @mainak thank you for the response! `graphql` is actually a good approach but I'm already accustomed to RESTful API logic. It's will take me time to switch to the `graphQL` logic. And `redisCache` only fasten how long the API takes to respond a complex DB query but doesn't stop the http request if the API data has not been modified. I am not really concerned by the speed. **I just wanna optimize the number of http requests sent the API.** Thanks again! – Judy Nkwama Jul 27 '22 at 15:23
0

You can use React-query lib for data fetching, updating, caching etc.you can read more about it but read its docs.

https://tanstack.com/query/v4/?from=reactQueryV3&original=https://react-query-v3.tanstack.com/

Hamid khan
  • 105
  • 7
  • Thank you for your answer!! I went through the document link you attached. I think react-query only makes sure that the app only re-renders if the result of the a http request if different from the result of the same request called at the previous render cycle. I mean when the user displays the ITEMS page for the first time, react-query sends the http request and store that result in the cach, when the user comes back for, react-query sends again the same http request and then compares the result with the cached one, if the match no need to rerender the app. – Judy Nkwama Jul 27 '22 at 18:17
  • So, under the hood the http request is still sent whenever the user displays the ITEMS list. My purpose is to be able to avoid that http request as long the data in my DB or API has not change. – Judy Nkwama Jul 27 '22 at 18:19