);
}
```
### 状態を保存するために `useRef` を使用しないでください
状態の保存に `useRef` を使用するのは避けてください。
状態を保存したい場合は、`useState` または `useRecoilState` を使用してください。
いくつかの再レンダリングを防ぐために `useRef` が必要だと感じた場合は、[再レンダリングの管理方法](#managing-re-renders)を参照してください。
## 再レンダリングの管理
React で再レンダリングを管理するのは難しいことがあります。
不必要な再レンダリングを避けるためのいくつかのルールをご紹介します。
再レンダリングの原因を理解することで、常に再レンダリングを避けることができることを念頭に置いてください。
### ルートレベルで作業する
新機能での再レンダリングをルートレベルで排除することで、簡単に避けることができるようになりました。
`PageChangeEffect` サイドカーコンポーネントには、ページ変更時に実行するロジックを保持する `useEffect` が 1 つだけ含まれています。
その方法で、再レンダリングを引き起こす場所が 1 つだけあることを認識できます。
### コードベースに `useEffect` を追加する前に必ず2度考えてください
再レンダリングは、しばしば不要な `useEffect` によって引き起こされます。
本当に`useEffect`が必要なのか、それともロジックをイベントハンドラ関数に移動できるのかを考えるべきです。
一般的にロジックを `handleClick` または `handleChange` 関数に移動するのは簡単です。
Apollo などのライブラリで `onCompleted`、`onError` などとしても見つかることがあります。
### 兄弟コンポーネントを使用して `useEffect` またはデータ取得ロジックを抽出する
ルートコンポーネントに `useEffect` を追加する必要があるように感じた場合は、それをサイドカーコンポーネントに抽出することを検討してください。
Apollo フックを使用してデータ取得ロジックにも同じことを適用できます。
```tsx
// ❌ Bad, will cause re-renders even if data is not changing,
// because useEffect needs to be re-evaluated
export const PageComponent = () => {
const [data, setData] = useRecoilState(dataState);
const [someDependency] = useRecoilState(someDependencyState);
useEffect(() => {
if(someDependency !== data) {
setData(someDependency);
}
}, [someDependency]);
return
{data}
;
};
export const App = () => (
);
```
```tsx
// ✅ Good, will not cause re-renders if data is not changing,
// because useEffect is re-evaluated in another sibling component
export const PageComponent = () => {
const [data, setData] = useRecoilState(dataState);
return
このドキュメントでは、フロントエンド作業におけるベストプラクティスを概要化しています。
## 状態管理
React と Recoil はコードベース内の状態管理を行います。
### 状態を保存するために `useRecoilState` を使用する
状態を保存するために必要なだけ多くのアトムを作成するのがよいです。