Проблема: повторное использование логики состояния формы может привести к дублированию кода и усложнению поддержки.
Решение: в книге «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>
);
}
Преимущества:
— Инкапсуляция логики состояния формы.
— Повторное использование кода.
— Упрощение компонентов форм.
#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🔥2
Вы знаете React, пишете чистый код, но просмотров на HH — ноль. Почему? Потому что резюме видит не человек, а алгоритм. И его нужно уметь обойти.
Что в карточках:
Если хотите, чтобы вас звали на собесы — начни с видимости. Алгоритм не простит пассивность.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🌚2
requestIdleCallback — это способ запускать задачи в свободное отрисовке браузера время, чтобы не мешать главному потоку и не тормозить интерфейс.
Почему важно:
Как использовать:
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. Для кроссбраузерности используйте полифил, как показано выше.
#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤2👏1
❗ Первый вебинар нашего курса по AI-агентам уже прошёл!
Запись уже выложили на обучающей платформе — можно влетать и догонять с комфортом.
Первые слушатели уже оставили фидбэки — и, кажется, мы попали в точку:
— «теперь наконец понял, как выбирать модели под задачу — раньше брал первую попавшуюся»
— «без лишнего, по делу, в лайве — кайф»
— «огонь, ожидания 100% оправданы лично у меня»
Если хотели вписаться, но сомневались — ещё не поздно. Вебинары идут вживую, записи сохраняются, чат работает, материалы открыты.
⏳ Ещё можно догнать и пройти всё вместе с потоком.
👉 Залетай на курс
Запись уже выложили на обучающей платформе — можно влетать и догонять с комфортом.
Первые слушатели уже оставили фидбэки — и, кажется, мы попали в точку:
— «теперь наконец понял, как выбирать модели под задачу — раньше брал первую попавшуюся»
— «без лишнего, по делу, в лайве — кайф»
— «огонь, ожидания 100% оправданы лично у меня»
Если хотели вписаться, но сомневались — ещё не поздно. Вебинары идут вживую, записи сохраняются, чат работает, материалы открыты.
⏳ Ещё можно догнать и пройти всё вместе с потоком.
👉 Залетай на курс
👍4
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9😁1👾1
Вёрстка может выглядеть по-разному на разных браузерах. Этот промпт поможет вам улучшить поддержку кросс-браузерных решений и сделать код более понятным и удобным.
Промпт:
Review my CSS and fix cross-browser issues, improve maintainability, and add comments explaining non-obvious parts.
Чем полезен:
— Советы по организации CSS (например, BEM, layers, atomic CSS)
— Рекомендации по улучшению производительности (критические стили, purge)
— Интеграцию с Autoprefixer или PostCSS
#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍1🥱1👾1