feat: `createDataStore()` hook by rtritto · Pull Request #217 · vikejs/vike-solid

rtritto · 2026-02-11T16:34:12Z

Rename useData to useStoreWithData.

Note: The return type of the hook was changed from Data to [Data, set<Data>].

Actually... I think we can go with:
* `createStore` for Solid

* `useState` for React

* `useState` for Vue
Because with TypeScript it becomes useState<Data>() which is very much explicit.

@rtritto I definitely agree with you that the more succinct the name of commonly used APIs the better (a lot easier to remember). Thank you for pushing on this! WDYT? Let's go with this?

This naming conflicts with what exists in the framework, eg:

import { createStore } from 'solid-js/store'
import { createStore } from 'vike-solid/useData'
// Same naming

This is bad (it's not nice) because the user is forced to use an alias for 1 of the 2 and a search can find both.

IMO, I would use:

createData for Solid → createData<DataType>
useData for React → useData<DataType>
useData for Vue → useData<DataType>

Data refers that the value arrives from +data vike's hook.

So DataType is shared with +data:

// /pages/+data.ts
export const data = () => {
  ...
  return {
    ...
  } satisfies DataType
}

brillout · 2026-02-14T13:02:51Z

This is bad (it's not nice) because the user is forced to use an alias for 1 of the 2 and a search can find both.

That's a good point... you're right.

IMO, I would use:

createData for Solid → createData<DataType>

useData for React → useData<DataType>

useData for Vue → useData<DataType>

I think, often (most of the time?), the data is static after it's fetched (no client state) — there isn't any need to create a state. For this simple use case, the current useData implementation is very effective: it's simply const data = useData<Data>() — you cannot beat that simplicity.

That's why I'm inclined to define two different hooks:

useData => data (static)
useStateWithData => data + state

One could argue that useStateWithData can supersede useData. In other words, useStateWithData becomes useData (your proposal). But the DX for the aforementioned simple use case (static data) becomes: const [data] = useData<Data>(). That's less natural, and harder to remember (paper cut). At that point we might as well go for the useStateWithData naming (I agree the longer name is a paper cut).

Basically, we have to choose between two different paper cuts.

WDYT?

rtritto · 2026-02-14T15:21:55Z

That's why I'm inclined to define two different hooks:
* `useData` => data (static)

* `useStateWithData` => data + state

This is a design choice; the concept of multiple hooks is similar to jotai:

useAtom → const [value, setValue] = useAtom(anAtom)
useAtomValue → const value = useAtomValue(anAtom)
useSetAtom → const setValue = useSetAtom(anAtom)

There's a discussion for Jotai v3 and React v19, maybe can help to choose.

From my point of view, instead of using useStateWithData, it's clearer to use useStateFromData where state is produced from data: data is initially created in +data hook and then the state is created using (from) data.

The result will be:

createStoreFromData for Solid
useStateFromData for React
useStateFromData for Vue

In the end the design choice is between:

One hook that returns: getter and setter

Pros: remember and use only 1 hook (only 1 code in the bundle)
Cons: if you need only getter, you have to destructure the hook with only the getter (less efficient)

Two hooks that returns: getter + getter and setter

Pros: you have the specific hook for usage (efficient where you don't have to destructure the hook if you only need the getter)
Cons: remember and use the related hook by use case (you can have 2 code in the bundle, more space)

Both has pros and cons.

brillout · 2026-02-14T15:42:15Z

From my point of view, instead of using useStateWithData, it's clearer to use useStateFromData where state is produced from data: data is initially created in +data hook and then the state is created using (from) data.

Makes sense!

The result will be:

createStoreFromData for Solid

useStateFromData for React

useStateFromData for Vue

Let me mull over it a bit 👀

brillout · 2026-02-15T09:23:41Z

How about useDataState for React/Vue, and createDataStore for Solid? WDYT?

rtritto · 2026-02-15T11:02:21Z

Yes, it's better (compact and readable), LGTM
I will update this PR

brillout · 2026-02-15T11:04:16Z

💯I’m glad we found a sustainable name. Great constructive discussion.

brillout · 2026-02-15T11:11:04Z

I wonder whether we can dedupe some code between createDataStore and useData 👀

brillout · 2026-02-15T11:11:36Z

I wonder whether we can dedupe some code between createDataStore and useData 👀

It isn't much code, so not sure whether that's worth it.

rtritto · 2026-02-15T11:28:02Z

Do you mean in the examples?

- import { createDataStore } from "vike-solid/createDataStore";
+ import { useData } from "vike-solid/useData";

- const [movie] = createDataStore<Data>();
+ const movie = useData<Data>();

brillout · 2026-02-15T11:30:30Z

I meant that the useData and createDataStore implementations are almost the same, so maybe it could be worth it to try to dedupe a bit 👀

rtritto · 2026-02-15T12:11:23Z

// useData.tsx
export { useData };

import { createDataStore } from "./createDataStore.jsx";

/** Access `pageContext.data` from any SolidJS component
 *
 * See
 * - https://vike.dev/data
 * - https://vike.dev/pageContext-anywhere
 */
function useData<Data>(): Data {
  const [data] = createDataStore<Data>();

  return data;
}

WDYT?

brillout · 2026-02-15T12:17:38Z

LGTM. Also I'd say let's move the comment that refers #114 to useData(), and let's maybe improve the comment (I actually don't know why we must create a store for useData but maybe that's because I ain't familiar with Solid).

rtritto · 2026-02-15T18:43:42Z

LGTM. Also I'd say let's move the comment that refers #114 to useData(), and let's maybe improve the comment (I actually don't know why we must create a store for useData but maybe that's because I ain't familiar with Solid).

The implementation is inside createDataStore, so the comments for the issue #114 should be placed here.
I did the commit.
WDYT?

brillout · 2026-02-15T19:00:16Z

0163ba5 — let me know if you disagree.

Let's create a PR for vike-{react,vue} then let's merge all 3 PRs together. (I'll take care of updating vike.dev/useData.)

rtritto · 2026-02-15T19:53:36Z

0163ba5 — let me know if you disagree.

I would only change like this:

- // We use a store to sync the store when the navigation (and thus `pageContext.data`) changes.
- // https://github.com/vikejs/vike-solid/issues/114
+ // https://github.com/vikejs/vike-solid/issues/114
+ // We use `createEffect` to sync the store when the navigation (and thus `pageContext.data`) changes.

brillout · 2026-02-15T19:55:04Z

👍 Feel free to push

rtritto · 2026-02-16T15:53:45Z

In Vue you should be able to set data directly by reference:

const data = useData()
// Update/set data
data.value.title = "New Title"
{{ data.title }}

So the useDataState isn't needed (correct me if I'm wrong, I never used Vue).

In the end, we have:

React: useData (get) + useDataState (get + set)
Solid: useData (get) + createDataStore (get + set)
Vue: useData (get + set)

Note: IMO, in Solid, the useData can be renamed to createData (isn't nice because the implementation use store but the naming doesn't contain Store) or (preferred) removed (the useData is only the gain less verbose code but the implementation/performance is slower than createDataStore) through deprecation.

@brillout WDYT?

brillout · 2026-02-16T17:37:05Z

In Vue you should be able to set data directly by reference: [...] So the useDataState isn't needed (correct me if I'm wrong, I never used Vue).

Good point and I think you're right. (Although I also ain't that familiar with Vue. We should test this.)

Note that vike-vue current uses shallowReactive:

https://github.com/vikejs/vike-vue/blob/9b730a40798c2a8ccfc4e6ebf43c168608c080ec/packages/vike-vue/src/hooks/useData.ts#L16-L18

https://github.com/vikejs/vike-vue/blob/9b730a40798c2a8ccfc4e6ebf43c168608c080ec/packages/vike-vue/src/integration/createVueApp.ts#L73

https://github.com/vikejs/vike-vue/blob/9b730a40798c2a8ccfc4e6ebf43c168608c080ec/packages/vike-vue/src/integration/createVueApp.ts#L70

But we do plan to use shallowRef() instead:

198-use-shallowref-instead-of-shallowreactive-for-pagecontext-and-data (#198) vike-vue#215

So I guess merging that PR will do the trick for Vue?

Note: IMO, in Solid, the useData can be renamed to createData (isn't nice because the implementation use store but the naming doesn't contain Store) or (preferred) removed (the useData is only the gain less verbose code but the implementation/performance is slower than createDataStore) through deprecation.

See https://chatgpt.com/share/69934df1-d3c0-800d-8c83-0d383b2489bc and its response to my question Yea, this is the Solid implement. My point is that it's just a thin wrapper around createStore — I like ChatGPT's point here: naming should reflect behavior, not implementation details.

Concretely: isn't createDataStore() a convoluted name for the simple use case I mentioned above?

Wouldn't the user think "such a complex API for such a simple need: I just want to access data, why do I need to create a store just to access my data"?

(the useData is only the gain less verbose code but the implementation/performance is slower than createDataStore)

I don't see why useData would be slower than createDataStore.

rtritto · 2026-02-20T14:39:10Z

In Vue you should be able to set data directly by reference: [...] So the useDataState isn't needed (correct me if I'm wrong, I never used Vue).

Good point and I think you're right. (Although I also ain't that familiar with Vue. We should test this.)

