React でウェブツールを作成しています。
親コンポーネントが別のものに変わったとき、子コンポーネントの useEffect が発火しないようにすることは可能でしょうか?
最小のサンプルを用意いたしました。
CodeSandbox: https://codesandbox.io/s/jovial-kowalevski-lkdbx
function ComponentA(props) {
return (
<div style={{ backgroundColor: "pink" }}>
<p>Component A</p>
{props.children}
</div>
);
}
function ComponentB(props) {
return (
<div style={{ backgroundColor: "skyblue" }}>
<p>Component B</p>
{props.children}
</div>
);
}
function CommonComponent() {
React.useEffect(() => {
console.log("useEffect is running in CommonComponent.");
}, []);
return (<div>Common component.</div>);
}
function App() {
const [ab, setAB] = React.useState(true);
const ParentComponent = ab ? ComponentA : ComponentB;
return (
<React.Fragment>
<label>
<input
type="checkbox"
checked={ab}
onChange={(event) => {
setAB(event.target.checked);
}}
/>
Switch A/B
</label>
<ParentComponent>
<CommonComponent />
</ParentComponent>
</React.Fragment>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
.App {
font-family: sans-serif;
text-align: center;
}
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="root"></div>
「Switch A/B」を切り替えるたびに、 CommonComponent 内の useEffect が発火するため、コンソールに "useEffect is running in CommonComponent." と出力されます。
このとき、実際のアプリケーションではサーバーからデータの fetch を行っており、実行コストが高いです。
この useEffect は依存リストに空配列を設定している通り、本質的には親の影響を受けない処理内容のため、何らかの方法で useEffect の再実行を回避できないでしょうか?
なお、実際には、 ComponentA, B はフォームであり、 CommonComponent はいくつかのチェックボックスをまとめたフォームの一部です。