Как запретить рендер части компоненты?

Question

[Solevoy_2015]

const Parent = () => {

return (
<section>
//запретить рендер компоненты по причине: the parent component rendered
<Component/>
//есть такой вариант, но ищу решение без использования useMemo, скорее всего такой вариант требуется ресурсов
{useMemo(() => {
return <Component/>
}, [])
</section>
)
}

Answer 1

[Alexandroppolus]

Component должен быть React.memo

как вариант, можно написать

const componentElement = <Component/>;

const Parent = () => {

  return (
    <section>
      {componentElement}
    </section>
  );
};

почему этот странный и немного костыльный вариант не вызывает ререндер чилда при ререндере парента? Потому что так во время ререндера парента не создается новый элемент (переиспользуется старый объект componentElement). А ререндер чилда из-за ререндера парента возможен только при новом элементе. Такие дела.

Comments

[Solevoy_2015]

ищу решение без использования мемоизации

[WbICHA]

Solevoy_2015, для начала давай разберём зачем тебе решение без мемоизации?

[szQocks]

Solevoy_2015,
Если я правильно понял то когда parent изменяет какой-то из <Component/> , то они ререндерятся оба и поэтому memo не помогает, верно ?

<section>
<Component/>
<Component/>
</section>

[szQocks]

Solevoy_2015, в общем если я угадал, то добавь им разные ключи

[Alexandroppolus]

szQocks, они оба не будут ререндериться, если обернуть Component в memo.

Я, честно говоря, не понимаю, в чем проблема автора и почему "ущерб" от memo видится ему неприемлемым

[Alexandroppolus]

szQocks, ключи здесь точно не нужны

[szQocks]

Alexandroppolus, вариант что автор задаёт какой-то странный вопрос, я тоже не исключаю

я просто решил подсказать автору исходя из своего опыта, был похожий частный случай у меня, но я не помню были ли мои компонент обёрнуты мои компоненты в том случае в memo, возможно мой комментарий и не поможет - я этого не отрицаю

[szQocks]

Alexandroppolus, https://www.youtube.com/watch?v=vXJkeZf-4-4 вот я кстати нашёл видео, что-то близкое с этим у меня было

[Alexandroppolus]

szQocks, видос про другое. Там с помощью ключа делается принудительное перемонтирование компонента, чтобы сбросить внутренний стейт. К предотвращению лишних ререндеров это не относится.

[szQocks]

Alexandroppolus, ты прав, наверное ситуация автора явно никак не связана с моим частным случаем, и тут явно дело не в ключах.

[Solevoy_2015]

WbICHA, рендер дочерней компоненты вообще не нужен, там много хуков, на производительность не сильно влияет, но и лишние расчеты мне не нужны, в случае мемоизации происходит сравнение пропсов, обмена которых там нет. Может я как то не так понимаю, но мемоизация направленна на то, чтобы делать рендер компоненты в случае изменения пропсов, которые повторюсь туда не передаются. Я могу ошибаться, но как я понял, мне нужна как то иначе ограничить этот компонент. Не отрицаю что useMemo без зависимостей, вообще не использует никаких ресурсов, если это так, то скорее всего это и есть ответ.

[Solevoy_2015]

szQocks, нет, memo и useMemo решают проблему, но у меня нет обмена пропсами, я так подозреваю, что мемоизация тут не уместна и можно как то иначе ограничить дочерний компонент.

[WbICHA]

Solevoy_2015, иии? Если нету пропсов, то чем тебя мемоизация не устраивает?

[Alexandroppolus]

Solevoy_2015, как вариант, можно написать

const componentElement = <Component/>;

const Parent = () => {

  return (
    <section>
      {componentElement}
    </section>
  );
};

тогда Component не будет ререндерится совсем уж "нахаляву", без каких-либо мемоизаций. Он всё равно без пропсов, так что вариант вполне себе.

[Solevoy_2015]

Alexandroppolus, Отлично, вроде как помогло. Можете это написать в ответ к вопросу. Я даже не догадывался, что так можно делать, если честно...

[Alexandroppolus]

Solevoy_2015, написал и дал краткое пояснение.

[szQocks]

Solevoy_2015, я если честно так и не понял в чём проблема, и чем memo не не устраивает.
Когда я свой вариант про ключи говорил - я думал что код в вопросе не полный, такая способность додумывать у меня имеется. Как видимо она тут не понадобилась, потому что ключи в любом случае не связаны с ререндером, ну если не создавать их на ходу и т.д но это уже не относится к вопросу.