## Zustand v4 support [#zustand-v4]

With the release of Liveblocks 0.19, we’re adding support for
[Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction) v4 to
[@liveblocks/zustand](/docs/api-reference/liveblocks-zustand). Zustand v4 brings
greatly improved TypeScript types to its APIs, enabling us to enhance the
quality of our types, bringing it in line with our React package.

<Figure>
  <Image
    src="/images/blog/zustand-banner.jpg"
    alt="React Native To-do List"
    width={1200}
    height={600}
    quality={90}
  />
</Figure>

To try the new version, upgrade both Zustand to v4 and Liveblocks to v0.19 as
part of the same change.

```bash
npm install zustand@latest
npm install @liveblocks/zustand@latest
```

After installing you can then change these imports:

```ts
// ❌ Before
import { middleware } from "@liveblocks/zustand";

// ✅ After
import { liveblocks } from "@liveblocks/zustand";
import type { WithLiveblocks } from "@liveblocks/zustand";
```

And finally, update your `create` function to the new pattern (explanation
below):

```ts
// ❌ Before
create(middleware<MyState, ...>(...));

// ✅ After
create<WithLiveblocks<MyState, ...>>()(liveblocks(...));
```

In this code snippet, we’re making four changes, as required by Zustand v4, or
in accordance with ecosystem conventions:

1. Renaming `middleware` to `liveblocks`.
1. Moving the typing from `middleware` to `create`.
1. Wrapping the `MyState` type in a `WithLiveblocks<...>` wrapper.
1. Adding an extra call `()` to the wrapper:

```ts
create<WithLiveblocks<MyState, ...>>()(liveblocks(...));
//                                  ^^ Not a typo!
```

After upgrading, you can now remove any manual type annotations that may have
been sprinkled around your codebase. All types will now automatically be
inferred!

### Zustand v3

Because of the nature of the change, we’ll be dropping support for Zustand v3,
but it’ll still be supported in previous versions of Liveblocks:

- If you use Zustand **v3.x**, use Liveblocks **0.18.x**.
- If you use Zustand **v4.1.3**+, use Liveblocks **0.19.x**+.
- (Zustand versions **4.0.0**–**4.1.2** are not supported.)

## Contributors

Huge thanks to everyone who contributed and specifically to
[Guillaume Salles](https://twitter.com/guillaume_slls) for his help towards the
end allowing us to ship this faster. Also a big shout out to our incredible
community that keeps jumping in to help us improve our Zustand integration!
Especially [Rayo Verweij](https://twitter.com/rayoverweij), for
[fixing](https://github.com/liveblocks/liveblocks/pull/555) a few minor issues
in our whiteboard React + Zustand tutorial. Keep checking out the
[changelog](https://github.com/liveblocks/liveblocks/blob/main/CHANGELOG.md#v0180)
for the full release notes – see you next time!