From 3e6e1098f8ecd763a55ad57026e99c4833b4dd35 Mon Sep 17 00:00:00 2001 From: rtritto Date: Mon, 16 Feb 2026 13:14:22 +0100 Subject: [PATCH 1/4] feat: add useDataState --- examples/full/pages/star-wars/@id/+Page.tsx | 4 ++-- packages/vike-react/package.json | 4 ++++ packages/vike-react/src/hooks/useData.tsx | 7 +++++++ packages/vike-react/src/hooks/useDataState.tsx | 17 +++++++++++++++++ 4 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 packages/vike-react/src/hooks/useDataState.tsx diff --git a/examples/full/pages/star-wars/@id/+Page.tsx b/examples/full/pages/star-wars/@id/+Page.tsx index ee8a7cca4..c49c3d289 100644 --- a/examples/full/pages/star-wars/@id/+Page.tsx +++ b/examples/full/pages/star-wars/@id/+Page.tsx @@ -2,10 +2,10 @@ export default Page import React from 'react' import type { Data } from './+data' -import { useData } from 'vike-react/useData' +import { useDataState } from 'vike-react/useDataState' function Page() { - const movie = useData() + const [movie] = useDataState() return ( <>

{movie.title}

diff --git a/packages/vike-react/package.json b/packages/vike-react/package.json index fc4fcc30d..4a8f3d28b 100644 --- a/packages/vike-react/package.json +++ b/packages/vike-react/package.json @@ -6,6 +6,7 @@ "exports": { "./usePageContext": "./dist/hooks/usePageContext.js", "./useData": "./dist/hooks/useData.js", + "./useDataState": "./dist/hooks/useDataState.js", "./useHydrated": "./dist/hooks/useHydrated.js", "./useConfig": { "worker": "./dist/hooks/useConfig/useConfig-server.js", @@ -63,6 +64,9 @@ "useData": [ "./dist/hooks/useData.d.ts" ], + "useDataState": [ + "./dist/hooks/useDataState.d.ts" + ], "usePageContext": [ "./dist/hooks/usePageContext.d.ts" ], diff --git a/packages/vike-react/src/hooks/useData.tsx b/packages/vike-react/src/hooks/useData.tsx index 6ebdce391..1253e19b7 100644 --- a/packages/vike-react/src/hooks/useData.tsx +++ b/packages/vike-react/src/hooks/useData.tsx @@ -2,6 +2,13 @@ export { useData } import { usePageContext } from './usePageContext.js' +/** + * Access `pageContext.data` from any React component, and create a store with `pageContext.data` as initial data. + * + * See + * - https://vike.dev/data + * - https://vike.dev/pageContext-anywhere + */ function useData(): Data { const data = usePageContext()?.data return data as any diff --git a/packages/vike-react/src/hooks/useDataState.tsx b/packages/vike-react/src/hooks/useDataState.tsx new file mode 100644 index 000000000..b0050723e --- /dev/null +++ b/packages/vike-react/src/hooks/useDataState.tsx @@ -0,0 +1,17 @@ +export { useDataState } + +import { type Dispatch, type SetStateAction, useState } from 'react' +import { usePageContext } from './usePageContext.js' + +/** + * Access `pageContext.data` from any React component, and create a store with `pageContext.data` as initial data. + * + * See + * - https://vike.dev/data + * - https://vike.dev/pageContext-anywhere + */ +function useDataState(): [Data, Dispatch>] { + const pageContext = usePageContext() as any; + const [data, setData] = useState(pageContext?.data); + return [data, setData]; +} From e5d9e4c99c17d1bd3053707f25ff9ac8c70ed273 Mon Sep 17 00:00:00 2001 From: rtritto Date: Mon, 16 Feb 2026 13:17:00 +0100 Subject: [PATCH 2/4] polish --- packages/vike-react/src/hooks/useData.tsx | 2 +- packages/vike-react/src/hooks/useDataState.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vike-react/src/hooks/useData.tsx b/packages/vike-react/src/hooks/useData.tsx index 1253e19b7..b46601905 100644 --- a/packages/vike-react/src/hooks/useData.tsx +++ b/packages/vike-react/src/hooks/useData.tsx @@ -3,7 +3,7 @@ export { useData } import { usePageContext } from './usePageContext.js' /** - * Access `pageContext.data` from any React component, and create a store with `pageContext.data` as initial data. + * Access `pageContext.data` from any React component. * * See * - https://vike.dev/data diff --git a/packages/vike-react/src/hooks/useDataState.tsx b/packages/vike-react/src/hooks/useDataState.tsx index b0050723e..25d590cab 100644 --- a/packages/vike-react/src/hooks/useDataState.tsx +++ b/packages/vike-react/src/hooks/useDataState.tsx @@ -4,7 +4,7 @@ import { type Dispatch, type SetStateAction, useState } from 'react' import { usePageContext } from './usePageContext.js' /** - * Access `pageContext.data` from any React component, and create a store with `pageContext.data` as initial data. + * Access `pageContext.data` from any React component, and create a state with `pageContext.data` as initial data. * * See * - https://vike.dev/data From 0398166b9f8e753409a435126e8c167998662a0c Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 16 Feb 2026 13:20:26 +0100 Subject: [PATCH 3/4] polish --- packages/vike-react/src/hooks/useData.tsx | 4 +--- packages/vike-react/src/hooks/useDataState.tsx | 6 ++---- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/vike-react/src/hooks/useData.tsx b/packages/vike-react/src/hooks/useData.tsx index b46601905..ea62cd41b 100644 --- a/packages/vike-react/src/hooks/useData.tsx +++ b/packages/vike-react/src/hooks/useData.tsx @@ -5,9 +5,7 @@ import { usePageContext } from './usePageContext.js' /** * Access `pageContext.data` from any React component. * - * See - * - https://vike.dev/data - * - https://vike.dev/pageContext-anywhere + * https://vike.dev/useData */ function useData(): Data { const data = usePageContext()?.data diff --git a/packages/vike-react/src/hooks/useDataState.tsx b/packages/vike-react/src/hooks/useDataState.tsx index 25d590cab..43a6b08a6 100644 --- a/packages/vike-react/src/hooks/useDataState.tsx +++ b/packages/vike-react/src/hooks/useDataState.tsx @@ -4,11 +4,9 @@ import { type Dispatch, type SetStateAction, useState } from 'react' import { usePageContext } from './usePageContext.js' /** - * Access `pageContext.data` from any React component, and create a state with `pageContext.data` as initial data. + * Access `pageContext.data` from any React component, and create a state with `pageContext.data` as initial state. * - * See - * - https://vike.dev/data - * - https://vike.dev/pageContext-anywhere + * https://vike.dev/useData */ function useDataState(): [Data, Dispatch>] { const pageContext = usePageContext() as any; From 3cdc7073b64bfd3fd6c1c62ea538bda8e050685f Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 16 Feb 2026 13:25:57 +0100 Subject: [PATCH 4/4] polish --- packages/vike-react/src/hooks/useDataState.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vike-react/src/hooks/useDataState.tsx b/packages/vike-react/src/hooks/useDataState.tsx index 43a6b08a6..d9a20506e 100644 --- a/packages/vike-react/src/hooks/useDataState.tsx +++ b/packages/vike-react/src/hooks/useDataState.tsx @@ -4,7 +4,7 @@ import { type Dispatch, type SetStateAction, useState } from 'react' import { usePageContext } from './usePageContext.js' /** - * Access `pageContext.data` from any React component, and create a state with `pageContext.data` as initial state. + * Access `pageContext.data` from any React component, and create a state with `pageContext.data` as initial value. * * https://vike.dev/useData */