React

Сегодня я покажу вам фичу React, которую многие недооценивают — useCallback. Часто его либо используют слишком много, либо вообще не используют. А ведь он может здорово помочь оптимизировать ререндеры, особенно когда дело касается передачи функций в дочерние компоненты. Что делает useCallback? Он кэширует функцию, возвращая ту же ссылку, пока зависимости не изменятся. const handleClick = useCallback(() => { console.log('Clicked!'); }, []); Без него, при каждом ререндере компонента создаётся новая функция, и если вы передаёте её в props, это может триггерить лишние ререндеры у дочерних компонентов. Где реально нужен useCallback? - Когда функция передаётся в мемоизированный компонент (React.memo) - Когда функция используется в useEffect, useMemo или других хук-эффектах - Когда вы ра…

Сегодня покажу вам, как в React удобно работать с формами на базе react-hook-form. Это мой go-to инструмент для любых форм в проектах. Почему именно react-hook-form? - ⚡ Быстрее, чем Formik (нет лишних ререндеров) - 🔍 Простая валидация через yup или zod - 🔌 Легко интегрируется с UI-библиотеками (MUI, Ant Design, Tailwind) Минималистичный пример: import { useForm } from "react-hook-form"; export default function MyForm() { const { register, handleSubmit } = useForm(); const onSubmit = data => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("email")} placeholder="Email" /> <input type="submit" /> </form> ); } Интеграция с Yup: import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolve…

Как сделать loader с задержкой, чтобы не мигал? Иногда при загрузке данных хочется показать спиннер, но только если это занимает больше, скажем, 300мс. Это позволяет избежать "мигающего" лоадера при быстрой загрузке. Я часто использую этот приём, особенно при загрузке модалок или переключении вкладок. Вот простая реализация на React: import { useState, useEffect } from "react"; function useDelayedLoader(isLoading: boolean, delay = 300) { const [showLoader, setShowLoader] = useState(false); useEffect(() => { let timeout: ReturnType<typeof setTimeout>; if (isLoading) { timeout = setTimeout(() => setShowLoader(true), delay); } else { setShowLoader(false); } return () => clearTimeout(timeout); }, [isLoading, delay]); return showLoader; } Использ…

🚨 Избегай монолитных компонентов, которые объединяют в себе отображение, управление состоянием и конфигурацию (например, ID, ref'ы) — такие компоненты сложнее сопровождать, тестировать и переиспользовать. ✅ Вместо этого разделяй функциональность на составные (composable) компоненты и используй context для передачи конфигурации и состояния. ✍️ @React_lib

❌ Избегайте использования нескольких переменных состояния для отслеживания статуса. ✅ Вместо этого используйте перечисления (enums). ✍️ @React_lib

🚀 Кодишь? Анализируешь данные? Дизайнишь? Тогда тебе сюда! Успей зарегистрироваться на масштабный конкурс Мэра Москвы «Лидеры цифровой трансформации» — с призовым фондом в 40 000 000₽ и реальными задачами от ведущих компаний страны и города Москвы. Три призовых места на каждую задачу: 🏆 1 место — 1 000 000 ₽ 🥈 2 место — 600 000 ₽ 🥉 3 место — 400 000 ₽ Вместе со столичными ведомствами задачи для участников подготовили: Positive Technologies, «Газпромбанк.Тех», билайн бизнес, Yandex Cloud, VK Tech, РСХБ, «Фалькон Тех», ГК «Геоскан», ИТ Школа Ростелекома, ОЭЗ «Алабуга». Никаких ограничений: участвовать может любой специалист от 16 лет. ⚡️ Есть своя команда — отлично, регистрируйтесь вместе. Нет — без проблем, мы поможем найти и собрать единомышленников среди других участников. …