Реальный пример работы startTransition

Ricky Hanlon показал подробный пример работы API startTransition из React 18, с объяснением работы API и того, как работает приложение в perfomance профиле.   

В примере показан слайдер и компонент с «тяжелыми вычислениями», который занимает много времени для рендера, особенно на слабых устройствах. После изменения значения слайдера происходил ререндер тяжелого компонента. Самый оптимальный вариант рендера тяжелого компонента в React 17 через debounce, т.е. откладывая рендер на изменения слайдера. 

В React 18 изменение значения слайдера достаточно обернуть в startTransition, и React уже сам выполнит эффективный рендер компонента. После рендера изменения значения слайдера, React рендерит transition результатов. Так как в этом изменение включен параллельный рендеринг, React делает три новые вещи:
- Yielding: каждые 5 мс React ставит работу рендера на паузу, чтобы дать браузеру сделать другую работу, например запустить промисы. 
- Прерывание: React ставит рендер на паузу, если необходимо отрендерить более приоритетный компонент, например ползунок слайдера из примера.
- Отбрасывание старых результатов: когда React начинает рендерить после прерывания, то он отбрасывает старый компонент и рендерит новый.

https://github.com/reactwg/react-18/discussions/65

✍️ @React_lib

Инструменты для отладки React приложений

Если приложение работает медленно, то для поиска причины тормозов можно использовать специальные инструменты:

- React DevTools Базовый инструмент отладки React приложения. Умеет снимать perfomance профиль приложения, показать какой компонент отрендерился и сколько времени на это потребовалось.

- Why Did You Render (WDYR) Стандартного React DevTools может не хватать, поэтому в процесс отладки можно добавить WDYR. Этот инструмент находит компоненты, рендер которых можно избежать. Например, значением пропса компонента объявляется объект, поэтому этот компонент будет рендерится каждый раз, когда компонент создается. Найденную информацию WDYR отправляет в логи браузера.

- React Render Tracker Инструмент для отслеживания производительности приложения

✍️ @React_lib

React Hooks: useState

Хук useState() предназначен для управления состоянием компонента. Данная функция возвращает пару геттер/сеттер - значение начального состояния и функцию для обновления этого значения. Функцию имеет следующую сигнатуру: const [value, setValue] = useState(defaultValue).

Обновление одного состояния

const UpdateState = () => {
const [age, setAge] = useState(19)

const handleClick = () => setAge(age + 1)

return (
<>
<p>Мне {age} лет.</p>
<button onClick={handleClick}>Стать старше!</button>
</>
)
}


Обновление нескольких состояний

const MultipleStates = () => {
const [age, setAge] = useState(19)
const [num, setNum] = useState(1)

const handleAge = () => setAge(age + 1)
const handleNum = () => setNum(num + 1)

return (
<>
<p>Мне {age} лет.</p>
<p>У меня {num} братьев и сестер.</p>
<button onClick={handleAge}>Стать старше!</button>
<button onClick={handleNum}>Больше братьев и сестер!</button>
</>
)
}


Обновление объекта состояния

const StateObject = () => {
const [state, setState] = useState({ age: 19, num: 1 })

const handleClick = (val) =>
setState({
...state,
[val]: state[val] + 1
})

const { age, num } = state
return (
<>
<p>Мне {age} лет.</p>
<p>У меня {num} братьев и сестер.</p>
<button onClick={() => handleClick('age')}>Стать старше!</button>
<button onClick={() => handleClick('num')}>
Больше братьев и сестер!
</button>
</>
)
}


Счетчик

const CounterState = () => {
const [count, setCount] = useState(0)

return (
<>
<p>Значение счетчика: {count}.</p>
<button onClick={() => setCount(0)}>Сбросить</button>
<button onClick={() => setCount((prevVal) => prevVal + 1)}>
Увеличить (+)
</button>
<button onClick={() => setCount((prevVal) => prevVal - 1)}>
Уменьшить (-)
</button>
</>
)
}


Более сложный пример

const Profile = () => {
const [profile, setProfile] = useState({
firstName: 'Иван',
lastName: 'Петров'
})

const handleChange = ({ target: { value, name } }) => {
setProfile({ ...profile, [name]: value })
}

const { firstName, lastName } = profile
return (
<>
<h1>Профиль</h1>
<form>
<input
type='text'
value={firstName}
onChange={handleChange}
name='firstName'
/> <br />
<input
type='text'
value={lastName}
onChange={handleChange}
name='lastName'
/>
</form>
<p>
Имя: {firstName} <br />
Фамилия: {lastName}
</p>
</>
)
}

✍️ @React_lib

Библиотеки для работы с формами в React

- Formik. Одна из наиболее популярных библиотек для работы с формами. Умеет отправлять форму асинхронно, поддерживает TypeScript, а также валидацию через Yup или Joi. В Formik входит набор компонентов для создания формы: Form, Field, ErrorMessage, но так же форму можно создать используя хук useFormik. 

- React Hook Form. Гибкая библиотека для создания форм черех хуки. Поддерживает TypeScript и React Native. Умеет делать валидацию полей и формы, подключается к нативным инпутам через ref атрибут. Если инпут кастомный, например, из Material UI, то предлагает использовать обертку в виде компонента Controller. 

- React Final Form. Библиотека использует паттерн Observer для обновления состояния компонентов и ре-рендера. Поддерживает валидацию полей и формы, в состав библиотеки входят как компоненты Form, Field, так и хуки. Мейнтенер библиотеки Erik Rasmussen, который также был автором Redux Form, считает ключевой фичей React Final Form высокую производительность.

✍️ @React_lib

Пример использования useDeferredValue

Дэн Абрамов поделился примером использования хука useDeferredValue из React 18:

