Как использовать автофокус с помощью React Hooks

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

https://blog.openreplay.com/how-to-autofocus-using-react-hooks/

✍️ @React_lib

Избегаем ошибки гидратации с помощью useSyncExternalStore

Статья рассматривает, как разработчики могут эффективно справляться с проблемами, связанными с несовпадением данных при гидратации в React. Гидратация — это процесс, при котором серверный рендеринг синхронизируется с клиентским. Ошибки на этом этапе могут приводить к неожиданным багам.

Основная идея заключается в использовании хука useSyncExternalStore, который помогает синхронизировать состояние внешнего источника данных с React-компонентами. Это особенно полезно для библиотек или приложений с критичными требованиями к корректности данных, таких как те, что полагаются на глобальные состояния или сложные асинхронные обновления.

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

const emptySubscribe = () => () => {}

function LastUpdated() {
  const date = React.useSyncExternalStore(
    emptySubscribe,
    () => lastUpdated.toLocaleDateString(),
    () => lastUpdated.toLocaleDateString('en-US')
  )

  return <span>Last updated at: {date}</span>
}

https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store

✍️ @React_lib

No Outer margin

В статье обсуждается проблема использования внешних отступов (outer margin) в веб-дизайне. Автор объясняет, почему лучше избегать их в пользу внутренних отступов (padding) для компонентов. Основной аргумент: внутренние отступы делают дизайн более предсказуемым и гибким, упрощая настройку элементов и их позиционирование.
Статья также содержит примеры и рекомендации для практического применения в современной веб-разработке.

Что такое «внешние» отступы и padding?

Здесь термин «внешние» относится к отступам, которые выходят за границы border-box пользовательского интерфейса. В основном это касается случаев, когда margin применяется к самому внешнему элементу компонента.

function Card({ children }) {
  return (
    // WARNING: Don't do this! It is an outer `margin`!
    <div style={{ marginBottom: '1rem' }}>{children}</div>
  )
}

function EmployeeCard({ name, occupation }) {
  return (
    <Card>
      {/**
       * This is fine! We can use internal margins for layout,
       * but there are better ways we'll learn later!
       */}
      <div style={{ marginBottom: '1rem' }}>{name}</div>
      <div>{occupation}</div>
    </Card>
  )
}

https://kyleshevlin.com/no-outer-margin/

✍️ @React_lib

Построение фильтра поиска в реальном времени в 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