feat: useDataState() hook

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<Data>()
+  const [movie] = useDataState<Data>()
   return (
     <>
       <h1>{movie.title}</h1>

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"
       ],

packages/vike-react/src/hooks/useData.tsx

@@ -2,6 +2,11 @@ export { useData }
 
 import { usePageContext } from './usePageContext.js'
 
+/**
+ * Access `pageContext.data` from any React component.
+ *
+ * https://vike.dev/useData
+ */
 function useData<Data>(): Data {
   const data = usePageContext()?.data
   return data as any

packages/vike-react/src/hooks/useDataState.tsx

@@ -0,0 +1,15 @@
+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 state with `pageContext.data` as initial value.
+ *
+ * https://vike.dev/useData
+ */
+function useDataState<Data>(): [Data, Dispatch<SetStateAction<Data>>] {
+  const pageContext = usePageContext() as any;
+  const [data, setData] = useState(pageContext?.data);
+  return [data, setData];
+}