[23] React. Lifecycle (жизненные циклы) компонента | [Подготовка JS разработчика к интервью]

Расширение для Google Chrome - chrome.google.com/webstore/de...
Figma - www.figma.com/file/qQZLmqBcRZ...

[@ashimov1970]

Годный контент. Спасибо. Есть вопрос - вызовет ли рендеринг дочернего компонента рендер его родителя?

[@DeveloperInUS]

При классическом использовании - нет. Направление данных в реакте однонаправленное. Компонент может рендериться в 3-х случаях: изменения props (от родителя к ребенку), state (внутри компонента) и если рендериться родитель, то всего дочерние элементы также переренднерятся. Если перерендерирование дочернего компонента вызывает рендеринг его родителя, то это признак очень опасной структуры кода, при которой отследить ошибки будет сложно. Источники такого опасного перерендеривания могут быть различными. Вот самые явные : 1) Внутри функции render (классовый компонент) или прям в return (jsx функционального компонента) вызывается функция (callback из props), которая меняет состояние родителя. Состояние в свою очередь используется в родителе и перерендеривает самого родителя. Это может привести к ошибке (max re-renders). 2) Случаи изменения глобального состояние redux также частая ошибка. Я советую избегать такой архитектуры.

[@ashimov1970]

@@DeveloperInUS спасибо за инфу. я почему задал такой вопрос - недавно где то на канале одного из frontend-гуру (кажется Jack Herrington, если не ошибаюсь) смотрел видос об одном из хуков (useEffect либо useState). Там он показывал косяки неправильного обращения с первым видом хуков, когда он используется без своего второго параметра но в комбинации со вторым видом хуков. При этом юзЭффект ипользовался в родительском компоненте, а юзСтэйт - в его дочернем. юзСтэйт изменял состояние дочернего компонента, это вызывало (ре-)РЕНДЕР не только его, но и РОДИТЕЛЬСКОГО компонента, что в свою очередь триггерило там юзЭффект, который изменял состояние в дочернем компоненте, что запускало бесконечный цикл рендеров и изменений состояний этих двух компонетов. Т.е. получается рендер дочернего вызывает рендер родительского. Либо я что-то не так понял?

[@DeveloperInUS]

@@ashimov1970 Я думаю в этом случае скорее всего постоянное срабатывание useEffect родителя вызывало ререндер и родителя и соотв-нно дочернего компонента. Ребенок может вызвать ререндер родителя, если к примеру мы через props передадим ему от родителя setNewVal (из useState) и тем самым поменяем state родителя. Соотвественно, это заставит родителя перерендериться (и войти бесконечный цикл).

[@ashimov1970]

@@DeveloperInUS наверное я не до конца допираю... ☹😢 вот то видео: kzbin.info/www/bejne/mnmZmmZ9qteNjZo с 3:30 до 5:00

[@DeveloperInUS]

@@ashimov1970 "useFetch", который справа это не компонент, а это "хук" (hooks) - способ переиспользования кода в функциональных компонентах. Этот хук автор написал сам для того, чтобы подключать в любой компонент и делатть GET запросы на API и записывать в состояние. Это состояние (data) возвращается из хука и используется внутри компонента App. Т.е. в видео представлен всего 1 компонент, который использует хук