Построение фильтра поиска в реальном времени в React: Пошаговое руководство

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

https://dev.to/alais29/building-a-real-time-search-filter-in-react-a-step-by-step-guide-3lmm

✍️ @React_lib

⚛️ Совет по React💡

Ввод возвращаемых значений пользовательских хуков с помощью TypeScript

✍️ @React_lib

Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях

Я работаю в Ramblr, это ИИ-стартап, где мы строим на React сложные приложения для аннотирования видео. Недавно мне попалась сложная утечка памяти, которая возникает при одновременном использовании замыканий JavaScript и хука useCallback в React. Поскольку я вырос на .NET, мне потребовалось немало времени, чтобы разобраться в происходящем. Поэтому я решил написать этот пост и рассказать вам, чему меня научила эта ситуация.

Сначала я кратко напомню вам, как устроены замыкания, но можете смело пропустить этот раздел, если вы уже хорошо знаете, как устроен этот механизм в JavaScript.

https://schiener.io/2024-03-03/react-closures

✍️ @React_lib

Лучшие практики разработки сложных приложений на основе форм с помощью 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

🔥Podlodka React Crew – онлайн-конференция для React-разработчиков.

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

Что в программе:

💬 Говорим на одном языке с пользователями: i18n в React-приложениях – Виталий Баев, контрибьютор Next.js и Vite 🌍 Как выбрать инструменты и сделать интерфейс удобным для всех?

📡 OpenTelemetry для фронтенд-разработчика – Валерий Катцин, frontend-разработчик в Точке 📊 Как собирать данные о работе приложения и использовать их для улучшения продукта?

🔥 "Долгожданный" React 19 – Алекс Рассудихин, разработчик с опытом во Vue, React, Next и Astro 🚀 Какие фичи вышли в продакшен, а какие – нет?

🤖 AI Integrated Developer Experience – Марк Байдебура, Senior Full-stack Engineer в Influencer 🧠 Где AI реально помогает, а где пока его лучше не использовать?

📅 Конференция пройдет 10-14 февраля.

Ты не просто узнаешь по новые фичи и подходы, но и определишься, какие из них включить в свой roadmap и как расти дальше.

🔗 Регистрируйтесь: podlodka.io/reactcrew