React

🎯 Оптимизация ререндеров в React через мемоизацию функций Многие знают про React.memo, но часто забывают про useCallback — и получают лишние ререндеры, особенно в списках и сложных компонентах. 📌 Проблема: const handleClick = () => { console.log('Clicked'); }; <MyButton onClick={handleClick} /> Такой handleClick создаётся заново при каждом рендере. Если MyButton мемоизирован (React.memo), это сломает оптимизацию — пропсы-то изменились! ✅ Решение: const handleClick = useCallback(() => { console.log('Clicked'); }, []); 📈 Профит: Функция сохраняется между рендерами, MyButton не ререндерится без причины. 🧠 Особенно важно для: * Компонентов в списках (map) * Контейнеров с большим числом коллбеков * Производительных UI (таблицы, дашборды, графики) 💡 Используйте eslint-плагин react-hooks/exhaustive-deps — он не даст забыть зависимости. ✍️ @React_lib

🔥 Сегодня покажу, как настроить мгновенное обновление компонентов в React без полной перезагрузки страницы Если ты пользуешься Vite, Parcel или Webpack с React — тебе точно стоит включить React Fast Refresh. Это технология, которая сохраняет состояние компонентов при обновлении кода. Раньше нужно было каждый раз обновлять страницу и терять всё введённое. Теперь — нет! ⚙️ Как это работает? React Fast Refresh отслеживает изменения в компонентах и аккуратно обновляет только изменившиеся части DOM. Всё состояние (useState, useReducer, useRef) остаётся. ✅ Как включить в Vite: Установи плагин: npm install --save-dev @vitejs/plugin-react И подключи в vite.config.ts: import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], }); Этот плагин включает react-refresh автоматически под капотом. 🤯 Что получаешь: * мгновенное обновление UI при изменении кода * сохранение состояния формы, вкладок, фильтров и т.д. * больше удовольствия от разработки 😎 🎯 Не забудь, это работает только в dev-режиме. В проде всё остаётся стабильным и оптимизированным. ✍️ @React_lib

🔥 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 кэширует результат, и ты не хранишь дублирующее состояние. 🧠 Правило: если значение можно вычислить из другого — не пиши useState. Подробнее: https://react.dev/learn/you-might-not-need-an-effect ✍️ @React_lib

🚀 Как избавиться от "тряски" компонентов при переключении страниц в React? Сегодня хочу показать вам простой способ, как сделать ваш интерфейс более плавным при навигации между страницами. Вы замечали, что при переходе между роутами компоненты "мигают" или резко перерисовываются? Особенно это бросается в глаза, когда вы используете React Router и на каждой новой странице заново монтируются одни и те же элементы (например, хедер или футер). Решение — layout routes React Router предлагает отличный способ: использовать layout routes. Это позволяет сохранять общие компоненты между страницами без их размонтирования. Вот пример: // Layout.jsx import { Outlet } from "react-router-dom"; export default function Layout() { return ( <> <Header /> <main> <Outlet /> </main> <Footer /> </> ); } // App.jsx import { Routes, Route } from "react-router-dom"; import Layout from "./Layout"; import Home from "./pages/Home"; import About from "./pages/About"; function App() { return ( <Routes> <Route path="/" element={<Layout />}> <Route index element={<Home />} /> <Route path="about" element={<About />} /> </Route> </Routes> ); } Теперь Header и Footer не будут размонтироваться, и интерфейс останется стабильным при переходах. 👀 Плюс: можно добавить плавные анимации переходов с помощью framer-motion без артефактов. Попробуйте — разница ощущается сразу. ✍️ @React_lib