Recoil基礎

Recoil基礎

ポケモンで例えると: 状態管理を理解することは、新しい「わざ」を覚えるようなもの——使いこなせば、より強力な開発者になれます。

Recoilは、Facebookが開発したアトミックな状態管理ライブラリです。

インストール

npm install recoil

Atomの定義

import { atom } from 'recoil';

export const countState = atom({
  key: 'countState',
  default: 0,
});

Selectorの定義

import { selector } from 'recoil';
import { countState } from './atoms';

export const doubleCountState = selector({
  key: 'doubleCountState',
  get: ({ get }) => {
    const count = get(countState);
    return count * 2;
  },
});

コンポーネントでの使用

import { useRecoilState, useRecoilValue } from 'recoil';
import { countState, doubleCountState } from './atoms';

function Counter() {
  const [count, setCount] = useRecoilState(countState);
  const doubleCount = useRecoilValue(doubleCountState);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Double: {doubleCount}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

---

🎓 まとめ

「状態管理は、開発者としての成長に欠かせない『わざ』である——継続的に学び、実践することで真の力となる。」

技術の習得は、ポケモンのレベルアップと同じ——一歩ずつ、着実に成長していくことが重要です。状態管理をマスターし、より強力な開発者を目指しましょう。