![]() Inactive: This state is used to improve the speed/UX of our applications. Stale: Out of date data which we will need to re-fetch it from the backend. ![]() What are the stale and cache time in the terms of React-query? Maybe we can start with explaining the five query states that React-query has in its development cycle and also which we will encounter in React-Query Dev Tools.įresh: This state is when we have the almost same data on both sides (since when we received data, possible that someone is updated at the same time) and there is no need to refetch it.įetching: When we initially fetch the data successfully or not. With the refetchOnWindowFocus feature, it can refetch in the background when the user changes the browser tab or when they come back to the app.Īnd there are more of them that we will specify later.Optimizing the requests to the backend.Updating the stale data in the background since react-query prefetches.Configuring the stale, cache, retry delay time creating a quer圜lientConfig object.Some of the advantages that brings us React-Query are: According to react-query page comparison, react-query is the best option objectively. There are also other libraries like SWR, Apollo Client and RTK-Query for the server state management and we can see their comparison with React query in their webpage. It was created by open sourcerer Tanner Linsley in 2019, and now it is proven that it is very useful in server state management in React applications. React Query is a library that has 2 simple hooks which provide fetching, caching and updating asynchronous data in React applications. There, the React-query library helps us to solve these performance issues, manage the cache properly and give us useful features like query cancellation, stale time configuration, infinite query refetching etc. Sometimes we call the backend more than necessary, and this could cause performance problems in our applications. To manage the server state in the frontend and sync with the backend, we need to update, cache or re-fetch the data efficiently. ![]() In React, there are three types of state: the local state, which is persisted in the React components the global state, all components can access to it and the server state which is persisted in the server most of the time and depends on both sides. In this article we will focus on the React.js library applications and how we maintain the server state with the library called React-Query. Fetching data from the server and maintaining it is a very crucial issue in the frontend development.
0 Comments
Leave a Reply. |