Что это и для чего

Данная песочница была создана по мотивам статей и видео от A.Sidorenko и It-синяк. Тут можно посмотреть как правильно использовать memo, useMemo,useCallback, а где этого делать не стоит. Какие есть еще пути оптимизации методами библиотеки, не прибегая к мемоизации.
Alex Sidorenko -- Twitter - крутые статьи
АйТи Синяк он же Александр Бальцевич -- Twitter - крутые статьи и видео

Структура проекта

Проект состоит из 5 основных частей

1. ExpensiveChild - общий пример как работать с мемо и как можно сделать то же самое, но без него.
2. ExampleWithMemoization - более глубокие кейсы с мемо, работа со списками, применение useCallback,useMemo, внешние данные,депенденси лист.
3. WithProvider - продолжение работы с мемо при работе с React.Provider.
4. AttachToDom - простые действия, как облегчить работу реакту при вариантивнов рендеринге.
5. FastGenericContext - если вдруг нужен контекст, для часто обновляемых данных с минимальным ререндером. Отлично заходит для вложенных форм.

Для понимания когда происходит рендер нужно установить расшение ReactDevTools - Chrome или ReactDevTools - Firefox В настройках включаем Highlight updates when components render. - если не можем найти идем сюда и ищем по поиску Then select the option under General that says Highlight updates when components render.

Ссылки на статьи по примерам

1. ExpensiveChild:
   Статья Дена Абрамова
   Видео Синяка на статью Дена
2. ExampleWithMemoization:
   Статья Alex Sidorenko Ch.1
   Статья Alex Sidorenko Ch.2
   Статья Alex Sidorenko Ch.3
   Статья Alex Sidorenko Ch.4
   Статья Синяка
   Видео Синяка про useCallback Видео Синяка Блок схема по использованию memo() && Боевые примеры Видео Синяка про key
3. WithProvider:
   Статья Alex Sidorenko Ch.5
4. AttachToDom:
   Без видео статья будет не совсем понятна
   Видео Синяка
   Статья Alex Sidorenko Ch.6
5. FastGenericContext: Видео

Ну и не менее важная статья от Kent C. Dodds

ОБЯЗАТЕЛЬНЫ К ПРОСМОТРУ

Видео Синяка #1 Все ли вы знаете о React key?
Видео Синяка #2 про о React Reconciliation
Видео Синяка #3 Какая настоящая цена useMemo?
Видео Синяка #4 useMemo - исходники, альтернативное использование
Видео Синяка #5 React.memo это вам не useMemo
Видео Синяка #6 Чем отличается SimpleMemoComponent от MemoComponent?
Видео Синяка #7 Станет ли memo() дэфолтным поведением реакт компонента?
Статья расшифровка видео #1
Статья расшифровка видео #3
Статья расшифровка видео #5 и #6