React

🔥 Сегодня покажу, как настроить мгновенное обновление компонентов в React без полной перезагрузки страницы Если ты пользуешься Vite, Parcel или Webpack с React — тебе точно стоит включить React Fast Refresh. Это технология, которая сохраняет состояние компонентов при обновлении кода. Раньше нужно было каждый раз обновлять страницу и терять всё введённое. Теперь — нет! ⚙️ Как это работает? React Fast Refresh отслеживает изменения в компонентах и аккуратно обновляет только изменившиеся части DOM. Всё состояние (useState, useReducer, useRef) остаётся. ✅ Как включить в Vite: Установи плагин:…

🔥 React: избегай лишнего состояния с derived state! В React часто встречается антипаттерн — derived state — когда ты дублируешь вычисляемое значение в useState. 👎 Пример плохого подхода: const [items, setItems] = useState([]); const [filtered, setFiltered] = useState([]); useEffect(() => { setFiltered(items.filter(...)); }, [items]); 🔍 Проблема: ты сам обязан синхронизировать filtered с items. Это источник багов, особенно при сложных зависимостях. ✅ Лучше вычисляй на лету: const filtered = useMemo(() => items.filter(...), [items]); 🔧 useMemo кэширует результат, и ты не хранишь дуб…

🚀 Как избавиться от "тряски" компонентов при переключении страниц в React? Сегодня хочу показать вам простой способ, как сделать ваш интерфейс более плавным при навигации между страницами. Вы замечали, что при переходе между роутами компоненты "мигают" или резко перерисовываются? Особенно это бросается в глаза, когда вы используете React Router и на каждой новой странице заново монтируются одни и те же элементы (например, хедер или футер). Решение — layout routes React Router предлагает отличный способ: использовать layout routes. Это позволяет сохранять общие компоненты между страницами…

🦾 Разработка меняется. ИИ-агенты уже умеют анализировать код, работать с инструментами, искать ошибки и выполнять последовательность действий. Главным становится вопрос: как организовать процессы и сохранить контроль над результатом. На открытом уроке 19 октября в 20:00 МСК в преддверие старта курса «Разработка ИИ-агентов» разберем, как создавать и применять агентов в реальной разработке. Вы узнаете, какие задачи можно делегировать ИИ-агентам, как они работают с кодовой базой и внешними системами, где помогают ускорить процессы, а где требуется участие разработчика. 👨‍💻🛠👨🏻‍💻 Урок буде…

🔥 Как ускорить работу с формами в React Я часто использую библиотеку react-hook-form, и одна из самых частых задач — это создание динамических списков полей (например, список контактов пользователя). Раньше я писал кучу ручного кода для добавления/удаления элементов, пока не открыл для себя хук useFieldArray. Пример использования: import { useForm, useFieldArray } from "react-hook-form"; function ContactForm() { const { control, register, handleSubmit } = useForm({ defaultValues: { contacts: [{ value: "" }] } }); const { fields, append, remove } = useFieldArray({…

🚀 Подборка полезных IT каналов в Max Системное администрирование, DevOps 📌 https://max.ru/i_odmin Все для системного администратора https://max.ru/bash_srv Bash Советы https://max.ru/sysadminof Книги для админов, полезные материалы https://max.ru/i_odmin_book Библиотека Системного Администратора https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др. https://max.ru/tipsysdmin Типичный Сисадмин https://max.ru/channel_win_sysadmin Системный Администратор Windows https://max.ru/channel_linux_admin Linux: Системный администратор https://max.ru/channel_linuxmod Linux https://max.ru/ch…

Сегодня я покажу вам одну фишку, которую часто недооценивают — как упростить управление глобальным состоянием с помощью Context + useReducer. 🧠 Многие сразу тянут в проект Redux или Zustand, но это не всегда нужно. Если у вас приложение небольшое или средней сложности — useReducer + Context может закрыть все ваши нужды. Вот пример мини-хранилища: // counterContext.tsx import { createContext, useReducer, useContext, ReactNode } from 'react'; const CounterContext = createContext<any>(null); const initialState = { count: 0 }; function reducer(state: typeof initialState, action: { type: str…

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

Сегодня покажу вам, как в 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 {...…

Как сделать 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) { ti…