Daishi Kato
@dai_shi
Followers
16,404
Following
88
Media
1,282
Statuses
8,194
React library author, maintaining three state management libraries, Zustand, Jotai, Valtio, and React Server Components framework, Waku.
Joined November 2008
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
The U
• 631794 Tweets
#TGS2024
• 181335 Tweets
Miami
• 97891 Tweets
Washington
• 87428 Tweets
Knicks
• 79998 Tweets
Towns
• 71153 Tweets
Minnesota
• 68952 Tweets
León
• 64720 Tweets
Randle
• 60155 Tweets
Donte
• 38449 Tweets
Wolves
• 37973 Tweets
भगत सिंह
• 36891 Tweets
The ACC
• 29197 Tweets
#DAY6INBKK2024
• 28648 Tweets
Asharamji Bapu Case
• 26409 Tweets
Equality Exploited
• 24217 Tweets
Hart
• 22829 Tweets
日本破壊クソメガネ
• 19629 Tweets
Virginia Tech
• 18445 Tweets
Cam Ward
• 18291 Tweets
Canes
• 14294 Tweets
Rutgers
• 12511 Tweets
Celtics
• 11867 Tweets
Pinned Tweet
How I Got Involved in OSS
My Journey to Developing React libraries
1
1
40
Want to read the entire code of Zustand v5-alpha? Here you go!
Zustand v4.5.0 is released! Docs for the new feature are work in progress. I also published the first alpha version for v5. Please try it and report what you find. v5 doesn't add any new features, just drops some, and becomes much smaller.
6
28
368
17
79
972
Today is the day when my first book is published: Micro State Management with React Hooks: Explore custom hooks libraries like Zustand, Jotai, and Valtio to manage global states
So happy to finally have it done!
21
69
484
Here's the Zustand code in JS in a tweet.
I think I did this before, but this is slightly a new version.
Not in 140 chars, but in an image. 😅
Source:
9
46
415
Announcing
@excalidraw
-animate! You can animate your drawing and export it to a movie file!
Repo 👉
Example 👉
Current status: Experimental, basic feature complete.
7
69
399
Zustand v5-beta is just 600 bytes. Try the beta and report back to us.
11
12
388
Zustand v4.5.0 is released! Docs for the new feature are work in progress. I also published the first alpha version for v5. Please try it and report what you find. v5 doesn't add any new features, just drops some, and becomes much smaller.
6
28
368
With upcoming Jotai v2, you can read/update atom values outside React. Check out this counter example. This is called v2 API and already pre-released in jotai v1.11.0.
CodeSandbox:
8
28
344
For about a month, my
@excalidraw
development was mainly refactoring and fixing subtle (but not trivial!) bugs, but today I made a progress. 🎉
Now, you can resize multiple elements with curved lines. Try the behavior with the preview URL in the PR.
9
26
326
⛩ New Blog Post: Introducing Waku, the minimal React Framework that enhances React Server Component (RSC) usage. Perfect for RSC enthusiasts or those curious about Waku.
For detailed info and examples, check out our GitHub repo. Learn more here 👉 🤩
13
51
323
🎉Happy to announce Zustand v4!
Thanks so much for those contributing to code and docs, and reporting issues and questions.
v4 is not breaking for JS users. For TS users, basically migrate to `create<MyState>()(...)` syntax. Please carefully read docs.
2
36
303
Just released react-hooks-worker v1.0.3!
It's a tiny library to help using Web Workers with React Hooks.
4
44
292
Introducing Waku “pages router”! 🎉
We’re excited to bring a minimal file-based router API to the modern React era. Waku is now the fastest way to start building with server components.
Learn more 👉 ⛩️
8
30
281
use-signals: A React hook for TC39 signals
⚠️DO NOT USE IT IN PRODUCTION⚠️
14
27
269
When teaching how to use `useEffect` in
@ReactJS
, I say we should assume an effect function will be executed after 10 seconds. If that causes a serious problem, the usage is probably wrong.
We might be able to make it a DEV-only util. (Timing with multiple ones is not supported.
9
30
255
Once again, presenting the full JS code of Zustand v5-alpha.5. Read it, learn it, and try it out!
8
21
257
This is a huge milestone for me.
jotai hit 5000 stars. 5⃣0⃣0⃣0⃣⭐️
👻
13
10
253
Wow, React Server Components are really the future. This is how I put RSCs inside client components.
9
17
239
Guess what Valtio can easily do, but Zustand can't. Valtio can subscribe to deep nested objects. This demo shows infinite tree structure with optimized renders. The code is surprisingly small.
We've explained the difference is basically coding style, but this is capability diff.
8
19
236
Jotai v1.8.0 introduces `abortableAtom` util. This is how it works 👇
8
29
231
Everyone seems excited about React without memo presented at React Conf 2021?
Here's jotai approach to eliminating memo.
8
24
232
Look at this Ping-pong game. This is a r3f example, whose game state is converted from zustand to valtio.
Valtio is a proxy-based state manager that works pretty much like normal JavaScript objects.
Check it out:
Demo:
6
30
223
Just published a course about jotai/xstate!
Jotai is an atomic state manager to avoid extra re-renders in React.
XState is a framework-agnostic method to define state machines/statecharts.
Their goals are orthogonal. Wouldn't it be neat to combine them?
3
27
221
I just updated excalidraw-animate!
If you are an
@Excalidraw
user who has never tried this tool, please give it a try, it must be fun at least.
An example 👇
6
26
217
Zustand users often face challenges with the slice pattern. Introducing zustand-slices! This is just a start. I'm eager to hear your feedback and would welcome any contributions. Let's make it better together!
Repo 👉
Demo 👉
8
20
216
🎉Announcing a new project: Katachidraw
Highly inspired by
@Excalidraw
, but not to conflict, this is an SVG-based drawing tool. No HTML/CSS.
Tool:
GitHub:
Built with 👻
Embeddable in React Native (& Web)
6
29
207
Once again.
Coding with Zustand feels solid.
Coding with Jotai feels fun.
Coding with Valtio feels free from React.
12
6
210
Did you know? useReducer and useState behave differently in React 18. So, preferring useState that can optimize more makes sense when useReducer isn't necessary. useState works for most cases even with _reducer_ 😉.
6
33
199
🎉 "waku-waku" excited to announce Waku v0.10.0! 🎉
It's a React framework with Vite for React Server Components. We are trying to develop a production-level framework and your feedback would be very important.
7
31
204
Jotai atoms are primarily for bottom-up approach, but it can do top-down approach like zustand. So, I created a ToDo app with a single store with jotai. As a bonus, it uses atomWithHash, so the state is persisted in the URL.
Demo👉
3
15
193
Just published Why You Don't Need Signals in React. Because we have Jotai.
11
43
194
Monetizing OSS is difficult by nature, but I hope people will pay if they find a value. It's more meaningful to pay for a content, instead of tipping for OSS. So, I decided to challenge. This is my first paid content to teach the library code, Zustand.
7
28
193
While nobody requested 😆, here's a longer version of the simplified jotai core. This version supports derived atoms. Hope someone enjoys it!
11
26
180
Yay! This is my 3rd tool with
@Excalidraw
, called Excalidraw-Claymate. Unlike -Animate, this is to create anime GIF from snapshots. Look forward to someone create something with it.
Repo 👉
Tool 👉
Experimental but please try it
7
26
175
Hello zustand users! Finally v4 is released. It's RC, but nothing is left. We just need feedbacks.
This is basically backward compatible in JS. Some deprecated features are dropped thus the major version. TS types are rewritten and have breaking changes.
3
25
174
🎉 Jotai and XState integration is here 🎉
The first iteration in jotai v0.14.4 comes with `atomWithMachine`, which is like useMachine. Can use it as a normal atom. Tell me what you build with it.
GitHub:
Demo: by
@DavidKPiano
👻
2
30
173
This sounds huge to me. There has been a big misconception in the community (including myself in the past). We've been using ref weirdly only to avoid false positives.
In the same category, there are useLayoutEffect warning and array index key fallback...
7
38
165
Zustand is such a small library that I don't have much to teach. Maybe I can just randomly talk about Zustand v4. Here's a new video product. Hope someone finds it interesting.
👉 🐻
7
16
163
I just converted the famous space game demo with react-three-fiber + zustand to work with valtio instead.
demo 👉
valtio 👉 💊
4
13
166
My recent effort to add rotation support in
@excalidraw
is almost finished. Please try the preview app and report bugs!
👉
9
13
160
Often, I hear people like Zustand for less boilerplatey code. Zustand is also less code in its implementation. For me as a library author, it's almost _nothing_. It's interesting and counter-intuitive that less code achieves less boilerplates.
FYI: 🐻
3
14
156
Have you tried
@Excalidraw
-Animate yet? It produces a _portable_ SVG with animation, which you can embed in your web site. Try it out:
The trick is to use the <object> tag. The <img> tag doesn't work for custom fonts.
3
26
156
Just released valtio-signal v0.1.0!
It follows the same approach as jotai-signal. Seems magical?
Demo:
9
7
156
Valtio may seem to work like magic, but it's based on a simple rule. If you are interested in the internals, here's a simplified version. Hope this is fairly readable.
3
12
156
My long journey to add group resizing feature in
@Excalidraw
finally ends.
Did you know this is not possible now? This PR fixes it at last. It was tricky to implement If you are eager to help, please open the preview in the PR, and try finding bugs.
2
9
152
Playing with Wakuwork, Minimalistic React Framework with React Server Components!
RSC supports streaming, so can we send infinite data?
Yes!
10
15
154
Have you ever heard of Zustand, the React state manager?
Support my work on Zustand by checking out my product here: 🐻
9
14
152
Re: suspense for data fetching
Does this diagram help? It is a tweet of mine more than two years ago:
It doesn't take account the waterfall issue with Suspense. I wasn't aware of it back then. We should basically prefetch everything at the same time.
Check this out!
A diagram to show various data fetching approaches in
@ReactJS
.
#RenderAsYouFetch
is a new pattern with
#ReactSuspense
and
#React
#ConcurrentMode
.
#ReactJS
official doc:
1
12
84
6
27
156
🎉 Announcing a new experimental project: React Worker Components
Everyone is excited about Server Components. So am I. This is to explore a possibility to apply the idea for Web Workers. The basic implementation is ready to play with. Check out examples!
7
19
152
🤩Waku v0.19 is here, just a month after v0.18. Our React Framework supporting RSC now comes with a major shift: we're expanding our focus from library authors to app developers! A new router API marks our first big step in this direction.
Learn more👉 ⛩️
3
27
152
Isn't this exciting?
I started developing a React framework to experiment React Server Components. As there is a demand for RSC framework alternative to Next.js, I'm putting more efforts to make it a production-level framework. So, I decided to rename it.
10
15
151
We have already created Jotai Labs and Valtio Labs, so why not for Zustand? Introducing the new Zustand Labs!
0
9
150
🎉 Super excited to announce the release of Waku v0.21, which comes with full Server Actions support! Waku, the minimal React framework built for RSC, now offers complete RSC capabilities.
Check out the announcement article 👉 ⛩️
4
11
147
RSC protocol is fairly simple.
Understanding RSC model isn't very easy.
Building RSC framework is extremely hard.
4
10
141
Everyone seems excited about useEvent RFC.
Here's jotai approach to define stable event handler. atoms don't have to be global (exported).
8
21
135
Jotai v1.7.7 is released!
jotai/query migrates to tanstack/query v4 from react-query v3.
We are working on some other improvements. Stay tuned.
👻
0
20
135
Now, signal() with zustand-signal (internally create-react-signals) supports react-three-fiber!
It updates the position of cube without React rendering. Would be good for game-like apps.
Demo:
Note: This project is still experimental and includes hacks.
3
10
136
Perhaps you're not familiar with Zustand, or maybe Valtio is new to you. Take a look at these two counter examples to learn something different.
6
15
137
If you are using Jotai (or maybe Recoil) and run into limitations when creating atoms with props, consider checking out jotai-molecules. It allows you to create more complex states for your app.
3
21
136
Another advice of mine is, when you use `useEffect`, make it work without "deps" at first. Add "deps" later for _optimization_. Don't expect "deps" to work with semantic guarantees.
When teaching how to use `useEffect` in
@ReactJS
, I say we should assume an effect function will be executed after 10 seconds. If that causes a serious problem, the usage is probably wrong.
We might be able to make it a DEV-only util. (Timing with multiple ones is not supported.
9
30
255
5
12
136
Decision Tree to Choose a Global State Library
I'm maintaining several libraries and I can explain the differences. It's hard to recommend one. So, I
@excalidraw
the decision tree.
It turns out it's hard to express as a tree. This is rather just FYI.
7
18
134
Oh, yes,
@jherr
is basically creating Zustand. Nice. It's good because it proves that Zustand is that simple.
5
13
130
A misconception with React: Async components only work on the server.
They work on the client too!
Demo:
9
13
133
🤩 Excited to announce Waku v0.20.2! Waku is the Minimal React Framework with first-class RSC support. A few new contributors have joined us, fixed some bugs, and improved use cases, such as SSG. I think it’s now pretty solid for SSG.
⛩️
3
15
133
Re: The two types of state management
Maybe like simple & easy
3
12
129
🎉 Exciting news! Jotai Effect has officially reached v1! This long-awaited feature is now finally ready for production use. A huge thanks to
@DavidMaskasky
for their incredible work. Check out the release post: 👻
2
18
129
My perspective comes from a slightly different angle. Zustand is a good abstraction from useState. If people find that it works for them, it probably means they have misused or overused redux from the start.
instead of adding more layers of abstraction to hide previous layers, zustand did the reverse. it unpeeled unnecessary abstraction: for instance actions, action-types, "thunks". the beautiful essence of redux is what's left in this screenshot — simplicity always wins.
6
12
314
4
3
128
Repeat after me:
- Signals are reactive variables.
- Atoms are definitions for reactive variables.
7
5
127
Hi, can anyone, who is familiar with functional programming, read, review and share your feedback please?
2
19
127
Is anybody interested in minimal example code using:
-
@Expo
SDK36 with
#TypeScript
- Apollo Client v3 with mocking
- React Navigation v5
Here it is 👉
#ReactJS
#React
#JavaScript
@apollographql
#ReactNavigation
2
24
122
Let's celebrate Waku reaching 2k stars on GitHub. Thank you all for showing interest!
2
9
125
React 19 beta is out! I just released use-zustand v0.1.0, a React hook for Zustand that is compatible with `use` for promises.
Repo👉
Demo👉
4
21
123
As React Query won, and with React 19 landing soon, I decided to deprecate one of my old projects. Thanks for your interest and support. It was a long journey, but my focus on data fetching is now on Waku.
3
5
123
While responding to questions on GitHub, I feel like we should emphasize more about Jotai core mental model. It's "subscribable WeakMap".
Jotai is built with WeakMaps internally. Jotai's createStore API is also similar to WeakMap API.
1
2
30
4
11
123
My new convention:
"red dashed": server components
"blue dashed": client components with "use client" boundary
"gray dashed": shared components
2
13
121
Fine-grained updates with TC39 signals in React? 🤯
Another experimental feature in `use-signals`.
⚠️NEVER EVER USE IT IN PRODUCTION⚠️
7
12
121
Just published How Jotai Specifies Package Entry Points. Support CJS and ESM as much as possible.
(only some rough notes for myself...
4
21
121
At a glance:
- zustand looks like redux, but you know it's not at all.
- jotai looks like recoil, but you may feel it different afterward.
- valtio looks like mobx, but you will find the overlap is little.
6
11
119
What's signal? 🤔 Whatever it is, here's `jotai-signal`.
Still an experimental project, but you can play with it. It uses `experimental_use` internally and only works with React experimental build.
6
15
118