【Jotai】状態管理ライブラリ

Jotaiという状態管理ライブラリを知ったのでまとめる

github.com

作者自身（@dai-shi）の記事があるのでこれを読めば大体わかる qiita.com

Zustandという別の状態管理ライブラリから派生してつくられたライブラリ

Zustandは状態管理ライブラリのうち2020年の一年間で増えたスターの数が４番目に多いとして、JavaScript ベスト・オブ・ザ・イヤー 2020にランクインしている

github.com

Zustandもドイツ語で「状態」という意味
どちらもdai-shiさんが携わっている

ZustandはFlux/Reduxの流れを汲むステート管理ライブラリでContextを用いていないが、JotaiはContext APIのパフォーマンス問題を解決することが目的で作られたとのこと

また、JotaiはRecoilにインスパイアされて作られているとのことで、Recoilと同様にAtomというステートオブジェクトを使用する

import { Provider, atom, useAtom } from 'jotai';

const textAtom = atom('hello');

const Component = () => {
  const [text, setText] = useAtom(textAtom);
  return (
    <input value={text} onChange={e => setText(e.target.value)} />
  );
};

const App = () => (
  <Provider>
    <Component />
  </Provider>
);

状態管理に何を使うか、選択肢が増えてきた

思想を理解し、プロジェクトに適したものを選択していきたい

他参考

https://zenn.dev/takepepe/articles/state-manegement-in-nextjs-2020