function Form() {
const [state, setState] = useState({ value: "hello" })
const deferredState = useDeferredValue(state)
// ...


Используйте deferredState в компонентах, рендер которых не срочный: например, вычисление сложной логики. Это поведение напоминает debounce. Использовать state напрямую можно в элементах пользовательского ввода, например, input.

✍️ @React_lib

UI-компоненты для React: топ-10 библиотек и фреймворков

https://dev.to/nilanth/10-react-packages-with-1k-ui-components-2bf3

✍️ @React_lib

Пишем продвинутый планировщик с использованием React, Nest и NX. Часть 1: настройка проекта

В серии статей мы поэтапно разработаем продвинутое приложение-планировщик. Сначала создадим и настроим монорепозиторий c помощью NX, разработаем интерфейс с помощью React, добавим backend на основе NestJS, и, наконец, подключим базу данных MongoDB.

✍️ @React_lib

Погружаемся в React Suspense API

https://blog.bitsrc.io/understanding-the-suspense-api-in-react-18-bbea3f6f6df1

✍️ @React_lib

Error Boundaries в React: препарируем лягушку

Представим, что у нас есть приложение на React, в котором можно читать и писать отзывы. Пользователь открыл список отзывов, пролистал его, нажал кнопку «Написать отзыв». Форма написания отзыва открывается в попапе, над списком. Пользователь начинает вводить текст, свой e-mail. Вдруг валидация почты срабатывает с ошибкой, которую разработчики забыли обработать. Результат — белый экран. React просто не смог ничего отрендерить из-за этой ошибки в каком-то попапе. Далее

✍️ @React_lib

Руководство - шпаргалка по рендерингу React

Когда происходит повторный рендеринг компонента react? Что может вызвать повторный рендеринг, и как предотвратить ненужный рендеринг? Вот краткая шпаргалка, к которой вы можете обратиться каждый раз, когда будете задавать себе эти вопросы.

https://alexsidorenko.com/blog/react-render-cheat-sheet/

✍️ @React_lib

Распространенные ошибки при использовании React Testing Library.

https://te.legra.ph/Rasprostranennye-oshibki-pri-ispolzovanii-React-Testing-Library-06-29

✍️ @React_lib

Хуки react-router

Используя библиотеку react-router для получения текущего состояния роутера и выполнения навигации, можно использовать кастомные хуки, которые входят в react-router-dom:

- useHistory. Возвращает объект history, который позволяет изменить состояние роутера. Например, можно перенаправить пользователя на другой URL, либо вернуться на предыдущую страницу. 

- useLocation. Возвращает объект location, представляющий текущий URL. Этот хук аналогичен useState, который возвращает новый объект location при смене текущего URL.

- useParams. Хук для доступа к параметрам URL, который установлен в роуте.

- useRouteMatch. Этот хук пытается сопоставить текущий URL таким же образом, как и <Route>. Может использоваться взамен компонента <Route>, если необходимо отрендерить что-то при заданном URL.

- useQuery. Хук не входит в список стандартных, но его можно реализовать используя useLocation.

https://reactrouter.com/web/api/Hooks

✍️ @React_lib

Организация react-компонентов с помощью dot-notation и почему я часто прибегаю именно к этому способу

Компонентный подход является основополагающим при создании приложений с помощью react. Компоненты - это главные строительные блоки, которые в своей композиции помогают реализовать сложные системы. В основе каждого компонента, в идеале, всегда лежит какой-то обособленный набор функционала, своего рода микро-решение микро-задачи. Далее
✍️ @React_lib

Кастомный React рендерер

Когда React рендерит приложение и обновляет DOM, то используется React DOM. При рендере приложения на сервере используется модуль react-dom/server. Для мобильных приложений для рендера используется модуль react-native. 

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

Модуль react предоставляет API для определения компонентов, а реализация находится в “рендерерах”. Для связи хуков с реализацией используется объект “диспатчер”. При вызове useState, вызов перенаправляется текущему диспатчеру рендерера. Об этом есть подробная статья в блоге Дэна Абрамова.

Для разработки своего рендерера необходимо описать объект “host config”, в котором описаны методы реализации API React. Выглядит так:


const HostConfig = {
createInstance(type, props) {
// e.g. DOM renderer returns a DOM node
},
// ...
supportsMutation: true, // it works by mutating nodes
appendChild(parent, child) {
// e.g. DOM renderer would call .appendChild() here
},
// ...
};


https://github.com/facebook/react/blob/main/packages/react-reconciler/README.md

✍️ @React_lib

Библиотека SWR для получения данных. Библиотека представляет из себя набор хуков, основной из которых это useSWR. Помимо получения данных, есть возможность изменения данных. Изменение данных также возможно по стратегии SWR - сначала локально, потом отправляем запрос на сервер.

SWR происходит от stale-while-revalidate, это стратегия кэширования ресурсов, в котором сначала возвращаются данные из кэша, а потом происходит запрос на получение свежих данных. Преимущество такой стратегии кэширования заключается в увеличении видимой производительности сайта, пользователям приходится меньше ждать и видеть спиннеры загрузки.


Особенности библиотеки: поддержка стратегии SWR, автоматическая ревалидация кэша, поддержка API Suspense. Авторами библиотеки являются разработчики Next.js.

https://swr.vercel.app/

✍️ @React_lib

Cтилизация React приложения

Если ты новичок в React, тебе может быть интересно, почему существует так много разных руководств, которые учат различным способам стилизации React приложения. По правде говоря, мы всё еще пытаемся понять, как лучше поступить. Далее

✍️ @React_lib

Шпаргалка по React.js

https://devhints.io/react

✍️ @React_lib