Перше що потрібно зрозуміти це те, що
React.children це звичайний пропс, який приймає все що завгодно. Ви можете покласти туди і текст, і масив і ReactNode, як ми робимо в цьому прикладі. ReactNode - в свою чергу, це не наш компонент, це результат обчислення нашого компоненту у формі об'єкту. Ви можете зробити console.log(children) і подивитися що в цього об'єкту в середині. Коли ми натискаємо на кнопку, у нас змінюється стейт каунтеру, що відповідно до загальних правил, змушує його перерендеритися. А що відбувається з пропсами, які нам передали згори? Та нічого, вони залишаються ті самі що й були, тому що вони належать батьківському компоненту, а цей батьківський компонент не змінюється.
Саме тому ми і бачимо
ClickMeText rendered один єдиний раз. Спочатку рендериться <App/>, потім рендериться <ClickMeText/>, потім рендериться <Counter/> в який через пропс потрапляє результат обчислення <ClickMeText/>. Коли ми натискаємо на кнопку, змінюється стейт <Counter/> і він, Counter, обчислюється заново. Але в пропси передаються ті самі значення що й минулого разу. Ось і уся магія, сподіваюся пояснення вийшло відносно простим.
Доречі, англійською, є дуже гарна стаття на цю тему для тих кому цікаво подивитися трохи глибше. Дякую пану Євгену за посилання.
@reactbeginners