[React/Next.js]Recoilで状態管理する

広告Next.js

2024年01月13日

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を利用して再レンダリングされないようにします。