Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
use-dehydrated-state
Advanced tools
use-dehydrated-state
is a simple utility Hook for TanStack Query & Remix.
npm install use-dehydrated-state
# or
pnpm add use-dehydrated-state
# or
yarn add use-dehydrated-state
To support caching queries on the server and set up hydration:
QueryClient
instance inside of your app, and on an instance ref (or in React state). This ensures that data is not shared between different users and requests, while still only creating the QueryClient once per component lifecycle.<QueryClientProvider>
and pass it the client instance<Hydrate>
and pass it the dehydratedState
prop from useDehydratedState()
// root.tsx
import { Outlet } from "@remix-run/react";
import {
Hydrate,
QueryClient,
QueryClientProvider,
} from "@tanstack/react-query";
import { useDehydratedState } from "use-dehydrated-state";
export default function MyApp() {
const [queryClient] = React.useState(() => new QueryClient());
const dehydratedState = useDehydratedState();
return (
<QueryClientProvider client={queryClient}>
<Hydrate state={dehydratedState}>
<Outlet />
</Hydrate>
</QueryClientProvider>
);
}
Now you are ready to prefetch some data in your loader
.
QueryClient
instance for each page request. This ensures that data is not shared between users and requests.prefetchQuery
method and wait for it to completedehydrate
to dehydrate the query cache and pass it to the page via the dehydratedState
prop. This is the same prop that useDehydratedState()
will pick up to cache in your root.tsx
// pages/invoices.tsx
import { json } from "@remix-run/node";
import { dehydrate, QueryClient, useQuery } from "@tanstack/react-query";
export async function loader() {
const queryClient = new QueryClient();
await queryClient.prefetchQuery(["invoices"], getInvoices);
return json({ dehydratedState: dehydrate(queryClient) });
}
export default function Invoices() {
const { data } = useQuery({ queryKey: ["invoices"], queryFn: getInvoices });
// ...
}
FAQs
A simple utility Hook for TanStack Query & Remix.
The npm package use-dehydrated-state receives a total of 4,872 weekly downloads. As such, use-dehydrated-state popularity was classified as popular.
We found that use-dehydrated-state demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.