Заметки про React

2022-08-31 12:20:08 Почему React ре-рендерит

Джошуа Комо в своем блоге в двух частях рассказал, почему React ре-рендерит компоненты и как этого избежать.

Основная причина для рендера компонента – изменение стейта. При изменении стейта ре-рендерятся дочерние компоненты. Чтобы избежать лишнего ре-рендера компонента при рендере родительского, используйте мемоизацию – memo.

React оптимизирует процесс рендера, поэтому сам по себе ре-рендер не имеет большого значения. Однако в некоторых случаях ре-рендер “тяжелого” компонента может занять много времени и повлиять на производительность приложения. В случаях, когда нужно оптимизировать количество ре-рендеров, используют хуки useMemo и useCallback.

useMemo используется для кэширования вычислений между ре-рендерами. Также useMemo используется для сохранения ссылки на одно и то же значение между ре-рендерами для передачи в пропсы мемоизированного компонента. useCallback делает то же самое, что и useMemo, но только для функций.

https://www.joshwcomeau.com/react/why-react-re-renders/
https://www.joshwcomeau.com/react/usememo-and-usecallback/ Открыть/Комментировать

2022-08-29 11:50:03 Используем React Query вместе с React Router

В React Router 6.4 добавится концепция получения данных – loader и action, как в фреймворке Remix.
Используя проп loader можно объявить, какие данные нужно запросить для отображения роута и получить их в роут через хук useLoaderData. Для изменения данных и их инвалидации используется проп action, а вызывается он при сабмите формы. Однако, React Router не берет на себя обязанность кэширования данных, поэтому имеет смысл использовать библиотеки запросов с кэшированием, например, React Query.

Доминик Дорфмайстер рассказал, как можно объединить React Router и React Query вместе, чтобы использовать преимущества обеих библиотек. React Router вызывает loader получения данных раньше, чем компонент монтируется, а React Query умеет кэшировать данные и дает возможность использовать API запроса, например, refetchOnWindowFocus.

// src/routes/contacts.jsx
import { useQuery } from '@tanstack/react-query'
import { getContact } from '../contacts'

// define your query
const contactDetailQuery = (id) => ({
queryKey: ['contacts', 'detail', id],
queryFn: async () => getContact(id),
})

// needs access to queryClient
export const loader =
(queryClient) =>
async ({ params }) => {
const query = contactDetailQuery(params.contactId)
// return data or fetch it
return (
queryClient.getQueryData(query.queryKey) ??
(await queryClient.fetchQuery(query))
)
}

export default function Contact() {
const params = useParams()
// useQuery as per usual
const { data: contact } = useQuery(contactDetailQuery(params.contactId))
// render some jsx
}


Компонент, где объявляется роут:

const queryClient = new QueryClient()
export default function Routes() {
return (
path="contacts/:contactId"
element={}
// pass the queryClient to the route
loader={contactLoader(queryClient)}
/>
);
}


Обратите внимание на то, что loader - не хук, поэтому не может использовать хук useQueryClient для получения инстанса клиента, и его нужно прокидывать в loader вручную.
На данный момент React Router 6.4 еще находится в бете, но уже можно посмотреть на сайте документации, как будут работать новые концепции получения данных.

https://tkdodo.eu/blog/react-query-meets-react-router

400 viewsIlmir Shaikhutdinov, 08:50

Открыть/Комментировать

2022-08-26 11:50:06 Мигрируем с Create React App на Vite

Если вы задумывались о миграции приложения с Create React App на Vite, то Катал Мак Доннача в своем блоге собрал инструкцию как это сделать безболезненно.

Единственный минус Vite при работе с проектом на TypeScript – он не проверяет типы при сборке, а сразу транспилирует в JavaScript с помощью esbuild. Поэтому скорость сборки в 20-30 быстрее чем собирать с проверкой типов через tsc. Если это критично, то процесс сборки можно дополнить командой проверки типов tsc --noEmit. В остальном, Vite умеет все то же самое что и CRA, но гораздо быстрее.

https://cathalmacdonnacha.com/migrating-from-create-react-app-cra-to-vite Открыть/Комментировать

2022-08-24 12:30:39 Создаем функцию контекста в JavaScript

React популяризировал идею распространения значений через контекст, с помощью которого можно избавиться от проп-дриллинга и синхронизировать состояние компонента в разных частях приложения.
Хотя вариант использования контекста в UI фреймворках очевиден, потребность подобного API существует и не только в UI фреймворках. Создадим свою версию Context API для фреймворка юнит тестирования:

describe('calculator: Add', () => {
it("Should correctly add two numbers", () => {
expect(add(1, 1)).toBe(2);
});
});


