Хук useContext

Какая проблема в приложении?

<App />

<App />

<Section ... />

<App />

<Section ... />

<Card ... />

<App />

<Section ... />

<Card ... />

<PlusButton ... />

handleClickPlus(5)

И как же useContext решит эту "проблему"?

<App />

<Section ... />

<Card ... />

<PlusButton ... />

handleClickPlus(5)

<App />

<Section ... />

<Card ... />

<PlusButton ... />

handleClickPlus(5)

<App />

<Section ... />

<Card ... />

<PlusButton ... />

handleClickPlus(5)

Context

<App />

<Section ... />

<Card ... />

<PlusButton ... />

handleClickPlus(5)

Context

<App />

<Section ... />

<Card ... />

<PlusButton ... />

handleClickPlus(5)

Context

<App />

<Section ... />

<Card ... />

<PlusButton ... />

handleClickPlus(5)

Context

<App />

<Section ... />

<Card ... />

<PlusButton ... />

handleClickPlus(5)

Context

update

<App />

<Header />

<Section />

<Card />

<PlusButton />

- кол-во товаров

- карточка продукт

- кнопка добавления товаров в корзину

- раздел продуктов

<App />

<Header />

<Section />

<Card />

<PlusButton />

- кол-во товаров

- карточка продукт

- кнопка добавления товаров в корзину

- раздел продуктов

<Provider value={...} />

<Provider/>