jotaijs / jotaijs/solid-jotai

[Help] re-render Provider

Open
#11 5 comments 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.