子コンポーネントの再レンダー
ComponentBがAの子コンポーネントの場合
incrementボタンクリック
countのstateが変化
Aが再レンダー
Bも再レンダー
code:tsx
const ComponentA: React.FC = () => {
const count, updateCount = useState(0);
const handleUpdateCount = () => {
updateCount((count) => count + 1);
};
return (
<div>
<div>{count}</div>
<button onClick={handleUpdateCount}>increment</button>
<ComponentB />
</div>
);
};
ComponentBがAからchildrenとして渡されている場合、Aのカウントstateを変更してもBは再レンダーしない
code:tsx
const ComponentA: React.FC<{ children: ReactNode }> = ({
children,
}: {
children: React.ReactNode;
}) => {
const count, updateCount = useState(0);
const handleUpdateCount = () => {
updateCount((count) => count + 1);
};
return (
<div>
<div>{count}</div>
<button onClick={handleUpdateCount}>increment</button>
<div>{children}</div>
</div>
);
};
const Parent: React.FC = () => {
return (
<ComponentA>
<ComponentB />
</ ComponentA>
);
};