Иван Акулов про разработку

2021-07-12 16:23:19 Всплывающее меню
Вот, например, есть у вас страничка с 500 строками в таблице: Открыть/Комментировать

2021-07-12 16:23:01 styled-components

В твитере любят писать, что styled-components медленные, но обычно не приводят никаких примеров. Вот вам пара кейсов из практики. Открыть/Комментировать

2021-04-22 14:53:04 ​​useContextSelector

В комментариях рассказали про библиотеку useContextSelector. Это ещё одно решение проблемы: вместо подписки на весь контекст можно подписаться только на нужное поле ↓

useContextSelector скоро, похоже, появится и в самом React-е: RFC · пулл-реквест Открыть/Комментировать

2021-04-22 13:00:23 ​​2) Иногда это невозможно — например, когда signIn и signOut приходят из пропсов. Тогда оберните объект в useMemo ↓

Главное — проследите, чтобы signIn или signOut тоже не менялись при каждой перерисовке. А то useMemo будет каждый раз перевычисляться, и объект всё равно будет разным. Открыть/Комментировать

2021-04-22 13:00:23 ​​Антипаттерн
И вот тут есть проблема. В этом примере value контекста — это объект { signIn, signOut }.

Этот объект создаётся заново каждый раз, когда вызывается AuthWrapper. Из-за этого контекст каждый раз получает новое значение. А при изменении контекста React перерисовывает всё, что подключено к этому контексту.

В итоге каждый раз, когда мы перерисовываем AuthWrapper, React перерисовывает ещё и все зависимые от контекста компоненты. Если компонентов много, это особенно дорого.

shouldComponentUpdate/PureComponent/React.memo() не помогают
React.memo(), PureComponent и shouldComponentUpdate предотвращают перерисовку компонента, если его пропсы и стейт не поменялись. Но они не работают с контекстом; поэтому тут они бессильны.

Как чинить
Чтобы починить, нужно сделать, чтобы объект не менялся каждый раз.

1) Самый простой способ — это вынести его из компонента: Открыть/Комментировать

2021-04-22 13:00:23 ​​ Есть один перформанс-антипаттерн в Реакте, который я встречаю у клиентов.

Пример
Представьте, что есть две функции, которые мы хотим передать в контекст:

function signIn() { ... }

function signOut() { ... }

Как передать их в контекст? Проще всего — вот так: Открыть/Комментировать

2021-03-19 13:00:41 Расскажите про ещё какие-то тулы, которые вы знаете? Открыть/Комментировать

2021-03-19 13:00:41 Font Style Matcher

meowni.ca/font-style-matcher помогает найти фолбэк-шрифт, который похож по размеру на кастомный.

Если на сайте подключён шрифт Merriweather, а фолбэком стоит Georgia (которая визуально меньше), то, когда Merriweather загрузится, страница скакнёт. Из-за этого получится плохой Cumulative Layout Shift.

А вот Font Style Matcher поможет подобрать такой размер Georgia, который максимально похож на Merriweather, и убрать скачки страницы Открыть/Комментировать

2021-03-19 13:00:41 useWhyDidYouUpdate

usehooks.com/useWhyDidYouUpdate — это Реакт-хук, который печатает, почему какой-то компонент перерисовался. Его даже не надо устанавливать — просто скопируйте и вставьте

Идеально работает, чтобы продебажить перформанс одного компонента. И подключается гораздо проще, чем why-did-you-render Открыть/Комментировать

2021-03-19 13:00:41 Data Studio

А вот если вы не собираете данные в аналитику, попробуйте сделать вот такой отчёт: https://datastudiohelp.com/core-web-vitals-in-data-studio-using-the-crux-dashboard/

Открываете шаблон → клонируете к себе, указывая новый адрес сайта → получаете огромный перформанс-отчёт.

Внутри
— Core Web Vitals
— другие метрики типа Time to First Byte или First Paint
— и исторические данные Открыть/Комментировать