Hi is there any public project/example using react-query exclusively as a local state manager for a react app?
I can only find projects where it's used to fecth data from an API.
It looks like React query works only with outside data of your app:
React Query is a type of state manager, specifically designed to
manage asynchronous state that you get from outside of your app, so
server-state, API state, or anything else that is not local client
state. With that said, it's easy and even encouraged to keep use React
Query along side a global state manager for your client state.
Its very common for existing applications that after moving their
server state to React Query, their client state is extremely small and
doesn't even need an external library like Redux. However, some
applications actually do have a lot of local client state to manage
and something like Redux is warranted.
I will link to a talk about this very subject very soon. But you can
feel good pressing forward using both React Query for anything that is
asynchronous data and Redux for anything that is local and
synchronous.
I have a react app and I would like to implement something like a debugging component that can change data/toggles on the app that is accessible on each page, floating rather than integral to the page.
I made a POC that was integrated into one page, but I'm wanting to make it more mobile and agnostic.
How would one go about this?
I'm running a local express dev server to push mock data and initially I was specifying the mock data pushing that info with a login form push, but since refactoring I am struggling to think of how to persist the data, especially if I refresh the page?
You must save your data in localStorage,everytime your component start you load your data, if you havent your data load from server.
Finally you can use useContext to access data through all application.
localStorage will work as cache data: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
useContext to accessData: https://reactjs.org/docs/context.html
currently I am using redux in different projects for state management. A few days back, I listened about react-query which is also used for state management and provides caching and async fetching. I am trying to figure out the main difference between these two libraries.
Where I should use react-query and in which cases I need redux.
React-query is what you would call a specialized library. It holds an api cache for you - nothing else. And since it is specialized, it does that job quite well and requires less code.
Redux on the other hand gives you tools to just about store anything - but you have to write the logic. So you can do a lot more in Redux, but you'll have to potentialy write code that would not be necessary with a specialized library.
You can use them both side-by-side: api cache in react query, rest of your global state in Redux.
That said, the official Redux Toolkit also ships with an api cache abstraction RTK Query since version 1.6 with a similar feature set as React Query, but some different concepts overall - you might also want to check that out.
react-query is designed to deal with data that is stored on a remote server. To access this data, your app needs to use asynchronous requests. This is where you probably want to deal with caching, loading state, network failures, etc.
That is where react-query shines.
Redux on the other ends deals with data on the client-side. For example the content of a text input or the state of a modal. You don't need to deal with network-related issues. But you do need to deal with complex sequences of causes and effects.
That is where redux shines
Redux and react-query are 2 very different things: react-query is used for data synchronization, Redux is a global state manager. react-query is used to keep synch all your apps to the same db, Redux is used to share a part of the app state to all the components that need to read that state.
An example: I have an app to chat with other users. With react-query I keep all the apps synch with all the messages users received, then I store the messages in Redux in order to have messages on chat page and on history chat page.
React Query manages Server State. Its main function is to handle functions between Server and client.
Redux handles client-state. Redux can be used to store asynchronously Data.
So, they have their unique role at different levels and both can be used side by side.
React-Query = server state library(save/cache api response)
Redux = client state library(globally accessible client state
should be stored).
We should distinguish between two kind of states, client state & server (or remote) state:
client state contains:
locally created data that has not yet been persisted to the server.
UI state that handles active routes, selected tabs, spinners, pagination controls, and so on.
server state is everything related to:
data persisted remotely that requires asynchronous APIs for fetching and updating
When it comes to client state, Redux is a grate management tool for managing application’s state.
On the other side, to manage server state, we can use regular state management tools but they are not so great at working with async or server state. So, to resolve this, we use React Query. As described on their documentation, React query is a great tool for:
Caching... (possibly the hardest thing to do in programming)
Deduping multiple requests for the same data into a single request
Updating "out of date" data in the background
Knowing when data is "out of date"
Reflecting updates to data as quickly as possible
Performance optimizations like pagination and lazy loading data
Managing memory and garbage collection of server state
Memoizing query results with structural sharing
You can simply to think:
React Query = axios + cache logic
Redux can store synchronized data and asynchronized data
By the way, I use context manage synchronized state, React Query manage asynchronized state now.
on project we have need use architecture, where getting data from API display on screens and storage in locale state. How this architecture implementing on React Native with using state managment libraries.
P.S. For data, with getting from API, we cannot be used global state.
You could try using React-Query for fetching data and React.Context for storing and providing data to children.
For a persistent storage you can use AsyncStorage
I want to store my rendered component (in ReactJs) into browser history of clients, but I don't want to use Redux for it, because it is so complicated for me.
Is any way for using local storage or cookies as alternative solution for Redux and React Routing?
Edit:
I need to using react route with cache rendered data, It means after route change and got back to previous page again, rendered data still remains there and no need to send request to server again! Like this Redux example, But need to do it without Redux.
Thanks.
Redux is a state management, not related to cache or local storage. If you want to cache your components then you should look at this https://developer.mozilla.org/en-US/Apps/Fundamentals/Offline
You need to create manifest which will store your components in the cache.