React でウェブツールを作成しています。
親コンポーネントが別のものに変わったとき、子コンポーネントの useEffect が発火しないようにすることは可能でしょうか?
最小のサンプルを用意いたしました。
CodeSandbox: https://codesandbox.io/s/jovial-kowalevski-lkdbx
「Switch A/B」を切り替えるたびに、 CommonComponent 内の useEffect が発火するため、コンソールに "useEffect is running in CommonComponent." と出力されます。
このとき、実際のアプリケーションではサーバーからデータの fetch を行っており、実行コストが高いです。
この useEffect は依存リストに空配列を設定している通り、本質的には親の影響を受けない処理内容のため、何らかの方法で useEffect の再実行を回避できないでしょうか?
なお、実際には、 ComponentA, B はフォームであり、 CommonComponent はいくつかのチェックボックスをまとめたフォームの一部です。
CodeSandbox からコードを抜粋して以下に記載いたします。
export default function App() {
const [ab, setAB] = useState(true);
const ParentComponent = ab ? ComponentA : ComponentB;
return (
<ParentComponent>
<CommonComponent />
</ParentComponent>
);
}
function CommonComponent() {
useEffect(() => {
console.log("useEffect is running in CommonComponent.");
}, []);
return <div>Common component.</div>;
}