[Help] re-render Provider
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 5
- PR merge metrics
- No merged PRs in 30d
Description
From https://github.com/pmndrs/jotai/discussions/669:
> Provider example
> ---
> You can navigate to the `/provider` path and find the same app, but using the `Provider` to set the initial values for the atoms. Something to note: `key` is used on the `Provider` to force a re-render when the postId changes. This results in the correct functionality when a user navigates from page to page.
In React, on the page change (from page to page) with SSR, we can use `key` in the `Provider` component to invalidate and re-render it:
```tsx
```
In Solid, we can re-render with _Signals_, so we should write:
```tsx
const data = useData()
{mySignal() && (
)}
```
How can we re-render the Provider instead with a **Store** (`data` from `useData` hook)?
### Reproduction
Branch: [template-vike-solid-daisyui-hono#rerender-provider](https://github.com/templates-ecosystem/template-vike-solid-daisyui-hono/tree/rerender-provider)
Steps:
- clone the repo [template-vike-solid-daisyui-hono](https://github.com/templates-ecosystem/template-vike-solid-daisyui-hono) and go to the branch [rerender-provider](https://github.com/templates-ecosystem/template-vike-solid-daisyui-hono/tree/rerender-provider)
- `yarn`
- `yarn dev`
- go to `http://localhost:3000/Next` Page where content is `Current Page: "Next"` and `Go to "Prev" Page`
- click on `Go to "Prev" Page` Link to navigate to the `http://localhost:3000/Prev` Page
- the page content is `Current Page: "Next"` and `Go to "Prev" Page` (nothing was changed in the page)
The expected result is the page content with `Current Page: "Prev"` and `Go to "Next" Page`.
### Informations
- Implementation of `useData` hook (vike-solid side [vike-solid/hooks/useData.tsx](https://github.com/vikejs/vike-solid/blob/f74b2dccfca4829597df600361433b01de271c2f/packages/vike-solid/hooks/useData.tsx#L14-L25)):
```tsx
function useData(): Data {
const pageContext = usePageContext() as any
const [data, setData] = createStore(pageContext?.data)
createEffect(() => {
setData(pageContext?.data)
})
return data
}
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.