После успешного прохождения теста в консоль должна выводиться запись: “calculator: Add > Should correctly add two numbers”.
Для того, чтобы это сообщение вывелось, нам нужно как-то прокинуть описание describe в функцию it. Для этого нам поможет концепция контекста.
Эвятар Алуш в своей статье на Smashing Magazine поделился своей реализацией контекста, которую он использовал в библиотеке для валидации форм Vest.

function createContext() {
let contextValue = undefined;

function Provider(value, callback) {
contextValue = value;
callback();
contextValue = undefined;
}

function Consumer() {
return contextValue;
}

return {
Provider,
Consumer
}
}


https://www.smashingmagazine.com/2022/08/react-context-propagation-javascript/ Открыть/Комментировать

2022-08-23 11:30:01 Освой React за 3 месяца с Яндекс Практикумом!

Уже 25 августа стартует новый поток курса «React‑разработчик». В рамках программы вы получите все необходимые знания для разработки современных приложений на React и Typescript - 160 часов теории и практики.

Что вас ждёт во время учёбы ↓

Напишите своё веб-приложение на React и Typescript, покроете его юнит-тестами
Освоите хуки, State Management, TypeScript, Jest и Cypress
Напишите веб-приложение космической бургерной со сложной функциональностью: главной страницей, личным кабинетом и лентой заказов
А после?

Трудоустройство
78% выпускников Практикума трудоустраиваются после обучения.
Выпускников Практикума нанимают Яндекс, ВТБ, МТС, Перекрёсток, Playrix, Wildberries, Сбер, Level.Travel, 2GIS, Yota, Ozon и многие другие компании.
Диплом Яндекса
Это официальное подтверждение того, что вы прошли обучение в Практикуме.
Портфолио
Вы сделаете реальные проекты (сайты и веб-приложения) для портфолио — вам будет, что показать на собеседовании.

#реклама Открыть/Комментировать

2022-08-22 12:10:07 Как избежать useEffect с помощью ref колбеков

Реф – это обертка, в которой может храниться любое значение, но чаще всего в ней хранят DOM узлы. В каждом HTML элементе есть зарезервированный проп ref, который позволяет получить доступ к DOM узлу после рендера компонента.

const ref = React.useRef(null)

return


Одна из типичных задач при работе с рефом – сделать фокус у инпута при инициализации компонента. Один из вариантов, как это можно сделать, через useEffect:

const ref = React.useRef(null)

React.useEffect(() => {
ref.current?.focus()
}, [])

return


В целом, это способ рабочий. Однако в более сложных ситуациях, когда реф будет передаваться во вложенный компонент, то может возникнуть ситуация, когда элемент с рефом будет рендерится лишь при определенном условии. Тогда useEffect вызовется с несуществующим рефом.

Более оптимальный способ обращения к рефу – через колбек реф. Концептуально реф у React элемента – это функция, которая вызывается после того, как компонент был отрендерен. Поэтому можно передать колбек в реф и получить доступ к DOM узлу только после рендера элемента.

const ref = React.useCallback((node) => {
node?.focus()
}, [])

return


Если компонент размонтируется, то колбек будет вызван еще раз с аргументом равным null, поэтому стоит проверять переданный аргумент перед использованием.

https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs Открыть/Комментировать

2022-08-19 13:30:25 Mantine 5.0 – полнофункциональная библиотека компонентов

Mantine – библиотека компонентов для React 18, написанная на TypeScript и Emotion. Включает более 100 готовых компонентов и 40 хуков.

Библиотека разделена на модули, которые можно устанавливать по необходимости. Например, есть модули для работы с формами (аналог react-hook-form) и для работы с датами (компоненты календаря, выбора даты). Также есть модуль для обеспечения серверного рендера компонентов.

Библиотека поддерживает глобальную кастомизацию стилей через создание темы. Также можно кастомизировать отдельные компоненты в месте использования. Есть поддержка темной темы.

import { Slider } from '@mantine/core';
import { useHover } from '@mantine/hooks';

export function SliderHover() {
const { hovered, ref } = useHover();

return (
defaultValue={40}
min={10}
max={90}
ref={ref}
label={null}
styles={{
thumb: {
transition: 'opacity 150ms ease',
opacity: hovered ? 1 : 0,
},

dragging: {
opacity: 1,
},
}}
/>
);
}


https://mantine.dev/

845 viewsIlmir Shaikhutdinov, 10:30

Открыть/Комментировать

2022-08-17 13:10:04 Различие между useEffect и useLayoutEffect

Хуки useEffect и useLayoutEffect предназначены для выполнения сайд-эффектов в компоненте и имеют одинаковые сигнатуру. Но цели их использования разные.

