React

Сегодня покажу вам, как в React удобно работать с формами на базе react-hook-form. Это мой go-to инструмент для любых форм в проектах. Почему именно react-hook-form? - ⚡ Быстрее, чем Formik (нет лишних ререндеров) - 🔍 Простая валидация через yup или zod - 🔌 Легко интегрируется с UI-библиотеками (MU…

Сегодня покажу вам, как в 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/resolvers/yup"; import * as yup from "yup"; const schema = yup.object({ email: yup.string().email().required(), }).required(); export default function ValidatedForm() { const { register, handleSubmit, formState: { errors } } = useForm({ resolver: yupResolver(schema), }); return ( <form onSubmit={handleSubmit(data => console.log(data))}> <input {...register("email")} /> <p>{errors.email?.message}</p> <button type="submit">Отправить</button> </form> ); } 🔥 Очень советую попробовать на новом проекте. Работать с формами становится не только проще, но и приятно. ✍️ @React_lib

Как сделать loader с задержкой, чтобы не мигал? Иногда при загрузке данных хочется показать спиннер, но только если это занимает больше, скажем, 300мс. Это позволяет избежать "мигающего" лоадера при быстрой загрузке. Я часто использую этот приём, особенно при загрузке модалок или переключении вклад…

Как сделать 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; } Использование: const isLoading = ...; // например, из useQuery или useState const showLoader = useDelayedLoader(isLoading); return ( <> {showLoader && <Spinner />} {!isLoading && <Content />} </> ); ⚡️ Профит — спиннер появляется только если загрузка реально долгая. Пользователь не чувствует "дёргания" интерфейса. Маленький UX-трюк, но эффект — огромный. ✍️ @React_lib

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

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

🛠️ Оптимизация ререндеринга в React: 3 ключевых совета Ререндеринг — один из главных "скрытых" врагов производительности в React. Если компонент ререндерится слишком часто, это может привести к лагам и снижению FPS в UI. Сегодня разберём три способа, как минимизировать ненужные ререндеры. 1️⃣ …

🛠️ Оптимизация ререндеринга в React: 3 ключевых совета Ререндеринг — один из главных "скрытых" врагов производительности в React. Если компонент ререндерится слишком часто, это может привести к лагам и снижению FPS в UI. Сегодня разберём три способа, как минимизировать ненужные ререндеры. 1️⃣ Используйте React.memo Если ваш компонент получает одинаковые пропсы и не должен ререндериться без изменений, оберните его в React.memo. 🔹 Пример: const MyComponent = React.memo(({ count }: { count: number }) => { console.log('Ререндер!'); return <div>Count: {count}</div>; }); 👉 Теперь компонент будет ререндериться только если count изменился. 2️⃣ Используйте useCallback для функций Передача новой функции в пропсы приводит к ререндерингу. useCallback предотвращает это: 🔹 Пример: const handleClick = useCallback(() => { console.log('Clicked!'); }, []); 👉 Теперь handleClick не будет пересоздаваться при каждом ререндере. 3️⃣ Используйте useMemo для вычислений Если у вас есть тяжёлые вычисления, мемоизируйте их с useMemo: 🔹 Пример: const expensiveValue = useMemo(() => { return calculateHeavyStuff(data); }, [data]); 👉 Теперь calculateHeavyStuff будет выполняться только при изменении data, а не при каждом ререндере. ✍️ @React_lib

📌 5 крутых фич TypeScript, о которых ты мог не знать TypeScript — это не просто строгая типизация, но и мощный инструмент, который может сделать твой код чище и безопаснее. Сегодня покажу 5 полезных возможностей, которые ты мог упустить! 1️⃣ satisfies — Гарантия соответствия Часто бывает, чт…

📌 5 крутых фич TypeScript, о которых ты мог не знать TypeScript — это не просто строгая типизация, но и мощный инструмент, который может сделать твой код чище и безопаснее. Сегодня покажу 5 полезных возможностей, которые ты мог упустить! 1️⃣ satisfies — Гарантия соответствия Часто бывает, что мы определяем объект с определёнными ключами, но хотим, чтобы TypeScript проверил, соответствуют ли они ожидаемой схеме. Вот где пригодится satisfies: type Theme = "light" | "dark"; const config = { theme: "light", debug: true, } satisfies { theme: Theme; debug: boolean }; // Теперь TypeScript гарантирует, что `theme` всегда будет соответствовать "light" | "dark" 2️⃣ keyof + typeof — Безопасные ключи Если у тебя есть объект и ты хочешь работать с его ключами безопасно, эта комбинация спасает: const user = { name: "Jhon", age: 30, }; type UserKeys = keyof typeof user; // "name" | "age" const key: UserKeys = "name"; // ✅ TypeScript гарантирует, что это корректный ключ 3️⃣ Extract<> и Exclude<> — Фильтрация типов Эти утилиты позволяют выделять или исключать типы из union-типов: type EventType = "click" | "hover" | "scroll"; type MouseEvents = Extract<EventType, "click" | "hover">; // "click" | "hover" type NonMouseEvents = Exclude<EventType, "click" | "hover">; // "scroll" 4️⃣ as const — Заморозка значений Если тебе нужно, чтобы объект или массив стали неизменяемыми (и сохранили точные значения), используй as const: const roles = ["admin", "user", "guest"] as const; type Role = (typeof roles)[number]; // "admin" | "user" | "guest" 5️⃣ ReturnType<> — Получение типа возвращаемого значения Если у тебя есть функция, и тебе нужно определить её возвращаемый тип, ReturnType<> сделает это за тебя: function getUser() { return { name: "Jhon", age: 30 }; } type User = ReturnType<typeof getUser>; // { name: string; age: number } ✍️ @React_lib

❌ Избегайте использования useState() для сложного управления состоянием в React. ✅ Вместо этого используйте useReducer: 1. Предсказуемые переходы состояний 2. Легче тестировать 3. Лучше масштабируется ✍️ @React_lib

Сейчас покажу вам приём, который сильно упрощает React-код: не храните в state то, что можно вычислить. Очень часто вижу такое: const [fullName, setFullName] = useState('') useEffect(() => { setFullName(`${user.firstName} ${user.lastName}`) }, [user]) На первый взгляд всё нормально. Но по факт…

Сейчас покажу вам приём, который сильно упрощает React-код: не храните в state то, что можно вычислить. Очень часто вижу такое: const [fullName, setFullName] = useState('') useEffect(() => { setFullName(`${user.firstName} ${user.lastName}`) }, [user]) На первый взгляд всё нормально. Но по факту это лишний state, лишний useEffect и лишний ререндер. Гораздо проще так: const fullName = `${user.firstName} ${user.lastName}` Или если вычисление тяжёлое: const filteredItems = useMemo(() => { return items.filter(item => item.active) }, [items]) Что это даёт: • меньше кода • меньше багов из-за рассинхрона • проще поддержка • компонент легче читать Я обычно задаю себе один вопрос: это данные, которые реально меняются отдельно, или это просто производное значение? Если производное почти всегда не нужен useState. Вот где особенно часто ошибаются: • fullName из firstName и lastName • isFormValid из значений формы • sortedList из массива и сортировки • visibleItems из фильтра и исходных данных Чем меньше лишнего state в компоненте, тем спокойнее вам потом его дебажить. ✍️ @React_lib