✍️ Як ви знаєте, в JS інкапсуляцію не завезли by design. Раніше навіть не було можливості робити приватні поля, тому всі писали
_xxxx і молились аби ніхто такі поля просто так не чіпав. До речі, оця конструкція - функції, яка викликає сама себе
(function () {})(); теж пішла з бажання сховати всі внутрішні змінні і не смітити ними в глобальному об'єкті window. 😊 З часом ситуація покращилася, з'явилися ES модулі, які автоматично ховають все, що не експортується і не додають свої змінні в
window. Але, залишилась інша проблема - глобальність експорту. Якщо ви експортуєте якийсь шматок коду - імпортувати його може хто завгодно. А це погано, тому що ваш компонент можуть почати використовувати інші і от він уже приймає 100500 пропсів аби задовольнити усі примхи. 🧐Тому дехто вирішив вдаритися в крайнощі і почав ховати компоненти, в середині компонентів, тому що export звідти буквально не можливий. Такий собі спосіб сказати - цей компонент лише мій і навіть не думай його чіпати. Власне такі конструкції можна побачити в C#, коли клас створює під клас в середині себе і там це все цілком ОК і ніхто не дивується.
👉 Але з React є мааааанюнький такий нюанс розміром десь з Ейфелеву вежу:
❗️Коли React визначає, які зміни сталися в застосунку, він порівнює, в тому числі класи або функції компонентів. А, в цьому підході з інкапсуляцією, на кожен рендер буде створюватися новий клас або функція-компонент. Коли React таке бачить - він вважає зміни настільки значущими, що повністю видаляє старий компонент і монтує туди новий. Зрозуміло, що це не ефективно з точки зору роботи з браузером, але це ще пів біди. Другі "пів біди" полягають в тому, що стейт внутрішнього компоненту також знищується! Відповідно такі компоненти ще й фактично поламані! 😃
🤷 Ось такі ситуації виникають, коли хочеться як краще, але з бібліотекою до кінця не розібрався.
Всім гарних вихідних і готуйте гроші на наступний тиждень. Буде збір і буде дуже крутий лот на розіграш (таких в Україні може штук 5 є)
@reactbeginners