Почему при открытии модалки у меня перерендеривается компонент, в котором я открываю модалку?

Question

[1233211]

Подскажите, пожалуйста, по ререндеру. Где у меня здесь ошибка в useModal?
При открытии/закрытии модалок, при любом действии в модалке запускается перерендер компонента, внутри которого вызвана модалка:
https://gist.github.com/newsminsk/3706ca525a781ca5...

предполагаю, что что-то тут с children надо поправить:

<Provider value={state}>
      {modals}
      {children}
    </Provider>

спасибо заранее

Answer 1

[Alexandroppolus]

Потому что useModal (и как следствие, компонент, использующий этот хук) использует значение из контекста, и если это значение меняется, будут ререндериться все компоненты, которые зависят от значения контекста (то есть, даже те компоненты, которые работают с другими модалками, ибо контекст общий для всех).

Comments

[1233211]

А можно как-то это исправить?

[Alexandroppolus]

Можно. Главное, в контексте должен храниться постоянный объект. Легко заметить, что modalsState используется только внутри ModalProvider, и нет смысла его складывать в контекст. Если его убрать из контекста, остаются только showModal/hideModal, в которых modalsState тоже не нужен, если их написать по уму:

const showModal = useCallback(
    (type, props) => {
      setModalsState(modals => ({ ...modals, [type]: { show: true, props } }));
    },
    [],
  );

И вот теперь, полностью отвязав значение контекста от modalsState, можно добиться постоянного значения, что и решит проблему.

Год назад делал подобный механизм для попапов, в чуть более общем виде

[Alexandroppolus]

const ModalProvider: FC< Types>

Можно просто const ModalProvider: FC

FC сам добавляет children