Hello I am working on a React application (an e-commerce). I noticed that when I try loading all the product on a first render, it takes about 9 seconds (Load time is similar to what I got on Postman as well). However, I am trying to improve the load time by caching the data in a cookie so I decided to try out React-Cookie library. However, I noticed that when I tried to save the response data from my API call (asynchronous), My cookie doesn't get set with the data but it works well with hard-coded synchronous value. I have looked through the React-cookies documentation and I couldn't find any solution to this problem. Any suggestion or pointer to how this issue can be solved would be greatly appreciated. Thank you.
Asked
Active
Viewed 817 times
0
Hamed Jimoh
- 79
- 1
- 6
-
1Please share the actual code, instead of its picture. – Eldar Mar 31 '22 at 07:57
-
Could you print the value of `data` and post it? – Rukka Mar 31 '22 at 07:57
-
@Rukka I updated my question with the api data response snapshot. – Hamed Jimoh Mar 31 '22 at 08:14
-
This isn't what you should use cookies for. They will be attached to **every** request that your browser makes to the same domain. LocalStorage, SessionStorage and IndexedDB are all better choices and they are all well supported across browsers. – spender Mar 31 '22 at 09:25
1 Answers
0
The maximum size of a cookie is 4096 bytes. Besides that, if you use cookies, your cookie data will go to the server for every request.
You may use local storage or session storage. If you use Redux, you can use https://github.com/rt2zz/redux-persist
Can Küçükyılmaz
- 88
- 1
- 5
-
Thank you. I am already using Redux Persist in my project. And even at that a request still get sent to the API when the page is refreshed or every time the component that uses that function is mounted. – Hamed Jimoh Mar 31 '22 at 10:09