Note that vike-vue current uses shallowReactive:

https://github.com/vikejs/vike-vue/blob/9b730a40798c2a8ccfc4e6ebf43c168608c080ec/packages/vike-vue/src/hooks/useData.ts#L16-L18

https://github.com/vikejs/vike-vue/blob/9b730a40798c2a8ccfc4e6ebf43c168608c080ec/packages/vike-vue/src/integration/createVueApp.ts#L73

https://github.com/vikejs/vike-vue/blob/9b730a40798c2a8ccfc4e6ebf43c168608c080ec/packages/vike-vue/src/integration/createVueApp.ts#L70

But we do plan to use shallowRef() instead:
* [198-use-shallowref-instead-of-shallowreactive-for-pagecontext-and-data (#198) vike-vue#215](https://github.com/vikejs/vike-vue/pull/215)
So I guess merging that PR will do the trick for Vue?

#215 will change behaviour useData from shallowref to shallowreactive.
To have useDataState we needs to use shallowref.
In the current implementation, the user can use useData as shallowref (imply that #215 should be a breaking change).
IMO #215, as one change/feature, can include both, the new behaviour of useData (shallowref changes to shallowreactive) and the new hook useDataState.
WDYT?

Note: IMO, in Solid, the useData can be renamed to createData (isn't nice because the implementation use store but the naming doesn't contain Store) or (preferred) removed (the useData is only the gain less verbose code but the implementation/performance is slower than createDataStore) through deprecation.

The main concept is provided by these points:

React uses use* and Solid uses create*
with only get, we use *Data
with get and set, we use *Data<Implementation>

As result (all combinations) we have:

React useData (get) and `useDataState (get + set)
Solid createData (get) and createDataStore (get + set)

That's why the get of Solid should be createData (Solid create* reference) instead of useData (React use* reference). Actually for Solid, this PR doesn't rename useData to createData.

isn't nice because the implementation use store but the naming doesn't contain Store

I agree. I was referring to the subtlety of comparing React hooks (useData, useDataState) with the Solid one, where useData implies no internal State. Anyway, NVM.

Concretely: isn't createDataStore() a convoluted name for the simple use case I mentioned above?

On Solid side, just create the minimum required hook with create* that has get and set; then choose by DX to use the optional hook of get or only the required one. Some clean names are createData and createDataStore as mentioned above.

Wouldn't the user think "such a complex API for such a simple need: I just want to access data, why do I need to create a store just to access my data"?

The Store is needed due to Solid's static behavior that's can be changed with createEffect.

If we want to omit the implementation, we could choose (like Jotai's naming):

React: useDataValue (get) - useData (get and set)
Solid: createDataValue (get) - createData (get and set)
Vue: useDataValue (get) - useData (get and set)

(the useData is only the gain less verbose code but the implementation/performance is slower than createDataStore)

I don't see why useData would be slower than createDataStore.

It's referred to dedupe: reuse the code (better maintainability) vs rewrite the code (raw code for performance). The performance is negligible, there's no need to pay attention to it.

brillout · 2026-02-20T15:58:54Z

Vue

How about this?

useData => shallowRef() (will be done at 198-use-shallowref-instead-of-shallowreactive-for-pagecontext-and-data (#198) vike-vue#215)
useDataReactive => reactive() (deep)
useDataShallowReactive => shallowReactive()

See also: https://vuejs.org/guide/essentials/reactivity-fundamentals

Solid

Solid actually has useContext, so I think useData fits that naming.

I think createData is a weird name: conceptually, no data is being created. I'd argue that naming it createData is a leaky implementation detail (see the conversation I had with ChatGPT I shared earlier). The fact that we need a store is a Vike concern (the data store changes upon Vike navigation), rather than a user concern (the data store change isn't triggered by the user).

I don't think the users needs to know that useData() requires a store. (And I guess Solid users wouldn't necessarily expect it either, unless they actively think about it.)

On Solid side, just create the minimum required hook with create* that has get and set; then choose by DX to use the optional hook of get or only the required one.

I don't understand this sentence.

Sum up

React: useDataValue (get) - useData (get and set)

Solid: createDataValue (get) - createData (get and set)

Vue: useDataValue (get) - useData (get and set)

I don't see why you think this would be better. I think useData + useDataState is a lot more descriptive.

So, on my side, I'm voting for:

React: useData (get), useDataState (get and set)
Solid: useData (get), createDataStore (get and set)
Vue: useData (get), useDataReactive + useDataShallowReactive (get and set)

I like it. But I'm open to alternatives.

rtritto · 2026-02-22T13:14:48Z

Vue

How about this?

* `useData` => `shallowRef()` (will be done at [198-use-shallowref-instead-of-shallowreactive-for-pagecontext-and-data (#198) vike-vue#215](https://github.com/vikejs/vike-vue/pull/215))

* `useDataReactive` => `reactive()` (deep)

* `useDataShallowReactive` => `shallowReactive()`

See also: https://vuejs.org/guide/essentials/reactivity-fundamentals

What about:

useData → shallowRef() (will be done at 198-use-shallowref-instead-of-shallowreactive-for-pagecontext-and-data (#198) vike-vue#215)
E.g.:

import { shallowRef } from 'vue'

export function usePageDisplay() {
  const data = shallowRef({ show: { banner: false, alert: true } })

  function changePage(newData) {
    data.value = newData 
  }

  return { data, changePage }
}

useDataRef → ref
E.g.:

import { ref } from 'vue'

export function usePageInteraction() {
  const data = ref({ show: { banner: false, alert: true } })

  function changePage(newData) {
    data.value = newData
  }

  function toggleBanner() {
    // Note: the component with 'alert' will not be updated
    data.value.show.banner = !data.value.show.banner
  }

  return { data, changePage, toggleBanner }
}

Maybe I'm wrong, WDYT?

Solid

Solid actually has useContext, so I think useData fits that naming.

Ok, so in Solid we will use useData (get) instead of createData (get).

I don't see why you think this would be better. I think useData + useDataState is a lot more descriptive.

Because it's simple: the *Data (get and set as default) with related implementation (it's not important, you need only to think about get and set); then, if you want only value, use the *DataValue.

brillout · 2026-02-24T15:37:51Z

useDataRef

AFAICT it wouldn't add any added value compared to useDataReactive: it seems like ref() is the same as reactive() but with support for non-object values — pageContext.data is always expected to be an object though.

Because it's simple: the *Data (get and set as default) with related implementation (it's not important, you need only to think about get and set); then, if you want only value, use the *DataValue.

I'm inclined to think that:

Simple use case (only get) => simple name => useData
Advanced use case (get + set) => more verbose name => useDataState

If 80% (just a guess, I could be wrong) of the use cases are simple (only get), then that's also an argument to go for the the simplest name possible for the most common use case.

I think read-only +data (only get) is (a lot?) more frequent than read&write +data (get + set).

refactor!: rename useData to useStoreWithData

2f829a4

rtritto changed the title ~~refactor!: rename useData to useStoreWithData~~ feat: add useStoreWithData Feb 11, 2026

rtritto force-pushed the useData-to-useStoreWithData branch from c12a349 to ce96c27 Compare February 11, 2026 20:13

feat: restore useData

1375088

rtritto force-pushed the useData-to-useStoreWithData branch from ce96c27 to 1375088 Compare February 11, 2026 20:14

rtritto force-pushed the useData-to-useStoreWithData branch from ed26d30 to 6358ee2 Compare February 15, 2026 11:07

refactor: rename useStoreWithData to createDataStore

46b892f

rtritto force-pushed the useData-to-useStoreWithData branch from 6358ee2 to 46b892f Compare February 15, 2026 11:09

rtritto changed the title ~~feat: add useStoreWithData~~ feat: add createDataStore Feb 15, 2026

refactor: dedupe useData

bac2234

brillout added 2 commits February 15, 2026 19:53

test both hooks

6ebbe52

polish

0163ba5

rtritto and others added 2 commits February 15, 2026 20:56

polish

84be478

polish

fbffe83

brillout changed the title ~~feat: add createDataStore~~ feat: createDataStore() hook Feb 16, 2026

brillout mentioned this pull request Feb 16, 2026

feat: useDataState() hook vikejs/vike-react#214

Open

polish

b4f8fa7

Uh oh!

Conversation

rtritto commented Feb 11, 2026 • edited by brillout Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related

Uh oh!

brillout commented Feb 11, 2026

Uh oh!

rtritto commented Feb 11, 2026

Uh oh!

brillout commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brillout commented Feb 11, 2026

Uh oh!

rtritto commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brillout commented Feb 11, 2026

Uh oh!

rtritto commented Feb 11, 2026

Uh oh!

brillout commented Feb 11, 2026

Uh oh!

brillout commented Feb 12, 2026

Uh oh!

brillout commented Feb 12, 2026

Uh oh!

brillout commented Feb 13, 2026

Uh oh!

rtritto commented Feb 14, 2026

Uh oh!

brillout commented Feb 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rtritto commented Feb 14, 2026

Uh oh!

brillout commented Feb 14, 2026

Uh oh!

brillout commented Feb 15, 2026

Uh oh!

rtritto commented Feb 15, 2026

Uh oh!

brillout commented Feb 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brillout commented Feb 15, 2026

Uh oh!

brillout commented Feb 15, 2026

Uh oh!

rtritto commented Feb 15, 2026

Uh oh!

brillout commented Feb 15, 2026

Uh oh!

rtritto commented Feb 15, 2026

Uh oh!

brillout commented Feb 15, 2026

Uh oh!

rtritto commented Feb 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brillout commented Feb 15, 2026

Uh oh!

rtritto commented Feb 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brillout commented Feb 15, 2026

Uh oh!

rtritto commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brillout commented Feb 16, 2026

Uh oh!

rtritto commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brillout commented Feb 20, 2026

Vue

Solid

Sum up

rtritto commented Feb 11, 2026 •

edited by brillout

Loading

brillout commented Feb 11, 2026 •

edited

Loading

rtritto commented Feb 11, 2026 •

edited

Loading

brillout commented Feb 14, 2026 •

edited

Loading

brillout commented Feb 15, 2026 •

edited

Loading

rtritto commented Feb 15, 2026 •

edited

Loading

rtritto commented Feb 15, 2026 •

edited

Loading

rtritto commented Feb 16, 2026 •

edited

Loading

rtritto commented Feb 20, 2026 •

edited

Loading

rtritto commented Feb 22, 2026 •

edited

Loading