React
IT и технологии
1 275 подписчиков50 публикаций
Подборки по React js и все что с ним связано.
Загружаем канал…
Сайт использует cookie для работы и аналитики. Мы используем файлы cookie для работы сайта и аналитики посещаемости. Подробнее в ПодробнееПолитике обработки данных и Правилах.
IT и технологии
Подборки по React js и все что с ним связано.
⚛️ Реактивность - это просто (и всего 35 строк кода) Мы часто воспринимаем реактивность в современных фреймворках (Vue, Solid, MobX или Preact Signals) как некую "магию". Кажется, что под капотом там сложные механизмы, доступные только избранным архитекторам. Автор блога romgrk решил развеять этот миф и показал, что базовый движок реактивности можно реализовать буквально за 35 строчек кода. В статье «Reactivity is easy» он разбирает ключевые концепции: 🔹 Signals (Сигналы) — контейнеры для значений. 🔹 Effects (Эффекты) — функции, которые реагируют на изменения. 🔹 Dependency Tracking — как именно эффект "узнает", на какие сигналы он подписан (спойлер: через глобальный контекст). Отличный материал для тех, кто хочет перестать бояться "магии" стейт-менеджеров и понять, как всё работает …
Читать целиком❌ Избегайте использования нескольких переменных состояния для отслеживания статуса. ✅ Вместо этого используйте перечисления (enums). ✍️ @React_lib
🚨 Избегай монолитных компонентов, которые объединяют в себе отображение, управление состоянием и конфигурацию (например, ID, ref'ы) — такие компоненты сложнее сопровождать, тестировать и переиспользовать. ✅ Вместо этого разделяй функциональность на составные (composable) компоненты и используй context для передачи конфигурации и состояния. ✍️ @React_lib
Как создать свой кастомный хук usePrevious для хранения предыдущего значения пропсов или стейта в компонентах React. В реальных приложениях иногда нужно сравнивать текущее и предыдущее состояние — например, чтобы анимировать изменения или вызывать сайд-эффекты только при росте/падении значения. Сегодня покажу, как легко вынести логику в переиспользуемый хук. import { useRef, useEffect } from 'react'; /** * Хук usePrevious сохраняет предыдущее значение value. * @param {T} value — текущее значение (пропс или стейт) * @returns {T | undefined} — предыдущий value (или undefined при первом рендере) */ function usePrevious(value) { const ref = useRef(); useEffect(() => { ref.current = value; }, [value]); return ref.current; } // Пример использования: import React, { useState…
Читать целикомСегодня хочу поделиться с вами простым, но часто необходимым при работе приёмом: созданием и использованием кастомного хука useFetch для загрузки данных. Часто в React-компонентах мы дублируем один и тот же код: ставим загрузку, устанавливаем состояние для data, error и loading, пишем useEffect, чтобы делать вызов API, очищаем эффекты… Всё это можно обобщить в одном месте и переиспользовать во множестве компонент. Вот базовая реализация хука useFetch: import { useState, useEffect, useRef } from 'react'; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); // Чтобы избежать обновления стейта после размонтирования компонента const isMounted = useRef(true); useEffect(() => { …
Читать целиком🔥 Антипаттерн в React: избыточные зависимости useEffect Встречали такое? useEffect(() => { fetchData(id); }, [id, fetchData]); ❗️Проблема: fetchData — это функция, которая переопределяется при каждом рендере. В итоге эффект срабатывает чаще, чем должен, даже если id не менялся. 👎 Это вызывает лишние запросы, лаги и баги в логике. 💡 Решения: 1. Обёрнуть в useCallback: const fetchData = useCallback((id: string) => { // ... }, []); 2. Вынести вне компонента (если она не зависит от состояния): const fetchData = (id: string) => { // ... }; 3. Игнорировать в зависимостях (как временный хак, но осторожно!): // eslint-disable-next-line react-hooks/exhaustive-deps ✅ Правильное управление зависимостями в useEffect — ключ к стабильному и предсказуемому поведению компонентов. ✍️…
Читать целикомСегодня я покажу вам фичу 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 лет. ⚡️ Есть своя команда — отлично, регистрируйтесь вместе. Нет — без проблем, мы поможем найти и собрать единомышленников среди других участников. …
Читать целиком