Лучшие практики разработки сложных приложений на основе форм с помощью React Hook Form и поддержки TypeScript

Ранее я уже погружался в сферу интеграции React Hook Form с Redux, изучая способы использования возможностей этих двух важнейших инструментов для создания динамических форм в приложениях React. Однако на этом мое путешествие не закончилось. В процессе работы над этим проектом я погрузился в тонкости разработки сложных приложений на основе форм. Глубокое погружение в разработку форм открыло для меня множество повторяющихся паттернов, бесценных лучших практик и идей, которые существенно повлияли на мой подход к коду, принятию решений и архитектурному дизайну - особенно при работе над крупными приложениями на основе форм.

https://orizens.com/blog/best_practices_for_developing_complex_form-based_apps_with_react_hook_form_and_typescript_support/

✍️ @React_lib

Лучшие практики для написания тестов с использованием React Testing Library

В статье рассматриваются способы повышения качества тестов, написанных с использованием React Testing Library. Автор делится практическими советами, которые помогут вам писать более надежные и поддерживаемые тесты. Среди ключевых моментов:

- Как избегать тестирования реализаций и сосредотачиваться на поведении компонентов.
- Почему важно работать с пользовательскими событиями вместо прямого взаимодействия с DOM.
- Использование ARIA-атрибутов для более точного поиска элементов.

Эти подходы помогают создавать тесты, которые лучше отражают реальное использование компонентов и упрощают их сопровождение.

export const Form = ({ saveData }) => {
  const [state, setState] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
    conditionsAccepted: false,
  });

  const onFieldChange = (event) => {
    let value = event.target.value;
    if (event.target.type === "checkbox") {
      value = event.target.checked;
    }

    setState({ ...state, [event.target.id]: value });
  };

  const onSubmit = (event) => {
    event.preventDefault();
    saveData(state);
  };

  return (
    <form className="form" onSubmit={onSubmit}>
      <div className="field">
        <label>Name</label>
        <input
          id="name"
          onChange={onFieldChange}
          placeholder="Enter your name"
        />
      </div>
      <div className="field">
        <label>Email</label>
        <input
          type="email"
          id="email"
          onChange={onFieldChange}
          placeholder="Enter your email address"
        />
      </div>
      <div className="field">
        <label>Password</label>
        <input
          type="password"
          id="password"
          onChange={onFieldChange}
          placeholder="Password should be at least 8 characters"
        />
      </div>
      <div className="field">
        <label>Confirm password</label>
        <input
          type="password"
          id="confirmPassword"
          onChange={onFieldChange}
          placeholder="Enter the password once more"
        />
      </div>
      <div className="field checkbox">
        <input type="checkbox" id="conditions" onChange={onFieldChange} />
        <label>I agree to the terms and conditions</label>
      </div>
      <button type="submit">Sign up</button>
    </form>
  );
};

https://claritydev.net/blog/improving-react-testing-library-tests

✍️ @React_lib

❌ Избегайте использования объектов в качестве зависимостей в React.useEffect()

✅ Вместо этого используйте примитивные ключи

✍️ @React_lib

8 лучших практик проектирования компонентов React.js

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

https://dev.to/blossom/8-best-practices-for-reactjs-component-design-4jn5

✍️ @React_lib

Открытый урок «Оптимизация работы компонентов в React.js».
Когда: 29 января в 20:00 мск.

На вебинаре вы узнаете:
- Как работать с оптимизацией в React.js
- Особенности работы функциональных компонентов и хуков
- Трюк с мемоизацией коллбеков для списка элементов

Встречаемся в преддверии старта курса «React.js Developer» Otus.
Все участники вебинара получат специальную цену на обучение!

Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cHW678

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

⚛️ Если вы используете fetch() в useEffect, вам, вероятно, стоит посмотреть это короткое видео

✍️ @React_lib

React 19: что нового в самой популярной библиотеке для создания интерфейсов? Узнайте первыми!

Новые хуки, улучшения рефов, кастомные элементы — React становится ещё удобнее. И мы готовы рассказать, как использовать это на практике.

