Самый быстрый способ передачи 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

⚛️ Быстрый совет по React

❌ Преобразование данных в useEffect.

✅ Делаем это во время рендеринга ↓

#react

✍️ @React_lib

⚛️ useEffect становится проще в React, когда вы перестаете использовать его для:

1. Выведения/вычисления нового состояния.
2. Инициализации состояния на основе props.
3. Получения данных.

Вместо этого:
1. Делайте это в рендере.
2. Инициализируйте состояние в useState.
3. Используйте либо обработчики событий, либо react-query для этого.

#react

✍️ @React_lib

Дублирование JSX - верный признак того, что вам нужно создать компонент.

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

Обратите внимание на слово *может*

#react

✍️ @React_lib

Полиморфизм в React: 2 паттерна, которые нужно знать

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

В этом тексте я покажу вам, как использовать два наиболее известных способа реализации полиморфизма в React: паттерны "as" и "asChild".

https://www.bekk.christmas/post/2023/1/polymorphism-in-react

#react

✍️ @React_lib

⚛️ Как правильно использовать useCallback в React

#react

✍️ @React_lib

⚛️ Знали ли вы, что можно использовать пересечение типов для легкого расширения нативных свойств элементов в React

#react

✍️ @React_lib

⚛️ React useEffect vs useLayoutEffect

#react

✍️ @React_lib

⚛️ Как типизировать обобщенные компоненты в React с помощью TypeScript

#react

✍️ @React_lib

⚛️ Знаете ли вы, как и когда использовать flushSync в React?

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

Полезно при интеграции с сторонним кодом, таким как браузерные API или UI-библиотеки.

#react

✍️ @React_lib

⚛️ Как работает процесс рендеринга в React

#react

✍️ @React_lib

⚛️ Совет по React: Используйте кастомный хук для управления состояниями массивов в ваших компонентах.

#react

✍️ @React_lib

⚛️ Совет по React: Если вам нужно импортировать серверный компонент в клиентском компоненте, передайте его как prop (children) ↓

#react

✍️ @React_lib

⚛️ Одной из самых сложных вещей для меня при изучении React была разделение ответственности.

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

Вот короткое видео о том, как это сделать

#react

✍️ @React_lib

❌ Избегайте отслеживания изменений ref с помощью useEffect() в React.

✅ Вместо этого используйте функцию обратного вызова ref.

#react

✍️ @React_lib

Структура приложения React.js - лучшие практики

В этой статье рассматриваются лучшие практики структурирования приложений React.js с упором на три основных подхода: Группировка по признакам, Группировка по типу файлов и гибридный подход. В руководстве также рассказывается о том, как интегрировать в структуру приложения современные возможности React, такие как Redux, Hooks, Stateful Container Components, Context API, Testing libraries и Styled-компоненты.

https://www.dotnetcurry.com/reactjs/folder-structure-for-reactjs

✍️ @React_lib

React и жизнь после сборки

Бывает что на руках есть лишь «бинарная» сборка сайта на модном фреймворке вроде Angular или React, в которой «срочно надо что‑то поправить». А исходного кода нет. Есть лишь вы, «бандл» с обфрусцированным JavaScript‑кодом внутри и горящие сроки. Рассказываю что с этим можно cделать кроме увольнения.

https://habr.com/ru/articles/839464/

✍️ @React_lib

Подборка репозитории GitHub, необходимые каждому разработчику на React


1. 30 Days of React
30 Days of React challenge - это пошаговое руководство по изучению React за 30 дней.

2. Awesome React
Коллекция удивительных вещей, связанных с экосистемой React

3. React Bits
✨ React паттерны, техники, советы и рекомендации ✨

4. React Typescript Cheatsheett-cheatsheets/react
Шпаргалки для опытных разработчиков React, начинающих работать с TypeScript

5. ReactJS Interview Question
Список из 500 вопросов и ответов на собеседования по ReactJS.

✍️ @React_lib

Больше, чем нужно знать о ReactDOM.flushSync

flushSync является частью того, что я называю "Rare React"; это любопытные и необычные части, внешнее кольцо API, редко используемые особые инструменты. И именно это мне нравится изучать и писать об этом статьи в блог.

Итак, что делает ReactDOM.flushSync и когда это полезно?

Название предполагает, что он выполняет синхронную очистку. Но что такое "очистка", что именно очищается, и когда это должно происходить синхронно? Для чего это нужно?

function Demo() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount((c) => c + 1);
    setFlag((f) => !f);
  }

  return (
    <div>
     <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>
        {count}
      </h1>
    </div>
  );
}

https://julesblom.com/writing/flushsync

✍️ @React_lib