🎮 Создание пользовательского хука useFormStatus

Проблема: повторное использование логики состояния формы может привести к дублированию кода и усложнению поддержки.

Решение: в книге «Learn React Hooks, 2nd Edition» автор предлагает создать пользовательский хук useFormStatus для инкапсуляции логики состояния формы, что позволяет повторно использовать её в разных компонентах.

Пример кода:

import { useState } from 'react';

function useFormStatus() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState(null);

  const submit = async (action) => {
    setIsSubmitting(true);
    try {
      await action();
    } catch (err) {
      setError(err);
    } finally {
      setIsSubmitting(false);
    }
  };

  return { isSubmitting, error, submit };
}

function LoginForm() {
  const { isSubmitting, error, submit } = useFormStatus();

const handleSubmit = () => {
    submit(async () => {
      // Асинхронная отправка данных
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
      {error && <p>{error.message}</p>}
    </form>
  );
}

Преимущества:

— Инкапсуляция логики состояния формы.
— Повторное использование кода.
— Упрощение компонентов форм.

➡️ Еще больше полезных книг — в нашем канале @progbook

🐸 Библиотека фронтендера

#буст

🔧 Как правильно использовать requestIdleCallback для второстепенных задач

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

Почему важно:

📍 Делает сайт отзывчивее

📍 Переносит «тяжёлые» задачи на потом

📍 Улучшает производительность без ущерба для UX

Как использовать:

1. Запускаем задачу, когда браузер «свободен»:

requestIdleCallback(() => {
  // Эта операция не помешает UI
  localStorage.setItem('draft', JSON.stringify(formData));
});

2. Полифил для браузеров без поддержки (например, Safari, Firefox):

const ric = window.requestIdleCallback || function (cb) {
  return setTimeout(() => cb({ timeRemaining: () => 0 }), 1);
};

3. Пример: предзагрузка данных во время простоя

requestIdleCallback(() => {
  fetch('/api/hints')
    .then(res => res.json())
    .then(storeHints);
});

4. Используем timeRemaining() для контроля:

requestIdleCallback(deadline => {
  while (deadline.timeRemaining() > 0 && tasks.length) {
    runTask(tasks.pop());
  }
});

Когда использовать:

— Метрики и логирование

— Предзагрузка и кеширование

— Фоновая запись в IndexedDB

— Подсказки, превью и прочий «сервисный» UI

⚠️ requestIdleCallback не поддерживается в Safari и Firefox. Для кроссбраузерности используйте полифил, как показано выше.

🐸 Библиотека фронтендера

#буст

🐸 Библиотека фронтендера

#развлекалово

🐶 Как отладить CSS, чтобы он не ломался в Safari и не стыдно было читать

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

Промпт:

Review my CSS and fix cross-browser issues, improve maintainability, and add comments explaining non-obvious parts.

Чем полезен:

➡️ Показывает несовместимые свойства и предлагает fallbacks

➡️ Рефакторит дублирующиеся или переопределяющиеся правила

➡️ Добавляет комментарии к нестандартным решениям, чтобы через месяц не забыть

💡 Дополнительно можно запросить:

— Советы по организации CSS (например, BEM, layers, atomic CSS)

— Рекомендации по улучшению производительности (критические стили, purge)

— Интеграцию с Autoprefixer или PostCSS

🐸 Библиотека фронтендера

#буст