useMemo
React で/フックを使用すると、 /戻り値useCallback
が原因で予期しないレンダリングが発生することがあります。useMemo
useCallback
React.memo
React関数コンポーネントの無用なレンダリングを減らすために使用するため、 React.memo
2番目のパラメーターによって、比較を制御できました。また、現在のレンダーを引き起こすプロップを取得できます。後のように:
const MemoComponent = React.memo((props) => {}, (prevProps, nextProps) => {
for (const key in prevProps) {
const prevValue = prevProps[key];
const nextValue = nextProps[key];
if (prevValue !== nextValue) {
return false; // form here I can get which cause render
}
}
return true;
})
以前のように依存関係の原因useCallback
/useMemo
再計算または React devtools を取得できますか?