Почему не происходит ререндер мемоизированного компонента при наличии в нем переменной с данными без useMemo?

Question

[MishaXXL]

В компоненте есть мемоизированный компонент
Почему, когда у нас data без useMemo, то компонент MemoCountBtn не перерисовывается при ререндере родителя?
Но при этом, если функцию foo написать без callBack, то MemoCountBtn рередерится
Хотя и foo и data пересоздаются при ререндере родителя

export function Root() {
const [num, setNum] = useState(1)

const foo = useCallback(() => {
    setNum(5)
  }, [])

  // function foo() {
  //   setNum(5)
  // }  

function counting(x) {
    return x * x * x
  }

  const data = counting(num)

<MemoCountBtn func={foo} data={data} />
}

Есть компонент

const CountBtn = ({ func, data}) => {
    return(
      <div>
        <p>{data}</p>
        <button onClick={() => func()}>
          Click CountBtn
        </button>
      </div>
    )
}

const MemoCountBtn = memo(CountBtn)

Answer 1

[Александр]

Потому что memo использует поверхностное сравнение, а у вас на входе примитив (просто число). А если функцию написать без useCallback она действительно создаётся новая, а в текущем useCallback пустой список зависимостей - значит и функция не будет пересоздаваться (это и не нужно).

Comments

[MishaXXL]

Подскажите, что должна принимать const data, чтобы мой мемоизированный компонент ререндерился при каждом ререндере родителя?
При том, что date не меняло бы своё значение
Пытаюсь понять useMemoи этот момент меня удивил, что передавая data, мой компонент не ререндерится

Почему есть такая разница между function foo() и const data, что в случае с функцией, компонент ререндерится, а в случае с переменной, нет.

Хочется понять разницу применения здесь useMemoи обычного const data

[szQocks]

MishaXXL, тебе уже дали ответ на твой вопрос, если ты не захотел копаться и понять, то это только твои проблемы

если компонент должен ререндериться при каждом чихе родителя, то этот компонент не должен быть в memo как минимум

Почему есть такая разница между function foo() и const data, что в случае с функцией, компонент ререндерится, а в случае с переменной, нет.

потому что переменная ссылается на одно и тоже число ( примитив ) а от того что там новая или старая переменная это никого не волнует

[szQocks]

MishaXXL, когда ты с единицы, изменяешь стейт на пятёрку в этот момент твой MemoCountBtn - ререндириться, разве нет ? потому что 1 * 1 * 1 не равно 5 * 5 * 5

[MishaXXL]

szQocks, я почитал, но не до конца понял
т.е. когда функция возвращает примитив, который не меняется, то эта переменная работает, как useMemoпо умолчанию, т.к. значение не изменилось, а если мы будем возвращать объект, то тогда уже нужно оборачивать в useMemo?

[szQocks]

MishaXXL, вот попроще вариант

const Test = memo(({ isNeedToUpdate }) => <span>{+isNeedToUpdate}</span>;

const HomePage = () => {
 return <Test isNeedToUpdate={true} />
}

представь что в HomePage находиться куча стейтов, их целая тьма, штук 15, компонент не маленький, и он очень часто ререндериться по каким-то причинам, но компонент Test не ререндерится - вопрос почему ?

Ведь каждый раз создаётся примитив - true, ведь true - это булевое значение - является примитивом, оно действительно создаётся каждый раз при каждом ререндере HomePage

вот тебе и написал Александр про поверхностное сравнение

[szQocks]

MishaXXL,

const Test = memo(({ MySuperNumber }) => <span>{MySuperNumber }</span>;

const HomePage = () => {
 return <Test MySuperNumber={5} />
}

Может так легче , хз

[szQocks]

MishaXXL,

или так xDD

const Test = memo(({ MySuperNumber }) => <span>{MySuperNumber }</span>;

const HomePage = () => {
 const myNumber = 5;
 return <Test MySuperNumber={myNumber} />
}