Как сохранить данные внутри компонента React

Добрый день, уважаемые читатели. Я начинающий frontetd разработчик. Начав работать после окончания курсов, столкнулся с интересным явлением, которому можно дать название "Ничего себе!! как я раньше не догадался ??!!". Об одном из таких случаев хочу сегодня написать.

Ни для кого не секрет, что у компонента React три этапа в жизни если так можно выразится. Это "Монтирование", "Перемонтирование" и "Размонтирование". Однажды я столкнулся с тем, что понял , что я не понял (простите за тавтологию) как ведут себя данные внутри компонентов когда эти три этапа один за другим сменяют друг друга. Под данными я подразумеваю массивы, объекты, примитивы и т.д. в общем всё что помогает нам описать сущности которыми мы оперируем в наших компонентах.

Для начала в моей голове сложилось понимание того, что эти самые данные внутри компонента можно хранить в трех банках. Эти банки можно назвать "Переменная" - обычные let и const, "Состояние" эта банка появляется после вызова useState и "Ссылка" эта банка появляется после вызова useRef.

Далее в голове сложилось понимание того чем эти банки отличаются друг от друга.

Банка под названием "Переменная" отличается от остальных банок тем, что ее содержимое чудесным образом исчезает после очередного перемонтирования компонента. Прямо как мед из банки в истории про Виннипуха. В эту банку можно положить только то, что не нужно хранить между перемонтированиями компонента. Например какие то промежуточные вычисления или то, что будет вычисляться каждый раз при перемонтировании.

Банка под названием "Состояние" это та банка в которой можно надёжно хранить припасы, не боясь, что они пропадут при перемонтировании. Эту банку просто так не разбить. Но есть один нюанс. Если вы вызовете сеттер для установки нового значения состояния, будьте готовы к тому, что далее последует "Перемонтирование". То есть компонент обязательно перемонтируется. Если в компоненте у вас 2 состояния объявленных через useState

const [name, setName] = useState('Dima');
const [age, setAge] = useState('18');

то при вызове каждого сеттера ваш компонент перемонтируется. Встречал код где состояний 5 и сеттеры вызываются один за другим, как следствие имеем 5 последовательных перемонтирований. Если предположить, что вычисления каждого name или age очень дорогие то как следствие будем иметь проблемы с производительностью, чего конечно мы не хотим. Итак в банке под названием "Состояние" мы храним то, что принято называть состоянием компонента, то, что сохранится между перемонтированиями, но будет безвозвратно утеряно при размонтировании. При этом в голове держим, что каждое добавление в эту банку чего либо приведет к перемонтированию компонента.

Банка под названием "Ссылка" такая же прочная как и банка "Состояние". Данные в ней так же живут между перемонтированиями и ни куда не денутся. Особенность заключается в том, что добавление в эту банку чего либо не приводит к перемонтированию компонента. Иногда это очень полезно когда нужно хранить какие то данные между перемонтированиями но вызывать само перемонтирование при обновлении данных в ссылке мы не хотим.

Итак подведу итог.

Я надеюсь что эта статья будет полезна начинающим разработчикам, изучающим React как и я и немного углубит их понимание этой библиотеки.