useMemo - исходники, альтернативное использование и мемоизация ссылки

В прошлом выпуске мы рассматривали стоит ли мемоизировать вычисления. Но хотелось бы закрыть и другие аспекты касающиеся useMemo, большинство из них мы попытались закрыть в текущем видео

Поддержать Айти Синяка можно здесь:

00:00 Анонс темы
00:24 Исходники useMemo
01:45 Мемоизирование ссылки для экономии рендеров
02:53 Документация рекомендует мемоизировать компоненты
03:40 Эксперементируем с мемоизацией компонента
05:45 Подписывайтесь!

-------------------------

Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом

[tubtyeu]

есть предположение, что все дело в конструкции {showMenu && menu}. Потому что переключая флаг showMenu, в одном случае рендерится null (при showMenu = false), а в другом случае menu (при showMenu = true). Так как узел изменил тип узла, то соответственно рендер неизбежен, соответственно дело не в useMemo

[arseniykaptelinin]

Пример из документации реакта может быть полезен если и parent и children перерендеривать дорого. Такой кейс оборачиванием всех в memo не закрыть, потому что parent будет перерисовываться в любом случае. А вот оборачивание parent в memo, а children в useMemo здесь как раз решит проблему

[uuvorku]

Например если children будет каждый раз новый приходить то смысла в memo не будет

const MemoCanBeOpen = React.memo(({ isOpen, children }) => {

return (
<>
<div>{isOpen ? 'Скрыть' : 'Открыть'}</div>
{isOpen && children}
</>
);
});

const Accordion = () => {
const [openId, setOpenId] = useState(null);

const content = React.useMemo(() => <Content/>, [])

return (
<>
{items.map((item, index) => (
<div key={item.id} onClick={() => setOpenId(item.id)}>
<MemoCanBeOpen isOpen={openId ===
</div>
))}
</>
);
};

[wztnfns]

Супер, спасибо большое!
Крутотейшие ролики)

Возможно было бы интересно и с ангуляром что то, если у вас есть опыт)

Но в любом случае класс)
Если будет мысль сделать. Приложение какое с таким же подробным описанием, только за!)

[vitabramov]

Хороший пример на мемоизацию - таблица с множеством колонок и строк, в которой есть ячейки с картинками, инпутами (инлайн редактирование), выпадающими фильтрами и тд. Может там пригодится мемоизация?

[quiet_right]

Предположим, есть два компонента Parent и Child
У Child есть свойство data - объект, определяемый в Parent, это единственный пропс

Чтобы избежать повторного рендера мы в Parent оборачиваем data в useMemo
А Child в Memo (MemoChild)

Но что если вместо этого определять не значение data в useMemo и прокидывать его пропсом в MemoChild обеспечивая проверку Memo, а сразу определять внутри него data и немемоизированный Child рендерить, это все спички, но один if уберем)

[topsportsevents]

Запиши пожалуйста видео в твоем стиля про библиотеку useSWR . И про кэширование было бы круто рассказать .

[narekghukasyan]

супер , как ты думаешь есть что рассказать про react lazy load ?

[gatrianL]

ну все, я теперь понял что эта вся мемоизация не нужна)

[Idnt_know]

Может быть мемоизация компонента может помочь в случае когда хочешь передать его как параметр в другой компонент?

[bogdanshelomanov]

const menu = useMemo(() => {
const component = Menu();
return component;
}, []);

вот так замемоизируешь, рендер не будет повторный