Хотите быть на пике технологий? На открытом вебинаре 6 февраля в 19:00 мск разберём, как применять нововведения React 19 в реальных проектах.

Все участники получат скидку на большое обучение «React.js Developer» — идеальный способ прокачать навыки.

Записаться: https://vk.cc/cI3bho

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Эффективное тестирование хуков React с помощью Vitest

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

https://mayashavin.com/articles/test-react-hooks-with-vitest

✍️ @React_lib

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

✍️ @React_lib

Интерактивное руководство по рендерингу в React

В чистом виде React - это библиотека для построения пользовательских интерфейсов. Она настолько проста, что всю ментальную модель можно представить в виде формулы v = f(s) - где ваше представление является просто функцией вашего состояния.

Хотя это уравнение дает нам простую мысленную модель работы React, есть один аспект уравнения, который до сих пор, после стольких лет, кажется, смущает людей. Когда и как именно вызывается f? Или, говоря иначе, когда и как React обновляет представление?

Этой, казалось бы, простой теме посвящено множество постов в блогах, докладов на конференциях и сообщений в твиттере. И все же почему-то даже опытные разработчики React имеют некоторые (часто неизвестные) заблуждения на этот счет.

https://ui.dev/why-react-renders

✍️ @React_lib

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

✅ Вместо этого используйте перечисления (enums).

✍️ @React_lib

🚀 Оптимизация React-приложения: 5 техник, которые работают

Сегодня расскажу вам, как можно ускорить работу React-приложения, если оно начинает тормозить.

1️⃣ Используйте React.iss.onemo
Если ваш компонент ререндерится без причины, оберните его в React.iss.onemo(). Это предотвратит ненужные перерисовки, если пропсы не изменились.

const OptimizedComponent = React.iss.onemo(({ data }) => {
  return <div>{data}</div>;
});

2️⃣ Оптимизируйте контекст с useMemo и useCallback
Частая ошибка — передача в useContext сложных объектов без мемоизации. Используйте useMemo и useCallback для оптимизации.

const value = useMemo(() => ({ user, logout }), [user]);  

3️⃣ Разбейте состояние на атомарные части
Часто программисты хранят весь стейт в одном useState, но лучше разбить его на части. Так обновление одной переменной не будет вызывать ререндер всего компонента.

const [name, setName] = useState("");  
const [age, setAge] = useState(0);

4️⃣ Динамическая подгрузка компонентов (Code Splitting)
Если у вас большое приложение, используйте React.lazy для загрузки компонентов по требованию.

const LazyComponent = React.lazy(() => import("./BigComponent"));

5️⃣ Используйте производительные списки
Если у вас много элементов (список в 1000+ элементов), используйте виртуализацию, например, react-window или react-virtualized.

import { FixedSizeList as List } from "react-window";

<List height={400} itemCount={items.length} itemSize={35}>
  {({ index, style }) => <div style={style}>{items[index]}</div>}
</List>;

✍️ @React_lib

🔥 Оптимизация React-приложения: Код-сплиттинг с React.lazy

Сегодня расскажу о код-сплиттинге в React — мощном инструменте для ускорения загрузки приложения.

Когда наше приложение растёт, бандл становится тяжёлым, а время загрузки — длиннее. Решение? Код-сплиттинг. Он позволяет загружать только нужные компоненты, а не весь код сразу.

Как это работает?
Используем React.lazy() и Suspense, чтобы загружать компоненты только когда они реально нужны.

📌 Пример:

import React, { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <h1>Главная страница</h1>
      <Suspense fallback={<p>Загрузка...</p>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Здесь HeavyComponent загружается только тогда, когда он нужен, а пока он загружается — показывается fallback.

📍 Где это использовать?
✔ Ленивые модули
✔ Большие страницы (Dashboard, Profile)
✔ Админ-панели
✔ Карты, графики, таблицы

Но помни: React.lazy работает только для компонентов. Для остального кода (например, утилит) лучше использовать динамический импорт (import()).

Попробуй внедрить код-сплиттинг в свой проект и скажи, насколько ускорилась загрузка! 🚀

✍️ @React_lib