-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: deprecate some APIs toward v5 #1403
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -172,8 +172,6 @@ const unsub1 = useDogStore.subscribe(console.log) | |
useDogStore.setState({ paw: false }) | ||
// Unsubscribe listeners | ||
unsub1() | ||
// Destroying the store (removing all listeners) | ||
useDogStore.destroy() | ||
|
||
// You can of course use the hook as you always would | ||
const Component = () => { | ||
|
@@ -222,19 +220,21 @@ const unsub5 = useDogStore.subscribe((state) => state.paw, console.log, { | |
Zustand core can be imported and used without the React dependency. The only difference is that the create function does not return a hook, but the API utilities. | ||
|
||
```jsx | ||
import create from 'zustand/vanilla' | ||
import createStore from 'zustand/vanilla' | ||
|
||
const store = create(() => ({ ... })) | ||
const { getState, setState, subscribe, destroy } = store | ||
const store = createStore(() => ({ ... })) | ||
const { getState, setState, subscribe } = store | ||
|
||
export default store | ||
``` | ||
|
||
You can even consume an existing vanilla store with React: | ||
You can use a vanilla store with `useStore` hook available since v4. | ||
|
||
```jsx | ||
import create from 'zustand' | ||
import { useStore } from 'zustand' | ||
import vanillaStore from './vanillaStore' | ||
|
||
const useBoundStore = create(vanillaStore) | ||
const useBoundStore = (selector) => useStore(vanillaStore, selector) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. it seems that this will require more TS boilerplate There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think it's just a little. Such usage is already documented somewhere. If people use this pattern a lot, we could provide a util for it. Thanks for your feedback! |
||
``` | ||
|
||
:warning: Note that middlewares that modify `set` or `get` are not applied to `getState` and `setState`. | ||
|
@@ -477,8 +477,6 @@ const Component = () => { | |
... | ||
``` | ||
|
||
[Alternatively, a special createContext is provided.](./docs/previous-versions/zustand-v3-create-context.md) | ||
|
||
## TypeScript Usage | ||
|
||
Basic typescript usage doesn't require anything special except for writing `create<State>()(...)` instead of `create(...)`... | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @dai-shi, why is this helper function being deprecated? My team currently relies on this to initialize stores based on data from props.
In preparation for this being deprecated and removed, I've published a package re-creating this helpful function.
Thanks for your help!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does this
createContext
function miss-use React APIs? Or is it a performance aspect? Or do you simply not want to manage this code anymore?Thank you.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In v3, we only have one
create
function that creates a React hook.Passing it via context (or props) can violate the rules of hooks. To avoid misusing it,
createContext
in v3.5 is carefully implemented so that it can't break the rules of hooks.In v4, we provide a new general hook
useStore
along withcreateStore
to create a vanilla store without React hooks.These APIs are more React-ish, and recommended to use over
zustand/context
workaround. There's no risks to violate the rules of hooks. As we don't want to teach two usages,zustand/context
is being deprecated and will be removed in v5.So, the short answer is it's no longer necessary.
You are absolutely fine to keep it as a third-party package. The helper function could be useful for a pattern.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
so are you saying the migration path would be to call
createStore
and put the result into your own context? Can you maybe show how a replacement of zustand/context would look like?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point. I answered it in one of discussions, but that should be in docs too.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would be interested too on how to replace/migrate.
My main usecase is that I need zustand state per instance rather than global.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
#1524