Типы событий в React и TypeScript

При работе с React и TypeScript вы часто сталкиваетесь с подобной ошибкой:

const onChange = (e) => {};
Parameter 'e' implicitly has an 'any' type.
<input onChange={onChange} />;

Не всегда понятно, какой тип следует присвоить элементу e внутри функции onChange.
Это может произойти с onClick, onSubmit или любым другим обработчиком событий, которые получают элементы DOM.
К счастью, есть несколько решений:

https://www.totaltypescript.com/event-types-in-react-and-typescript

#react

✍️ @React_lib

Довольно круто, что архитектура React Fiber позволяет избежать переполнения стека

Этот рекурсивный компонент обычно переполняется
«Maximum call stack size exceeded».

После этого PR он больше не будет переполняться

#react

✍️ @React_lib

⚛️ Совет по React + Typescript

Вы можете использовать `typeof` для типизации предполагаемых типов

#react

✍️ @React_lib

⚛️ Совет React 💡

Используйте строковые литералы + тип union в typescript для указания точных строковых значений в props

#react

✍️ @React_lib

Самый быстрый способ передачи state в JavaScript

В приложениях Redux с серверным рендерингом часто приходится передавать state магазина с сервера на клиент. Передача больших state может быть медленной, поэтому в 2019 году Хенрик Йоретаг провел бенчмаркинг трех подходов, чтобы определить наиболее производительный способ:

// "Plain object":
window.__STATE__ = {"foo":"bar"}

// "Invalid mime type":
<script type="mime/invalid" id="myState">{"foo":"bar"}</script>
window.__STATE__ = JSON.parse(window.myState.innerHTML)

// "Just parse":
window.__STATE__ = JSON.parse("{\"foo\":\"bar\"}")

https://calendar.perfplanet.com/2023/fastest-way-passing-state-javascript-revisited/

#react

✍️ @React_lib

useTransition в React

#react

✍️ @React_lib

⚛️ Как сделать контекстно-ориентированные хуки для запросов в React

#react

✍️ @React_lib