useEffect запускается асинхронно после отрисовки браузером DOM изменений.

useLayoutEffect запускается синхронно после DOM изменений, до отрисовки браузера.

Это значит, что если необходимо делать DOM изменения или какую-либо анимацию, то больше подходит useLayoutEffect. В остальных случаях необходимо использовать useEffect. Если выполнять DOM изменения в useEffect, то изменение отобразится в следующем тике браузерного рендера, что приведет к эффекту “мерцания”.

В React 18 было изменено поведение useEffect. Теперь он запускается синхронно, если это результат дискретного ввода. Дискретный ввод — это тип события, при котором результат одного события может повлиять на поведение следующего, например клик. Есть следующий пример:

const App = () => {
const [showToolTip, setShowTooltip] = useState(false);
const buttonRef = useRef();
const tooltipRef = useRef();

useEffect(() => {
if (buttonRef.current == null || tooltipRef.current == null) return;

const { left, top } = buttonRef.current.getBoundingClientRect();
tooltipRef.current.style.left = ${left + 120}px;
tooltipRef.current.style.top = ${top - 20}px;
}, [showToolTip]);

return (

)
};


Если запустить пример выше в React 17, то при клике на кнопку произойдет эффект “мерцания” – сначала тултип отобразится, потом расположится в нужной позиции. Если использоваться useLayoutEffect, то проблема исчезнет. Если запустить пример в React 18, то эффекта “мерцания” не будет и с useEffect, т.к. эффект произошел из-за дискретного ввода – клика по кнопке.

https://blog.saeloun.com/2022/07/28/difference-between-useeffect-and-useeffectlayout-hooks Открыть/Комментировать

2022-08-15 11:40:01 Docusaurus 2.0

Вышла новая версия генератора статических сайтов Docusaurus. Он позволяет создавать сайты на React с фокусом на контент и поддерживает Markdown разметку из под коробки. По словам разработчиков, Docusaurus как create-react-app, но для создания документации, блогов и лендингов.

В новой версии появились новые фичи:
- MDX. Можно добавлять интерактивные React компоненты в Markdown разметку.
- Плагины. У Docusaurus модульная архитектура с системой плагинов. Основные фичи, такие как блог, документация, страницы и поиск можно улучшать плагинами.
- Темизация. Возможность очень гибкой кастомизации стилей, либо создание и использование своей собственной темы.

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

https://docusaurus.io/blog/2022/08/01/announcing-docusaurus-2.0 Открыть/Комментировать

2022-08-12 14:01:52 Обзор способов локализации React приложений

При разработке мультиязычного сайта необходимо выбрать инструмент для хранения и отображения переводов локалей сайта.
Для React есть несколько библиотек, которые позволяют работать с несколькими локалями:

react-i18next
Библиотека для перевода локалей на несколько языков:
- Возможность хранения переводов как локально в json файлах, так и на стороннем сервере, подгружая локали через плагин на бэкенде.
- Поддержка TypeScript: типизация ключей.
- Есть хуки для перевода строк и компонент Trans для перевода JSX дерева.
- Есть поддержка популярных фреймворков: Next.js, Gatsby, Remix.

import React from 'react';
import { useTranslation } from 'react-i18next';

export function MyComponent() {
const { t, i18n } = useTranslation();
// or const [t, i18n] = useTranslation();

return

{t('my translated text')}

}


react-intl
Библиотека для интернационализации приложения для разных локаций. Использует браузерное API Intl для интернационализации чисел, дат, относительного времени и плюрализации.
Есть как хуки, так и компоненты. Для каждого типа данных есть свой компонент. Например FormattedDate для дат, FormattedNumber для чисел, FormattedMessage для текстовых строк. Чаще всего пользуются последним – FormattedMessage. Также есть поддержка TypeScript.

import {FormattedRelative, useIntl} from 'react-intl';
const MS_IN_DAY = 1e3 * 3600 * 24

const PostDate = ({date}) => {
const intl = useIntl()
return (



)
});


LinguiJS
Библиотека использует ICU Message Format – синтаксис для выражения сообщений, как и react-intl. Библиотека предлагает использовать компонент Trans, внутри которого может быть JSX дерево. Используя babel макросы, LinguiJS переводит теги Trans в ICU MessageFormat. После чего вместо текстовых строк вставляет перевод. Например:

Read the documentation.

В файле c переводом, ключом перевода сообщения выше будет строка Read the <0>documentation..

Также в библиотеке есть CLI скрипты для извлечения сообщений из приложения и компиляции JS файла с локалями. Открыть/Комментировать