4

By using useMemo / useCallback hook in React, sometimes I find many unexpected render causing by useMemo / useCallback return value.

As I use React.memo to reduce React function component useless render, by React.memo second param, I could control over the comparison. Also, I can get which prop cause current render. Like after:

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;
})

May I get which dependence cause useCallback / useMemo recalculate like before or React devtools?

tomision
  • 964
  • 9
  • 22

0 Answers0