Как оптимизировать перерисовку компонентов?

Question

[Юрий Иванов]

Привет всем, нужен Ваш совет, делаю пет проект и столкнулся с проблемой, что при вводе в инпут значений, у меня вот такой ужас с перерисовкой компонентов происходит
Я понимаю, что есть в реакте useMemo, useCallBack, react.memo
Вот у меня есть логотип, тут нету не пропсов, не функций, ничего, почему он все равно перерисовывается, попытка обернуть его в реакт мемо ничего не дала (ожидаемо), где прочитать про оптимизацию перерисовок и что для этого можно использовать (я использую редакс тулкит) и думаю, что возможно эти перерисовки связаны с его использованием (обновлением селекторов в компонентах)

export const Logo: React.FC = () => {
  return (
    <>
      <img className={styles.logo} src={logo} alt="logo" />
    </>
  )
}

Comments

[Gary_Ihar]

Если нет пропс то memo поможет. Возможно идёт монтирование/разминирование "сверху", тогда это уже мемо не спасет

[Квазиморд Сидорович]

без полного кода, по крайней мере где инпут и его обработка - разговор ни о чем. Сделай пример, выложи на codepen - можно будет обсудить.

Answer 1

[Alexandroppolus]

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

да нет, совсем не ожидаемо

export const Logo: React.FC = React.memo(() => { ... });

- вот такой компонент вообще не должен перерисовываться. Может, он у тебя перемонтируется?

Comments

[Юрий Иванов]

Он так же перерисовывается, не знаю как при вводе в инпут у меня может логотип перемонтироваться (может я чего-то не знаю)

export const Logo: React.FC = React.memo(() => {
  return (
    <>
      <img className={styles.logo} src={logo} alt="logo" />
    </>
  )
})

[Alexandroppolus]

Юрий Иванов, вот пример со всеми логированиями
https://codesandbox.io/s/long-voice-50sl76?file=/s...

в консоли видно, что Logo не перерисовывается