Ререндер разных компонентов при использовании useContext?

Question

[iordania]

Всем привет!

При подписке в разных компонентах на 1 контекст:

const objContext = { name: "Max", changeName: () => {} }

где в компоненте 1 я вывожу name:

const Component1 = () => {
  const { name } = useContext(objContext);

  return (
      <p>Name: {name}</p>
  );
};

а в компоненте 2 вызываю функцию которая в родителе меняет name:

const Component2 = () => {
  const { changeName } = useContext(objContext);

  return (
    <div>
      <button onClick={changeName}>Change name</button>
    </div>
  );
};

Как написано в доке к реакт:

Компонент, вызывающий useContext, всегда будет перерендериваться при изменении значения контекста.

Вопрос: можно ли избавить от лишнего рендера Component2 где просто вызывается функция на изменение имени которая по сути никак не меняется ?

Answer 1

[Alexandroppolus]

можно ли избавить от лишнего рендера Component2

нет, нельзя.
useContext забирает полное значение (и подписывается на него), которое всегда будет меняться при изменении name.

как вариант, можно не использовать useContext в Component2, а передавать туда мемоизованную changeName.

Comments

[iordania]

Alexandroppolus , понял, но если возможен такой сценарий что множество компонентов используют 1 и тот же контекст, но разные значения из него, то все эти компоненты будут ререндериться ?

Это возможно обойти только используя cтейт-менеджер ?

[Alexandroppolus]

Это возможно обойти только используя cтейт-менеджер ?

как вариант.

сам по себе контекст подходит как место, где лежит стор с состоянием (например, редуксовый или мобиксовый стор). При изменении стейта объект стора не меняется, и ререндеры будут только у подписчиков на изменение стейта, но не у пользователей контекста.

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

Answer 2

[profesor08]

Будет вызвана рендер функция компонента, который передает в Context.Provider данные. Будет вызвана рендер функция каждого компонента, который где-то в потомках Context.Provider использует контекст. Потому что в провайдер ты каждый раз передаешь новую ссылку на объект с данными для контекста, а если не будешь передавать, то и реакции никакой и нигде не будет.

Для твоего случая подойдет mobx.