Next.jsでRecoilで状態管理する機会があったので使い方をまとめていきます。
インストール
npm install recoil設定：RecoilRoot
ルートをRecoilRootで囲みます。
import { RecoilRoot } from "./recoil";
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="ja">
<body>
<RecoilRoot>{children}</RecoilRoot>
</body>
</html>
);状態を定義：atom
import { atom } from "recoil";
const textState = atom({
key: 'textState',
default: '',
});key: ユニークになるようにします。
状態の読み書き：useRecoilState
"use client";
import { useRecoilState } from "recoil";
import { textState } from "@/recoil/textState";
function TextInput(){
const [text, setText] = useRecoilState(textState);
const onChange = (event) => {
setText(event.target.value);
};
return (
<div>
<input type="text" value={text} onChange={onChange} />
<br />
Echo: {text}
</div>
);
}
状態を取得：useRecoilValue
"use client";
function TextStateComponent(){
const text = useRecoilValue(textState);
}更新関数を取得：useSetRecoilState
状態を更新する関数のみ取得します。
"use client";
function TextSetComponent(){
const setText = useSetRecoilState(textState);
}state を宣言するとコンポーネントが再レンダリングされるため、useSetRecoilStateを利用して再レンダリングされないようにします。
