This library so as to manage global state for React Query.
npm install use-query-state-react-queryUsing npm:
```
npm i use-query-state-react-query
Using yarn:
``
yarn add use-query-state-react-query
App.tsx
`tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import Counter from './components/Counter';
import CounterHoge from './components/CounterHoge';
const queryClient = new QueryClient();
function App() {
return (
);
}
export default App;
`
Counter.tsx
`tsx
import React from 'react';
import { useQueryState } from 'use-query-state-react-query';
const Counter: React.FC = () => {
const [count, setCount] = useQueryState(['COUNTER'], 1);
const countUp = () => {
setCount((prev) => prev + 1);
};
// Another case.
// const countUp = () => {
// setCount(count + 1);
// };
return (
{count}
export default Counter;
`
CounterHoge.tsx
`tsx
import React from 'react';
import { useQueryState } from 'use-query-state-react-query';
const CounterHoge: React.FC = () => { {count}
const [count] = useQueryState
return (
CounterHoge Component
);
};
export default CounterHoge;
``