React

الذهاب إلى القناة على Telegram

Подборки по React js и все что с ним связано. По всем вопросам @evgenycarter

إظهار المزيد

الشبكة:Книги для программистов روسيا177 426 التكنولوجيات والتطبيقات26 756

2 720

المشتركون

لا توجد بيانات24 ساعات

-47 أيام

-2130 أيام

456

عرض المشاهدات

~ 21924 ساعات

~ 25848 ساعات

16.76%

معدل المشاركة

لا توجد بيانات

المشاركات في اليوم

Ads index

beta

جاري تحميل البيانات...

القنوات المماثلة

32.4K

Frontender's notes [ru]

18.2K

Frontend | Вопросы собесов

قنوات أخرى

الإشارات الواردة والصادرة

---

جذب المشتركين

يونيو '26

+11

في 0 قنوات

مايو '26

+28

في 0 قنوات

Get PRO

أبريل '26

+17

في 0 قنوات

Get PRO

مارس '26

+12

في 0 قنوات

Get PRO

فبراير '26

+21

في 0 قنوات

Get PRO

يناير '26

+21

في 0 قنوات

Get PRO

ديسمبر '25

+28

في 0 قنوات

Get PRO

نوفمبر '25

+45

في 32 قنوات

Get PRO

أكتوبر '25

+31

في 0 قنوات

Get PRO

سبتمبر '25

+56

في 37 قنوات

Get PRO

أغسطس '25

+37

في 1 قنوات

Get PRO

يوليو '25

+51

في 27 قنوات

Get PRO

يونيو '25

+66

في 20 قنوات

Get PRO

مايو '25

+55

في 44 قنوات

Get PRO

أبريل '25

+56

في 37 قنوات

Get PRO

مارس '25

+86

في 38 قنوات

Get PRO

فبراير '25

+72

في 32 قنوات

Get PRO

يناير '25

+69

في 33 قنوات

Get PRO

ديسمبر '24

+71

في 34 قنوات

Get PRO

نوفمبر '24

+79

في 33 قنوات

Get PRO

أكتوبر '24

+80

في 30 قنوات

Get PRO

سبتمبر '24

+141

في 29 قنوات

Get PRO

أغسطس '24

+67

في 18 قنوات

Get PRO

يوليو '24

+51

في 0 قنوات

Get PRO

يونيو '24

+82

في 25 قنوات

Get PRO

مايو '24

+89

في 19 قنوات

Get PRO

أبريل '24

+76

في 0 قنوات

Get PRO

مارس '24

+88

في 21 قنوات

Get PRO

فبراير '24

+73

في 19 قنوات

Get PRO

يناير '24

+147

في 24 قنوات

Get PRO

ديسمبر '23

+91

في 24 قنوات

Get PRO

نوفمبر '23

+94

في 17 قنوات

Get PRO

أكتوبر '23

+90

في 18 قنوات

Get PRO

سبتمبر '23

+123

في 0 قنوات

Get PRO

أغسطس '23

+88

في 0 قنوات

Get PRO

يوليو '23

+112

في 0 قنوات

Get PRO

يونيو '23

+67

في 0 قنوات

Get PRO

مايو '23

+92

في 0 قنوات

Get PRO

أبريل '23

+81

في 0 قنوات

Get PRO

مارس '23

+42

في 0 قنوات

Get PRO

فبراير '23

+53

في 0 قنوات

Get PRO

يناير '23

+93

في 0 قنوات

Get PRO

ديسمبر '22

+99

في 0 قنوات

Get PRO

نوفمبر '22

+68

في 0 قنوات

Get PRO

أكتوبر '22

+160

في 0 قنوات

Get PRO

سبتمبر '22

+232

في 0 قنوات

Get PRO

أغسطس '22

+314

في 0 قنوات

Get PRO

يوليو '22

+408

في 0 قنوات

Get PRO

يونيو '22

+2 238

في 0 قنوات

التاريخ	نمو المشتركين	الإشارات	القنوات
24 يونيو	0
23 يونيو	0
22 يونيو	0
21 يونيو	+1
20 يونيو	0
19 يونيو	0
18 يونيو	0
17 يونيو	+1
16 يونيو	+1
15 يونيو	0
14 يونيو	+1
13 يونيو	0
12 يونيو	+1
11 يونيو	+1
10 يونيو	0
09 يونيو	+1
08 يونيو	+1
07 يونيو	0
06 يونيو	0
05 يونيو	+1
04 يونيو	+1
03 يونيو	+1
02 يونيو	0
01 يونيو	0

منشورات القناة

Как я ускоряю разработку с помощью React DevTools Сегодня хочу поделиться инструментом, без которого я уже не представляю работу — React DevTools. Многие его ставят "для галочки", но реально используют только для просмотра компонентов. А ведь он может сильно ускорить разработку, если выжать из него максимум. Вот что реально помогает: 1. Профайлер — если у вас страница перерисовывается дольше, чем хотелось бы, откройте вкладку Profiler. Там видно, какие компоненты рендерятся лишний раз и сколько это занимает времени. 2. Поиск по дереву компонентов — если проект большой, можно быстро найти нужный компонент прямо в DevTools (Cmd/Ctrl + F). 3. Редактирование пропсов на лету — в режиме разработчика можно менять пропсы и сразу видеть результат без пересборки проекта. 4. Highlight updates — включает подсветку обновляемых компонентов. Очень удобно, чтобы найти “лишние” рендеры. Если вы еще не используете хотя бы профайлер и подсветку рендеров — попробуйте. Уже через пару дней вы начнете понимать, где проект "проседает" и что можно оптимизировать. А вы часто заглядываете в Profiler или больше по старинке — console.log и догадки? 😄 ✍️ @React_lib

2	Возможно, вам не нужен useEffect (версия с ref‑колбэками) В React хук useEffect часто используют для выполнения кода после монтирования компонента: подписки, измерения DOM-элементов, вызовы API и т. д. Но в некоторых случаях — особенно когда нам нужно только получить доступ к DOM-элементу — useEffect оказывается избыточным. Что предлагают вместо useEffect? Ref-колбэки. Вместо того чтобы ждать монтирования и использовать useEffect, можно передать функции-колбэку ссылку (ref). Этот колбэк автоматически вызовется, когда элемент появится или исчезнет в DOM. Когда использовать? - Для измерения DOM (размеры, позиция). - Для инициализации библиотек, которые работают с элементом. - Для управления фокусом. Если нужно реагировать на изменения состояния или выполнять сложные сайд-эффекты — тогда useEffect остаётся правильным выбором. 📲 Мы в MAX ✍️ @React_lib	384
3	🔴 Эфир начнётся уже через 2 часа. Переходи в бот за ссылкой: @shortcut_front_bot	345
4	Секреты React-разработки. Создай React-портфолио с нуля шаг за шагом 👉 Полный цикл разработки: от первой строки кода до деплоя 👉 Создаём современный и динамичный сайт на React 👉 Полное руководство (4 часа 42 минуты) Сегодня я собрал в одном видео весь процесс создания портфолио на React с нуля! 🎥 В этом выпуске мы пройдём все этапы: от вёрстки и компонентов до анимации, переключения тем и финального деплоя. 💡 Что вы узнаете в этом видео: 🔹 Разработка структуры портфолио: создаём секции Home, About, Skills, Services, Portfolio, Clients, Contact. 🔹 Работа с React-компонентами: используем useState, useEffect, props и массивы данных. 🔹 Добавление анимации с Motion: оживляем интерфейс и создаём плавные переходы. 🔹 Переключение тем (светлая/тёмная): реализуем через useState и сохраняем в LocalStorage. 🔹 Динамическое меню и кнопка "Вверх": улучшаем навигацию и пользовательский опыт. 🔹 Деплой на Netlify: публикуем проект и делаем его доступным онлайн. ⏱️ Таймкоды: 00:07 — Обзор проекта - что мы будем разрабатывать в React 00:35 — Настройка окружения перед началом работы в React 15:53 — Создаём структуру проекта и компоненты 25:10 — Импортируем и подключаем картинки в проект 31:09 — Создаём компонент Header с меню навигации 57:50 — Разрабатываем секцию Home в React 01:05:05 — Создаём секцию About с данными о разработчике 01:13:30 — Добавляем секцию Skills с анимацией и эффектами 01:31:01 — Переходим к блоку Work Experience: оформление и логика 01:36:02 — Создаём секцию Services: карточки услуг и стили 02:02:49 — Разрабатываем секцию Portfolio с проектами 02:19:29 — Добавляем блок Next Project для перелистывания работ 02:24:35 — Создаём секцию Our Clients с отзывами и логотипами 02:44:38 — Разрабатываем секцию Contact с формой обратной связи 02:58:10 — Исправляем баг: убираем скролл при открытии мобильного меню 03:01:57 — Добавляем плавное появление popup в секции Portfolio 03:04:10 — Создаём секцию Footer с контактами и ссылками 03:22:00 — Добавляем кнопку "Вверх" для удобной навигации 03:28:33 — Реализуем переключение тем (светлая/тёмная) с сохранением 03:38:51 — Анимация элементов с помощью библиотеки React Motion 03:43:56 — Разбираем работу Motion: ключевые атрибуты и настройки 03:45:22 — Выносим анимацию в отдельный файл для удобства 04:19:07 — Обзор будущих проектов, которые можно реализовать 04:37:53 — Финальный деплой проекта на Netlify 04:42:23 — Всем мира и добра! 🚀😊 источник 📲 Мы в MAX ✍️ @React_lib	383
5	🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг 18 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Виталию Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.	340
6	Правило ESLint для обнаружения избыточного состояния в React 📲 Мы в MAX ✍️ @React_lib	326
7	🧠 Зачем нужен React Query и как он меняет подход к загрузке данных Привет! Сегодня я хочу рассказать вам о библиотеке, которая стала для меня must-have в любом проекте на React — React Query. Если вы всё ещё пишете useEffect + fetch + useState, чтобы загрузить данные, ловите инсайт: это можно делать проще и мощнее. Вот чем React Query реально помогает: ✅ Автоматический кеш: данные не перезагружаются каждый раз при переходе между страницами. ✅ Повторные запросы при восстановлении соединения или фокусе окна. ✅ Мутации (POST, PUT и т.д.) с оптимистичным обновлением UI. ✅ Умное управление состояниями: isLoading, isError, data, refetch — всё под рукой. ✅ Простая интеграция с TypeScript. Пример использования: const { data, isLoading, error } = useQuery({ queryKey: ['users'], queryFn: () => fetch('/api/users').then(res => res.json()) }); 🔥 Всё, никакого useEffect! А самое крутое — когда ты добавляешь бесконечный скролл или пагинацию — React Query делает это почти без боли. Если ещё не пробовал — обязательно покрути. Это прям реальный буст продуктивности. 📲 Мы в MAX ✍️ @React_lib	375
8	🔥9 полезных функций и хуков, которые пригодятся продвинутому React-разработчику для управления состоянием, оптимизацией и архитектурой компонентов 1. useDebounce Позволяет "отложить" значение — полезно для ввода/поиска. import { useEffect, useState } from 'react'; export function useDebounce<T>(value: T, delay = 300): T { const [debounced, setDebounced] = useState(value); useEffect(() => { const timer = setTimeout(() => setDebounced(value), delay); return () => clearTimeout(timer); }, [value, delay]); return debounced; } 2. usePrevious Возвращает предыдущее значение пропа или стейта. import { useRef, useEffect } from 'react'; export function usePrevious<T>(value: T): T \| undefined { const ref = useRef<T>(); useEffect(() => { ref.current = value; }, [value]); return ref.current; } 3. useOnClickOutside Закрытие модалок, дропдаунов при клике вне. import { useEffect } from 'react'; export function useOnClickOutside(ref: React.RefObject<HTMLElement>, handler: () => void) { useEffect(() => { const listener = (e: MouseEvent) => { if (!ref.current \|\| ref.current.contains(e.target as Node)) return; handler(); }; document.addEventListener('mousedown', listener); return () => document.removeEventListener('mousedown', listener); }, [ref, handler]); } 4. useIsMounted Помогает избежать обновления состояния после размонтирования. import { useEffect, useRef } from 'react'; export function useIsMounted() { const ref = useRef(false); useEffect(() => { ref.current = true; return () => { ref.current = false; }; }, []); return ref; } 5. useEventCallback Запоминает последнюю версию колбэка без повторного рендера. import { useRef, useCallback } from 'react'; export function useEventCallback<T extends (...args: any[]) => any>(fn: T): T { const ref = useRef(fn); ref.current = fn; return useCallback((...args: any[]) => ref.current(...args), []) as T; } 6. useAsync Асинхронный вызов с контролем загрузки, ошибок и результата. import { useState, useCallback } from 'react'; export function useAsync<T>(asyncFn: () => Promise<T>) { const [loading, setLoading] = useState(false); const [data, setData] = useState<T \| null>(null); const [error, setError] = useState<unknown>(null); const run = useCallback(async () => { setLoading(true); setError(null); try { const result = await asyncFn(); setData(result); } catch (e) { setError(e); } finally { setLoading(false); } }, [asyncFn]); return { loading, data, error, run }; } 7. useLocalStorage Простой хук для хранения данных в localStorage. import { useState, useEffect } from 'react'; export function useLocalStorage<T>(key: string, initial: T) { const [value, setValue] = useState<T>(() => { const json = localStorage.getItem(key); return json ? JSON.parse(json) : initial; }); useEffect(() => { localStorage.setItem(key, JSON.stringify(value)); }, [key, value]); return [value, setValue] as const; } 8. useMediaQuery Работа с медиа-запросами в React без CSS. import { useEffect, useState } from 'react'; export function useMediaQuery(query: string): boolean { const [matches, setMatches] = useState(() => window.matchMedia(query).matches); useEffect(() => { const media = window.matchMedia(query); const listener = () => setMatches(media.matches); media.addEventListener('change', listener); return () => media.removeEventListener('change', listener); }, [query]); return matches; } 9. useToggle Бинарный переключатель состояния (on/off). import { useCallback, useState } from 'react'; export function useToggle(initial = false) { const [state, setState] = useState(initial); const toggle = useCallback(() => setState(prev => !prev), []); return [state, toggle] as const; } 📲 Мы в MAX ✍️ @React_lib	478
9	🚀 Как ускорить загрузку React-приложения? 5 реальных советов Сегодня покажу, как я оптимизирую загрузку фронтенда в продакшене. Это помогает не только SEO, но и удерживает пользователя, который мог бы уйти, не дождавшись загрузки. Вот 5 проверенных приёмов: 1. Code Splitting (разделение кода) Используйте React.lazy и Suspense, чтобы грузить компоненты только при необходимости. Особенно полезно для роутинга. 2. Tree shaking Убедитесь, что сборщик (Webpack, Vite) удаляет неиспользуемый код. Проверь, чтобы библиотеки импортировались модульно (import { Button } from 'lib', а не всё подряд). 3. Оптимизация картинок Используйте современные форматы (WebP, AVIF) и lazy загрузку изображений, чтобы не тянуть весь хлам сразу. 4. Минификация и сжатие Включите GZIP или Brotli на сервере. Также обязательно минифицируйте JS/CSS. 5. Critical CSS и SSR/SSG Подумайте об использовании Next.js или аналогов. Они помогают загрузить только нужный CSS и HTML прямо на старте, особенно полезно для первых 3 секунд. ❓А какие техники используете вы, чтобы ускорить загрузку? 📲 Мы в MAX ✍️ @React_lib	529
10	🔧 Шпаргалка по базовым компонентам React // Импорт React и роутера import React, { useState, useEffect, createContext, useContext } from 'react'; import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; // 1. Создание контекста const MyContext = createContext(); // 2. Компонент с Context и useEffect function Welcome() { const contextValue = useContext(MyContext); useEffect(() => { console.log("Welcome component mounted or updated"); return () => console.log("Welcome component unmounted"); }, []); return <h1>{contextValue}</h1>; } // 3. Управляемая форма function FormComponent() { const [inputValue, setInputValue] = useState(''); const handleChange = (e) => setInputValue(e.target.value); return ( <div> <h2>Controlled Form</h2> <input type="text" value={inputValue} onChange={handleChange} /> <p>Input Value: {inputValue}</p> </div> ); } // 4. Счётчик с состоянием и обработчиком function Counter() { const [count, setCount] = useState(0); return ( <div> <h2>Counter</h2> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } // 5. Рендер списка function FruitList() { const fruits = ['Apple', 'Banana', 'Orange']; return ( <div> <h2>Fruit List</h2> <ul> {fruits.map((fruit, index) => ( <li key={index}>{fruit}</li> ))} </ul> </div> ); } // 6. Условный рендеринг function ConditionalRender({ isLoggedIn }) { return ( <div> <h2>Conditional Rendering</h2> {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>} </div> ); } // 7. Навигация function Navigation() { return ( <nav> <Link to="/">Home</Link> \| <Link to="/form">Form</Link> \| <Link to="/counter">Counter</Link> \| <Link to="/fruits">Fruits</Link> </nav> ); } // 8. Основной App с Router и Context function App() { return ( <MyContext.Provider value="Hello, Context!"> <Router> <div style={{ padding: '20px', fontFamily: 'Arial' }}> <Navigation /> <Switch> <Route path="/" exact> <Welcome /> <ConditionalRender isLoggedIn={true} /> </Route> <Route path="/form" component={FormComponent} /> <Route path="/counter" component={Counter} /> <Route path="/fruits" component={FruitList} /> </Switch> </div> </Router> </MyContext.Provider> ); } export default App; 📲 Мы в MAX ✍️ @React_lib	490
11	🚀 Подборка полезных 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 Типичный Сисадмин Excel лайфхак 📌 https://t.me/Excel_lifehack Excel лайфхак 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика Программирование Go📌 https://max.ru/golang_lib Библиотека Go (Golang) разработчика Программирование React📌 https://max.ru/react_lib React Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика GitHub Сообщество 📌 https://max.ru/githublib Интересное из GitHub Базы данных (Data Base) 📌 https://max.ru/database_info Все про базы данных Фронтенд разработка 📌 https://max.ru/frontend_1 Подборки для frontend разработчиков Библиотеки 📌 https://max.ru/programmist_of Книги по программированию https://max.ru/proglb Библиотека программиста https://max.ru/bfbook Книги для программистов Программирование 📌 https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 Шутки программистов 📌 https://max.ru/itumor Шутки программистов Защита, взлом, безопасность 📌 https://max.ru/thehaking Канал о кибербезопасности https://max.ru/xakkep_1 Хакер Free Книги, статьи для дизайнеров 📌 https://max.ru/odesigners Статьи, книги для дизайнеров Математика 📌 https://max.ru/Pomatematike Канал по математике https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике Вакансии 📌 https://max.ru/progjob Вакансии в IT Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Бонус 📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП	139
12	Сегодня хочу поделиться с вами простым, но часто необходимым при работе приёмом: созданием и использованием кастомного хука 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(() => { // При монтировании флага меняются isMounted.current = true; // Начинаем загрузку fetch(url) .then(response => { if (!response.ok) { throw new Error(`Ошибка ${response.status}`); } return response.json(); }) .then(json => { if (isMounted.current) { setData(json); setLoading(false); } }) .catch(err => { if (isMounted.current) { setError(err.message); setLoading(false); } }); // Очистка: помечаем, что компонент размонтирован return () => { isMounted.current = false; }; }, [url]); return { data, loading, error }; } Разбор ключевых моментов: 1️⃣ useRef для флага isMounted Если компонент размонтируется до того, как придёт ответ от сервера, вызов setState внутри промиса может вызвать утечку памяти и предупреждение React. Флаг isMounted.current помогает проверить, что компонент ещё жив. 2️⃣ Состояния data, loading, error Вынесли все три состояния в хук — теперь в компоненте не нужно повторять одно и то же. Достаточно будет написать: const { data, loading, error } = useFetch('https://api.example.com/posts'); 3️⃣ Параметр url в массиве зависимостей Если url меняется, хук автоматически запустит новую загрузку. 4️⃣ Обработка ошибок Мы сразу проверяем response.ok, иначе бросаем исключение, и в .catch устанавливаем error. Теперь пример использования хука в компоненте: import React from 'react'; import useFetch from './hooks/useFetch'; function PostsList() { const { data: posts, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts'); if (loading) { return <div>Загрузка...</div>; } if (error) { return <div>Ошибка: {error}</div>; } return ( <div> <h2>Список постов</h2> <ul> {posts.map(post => ( <li key={post.id}> <strong>{post.title}</strong> <p>{post.body}</p> </li> ))} </ul> </div> ); } export default PostsList; Плюсы такого подхода: * Меньше дублирования кода. Вместо того чтобы копипастить один и тот же useEffect в десятке компонентов, просто импортируем useFetch. * Централизованная логика. Если понадобится добавить, скажем, кеширование или отмену запроса через AbortController, меняем только внутри useFetch. * Чистый код в компонентах. Компонент сосредоточен на отображении, а все детали работы с сетью спрятаны в хук. Советы по улучшению: * Можно расширить хук, чтобы принимать не только url, но и опции fetch (метод, заголовки и т.п.). * Добавить параметр deps (зависимости), чтобы перезапускать запрос не только при изменении URL, а при любой другой переменной. * Использовать AbortController, чтобы отменять запросы при новых вызовах или при размонтировании: ✍️ @React_lib	629
13	🚀 Подборка полезных 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 Типичный Сисадмин Excel лайфхак 📌 https://t.me/Excel_lifehack Excel лайфхак 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика Программирование Go📌 https://max.ru/golang_lib Библиотека Go (Golang) разработчика Программирование React📌 https://max.ru/react_lib React Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика GitHub Сообщество 📌 https://max.ru/githublib Интересное из GitHub Базы данных (Data Base) 📌 https://max.ru/database_info Все про базы данных Фронтенд разработка 📌 https://max.ru/frontend_1 Подборки для frontend разработчиков Библиотеки 📌 https://max.ru/programmist_of Книги по программированию https://max.ru/proglb Библиотека программиста https://max.ru/bfbook Книги для программистов Программирование 📌 https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 Шутки программистов 📌 https://max.ru/itumor Шутки программистов Защита, взлом, безопасность 📌 https://max.ru/thehaking Канал о кибербезопасности https://max.ru/xakkep_1 Хакер Free Книги, статьи для дизайнеров 📌 https://max.ru/odesigners Статьи, книги для дизайнеров Математика 📌 https://max.ru/Pomatematike Канал по математике https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике Вакансии 📌 https://max.ru/progjob Вакансии в IT Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Бонус 📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП	327
14	Как создать свой кастомный хук 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 } from 'react'; export default function PriceTracker() { const [price, setPrice] = useState(100); const prevPrice = usePrevious(price); const getTrend = () => { if (prevPrice === undefined) return '—'; return price > prevPrice ? '📈' : price < prevPrice ? '📉' : '➖'; }; return ( <div> <h2>Цена: {price} {getTrend()}</h2> <button onClick={() => setPrice(p => p + 5)}>↑ Увеличить</button> <button onClick={() => setPrice(p => p - 5)}>↓ Уменьшить</button> </div> ); } Почему это круто: ✅ Логика хранения предыдущих значений вынесена в один хук — нет дублирования кода. * ✅ usePrevious работает и для пропсов, и для стейта. * ✅ Помогает сравнивать и реагировать на изменения (анимации, уведомления, условные запросы). Попробуйте интегрировать usePrevious в свои компоненты, где нужно отслеживать изменение данных во времени. Поделитесь в комментариях, в каких кейсах вы уже использовали или планируете применить такой хук! 📲 Мы в MAX ✍️ @React_lib	629
15	Сегодня поговорим о Zustand — суперлёгкой и мощной библиотеке для управления состоянием в React-приложениях. 🧵 Минимализм состояния с Zustand Создание стора занимает меньше минуты: import { create } from 'zustand'; const useStore = create((set) => ({ count: 0, increase: () => set((state) => ({ count: state.count + 1 })), })); 🎯 Как использовать в компоненте: const Counter = () => { const { count, increase } = useStore(); return ( <button onClick={increase}> Count: {count} </button> ); }; 🧠 Чем хорош Zustand: * Нет провайдеров. * Нет бойлерплейта. * Поддержка middlewares, persist, subscriptions. * Работает в Next.js, React Native, даже вне React. Zustand идеально подходит для маленьких и средних приложений. Простой API — максимум гибкости. 📲 Мы в MAX ✍️ @React_lib	632
16	Как frontend-разработчику вырасти в ЗП? День сурка frontend-разработчика выглядит так Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов Откликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость». И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK... Ты тоже можешь получить оффер в компанию, в которой тебя будут ценить и хорошо платить. 👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке. В своем канале: 👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения 👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться 👉На примерах объясняю, как проходить собеседования, включая техничку 👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров А еще регулярно публикую полезные материалы: ▪️Задачи, на которых валяться кандидаты ▪️База по микрофронтам ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Чек лист проверки своего резюме А еще у меня множество успешных кейсов и трогательных отзывов, найти их можно в канале. Реклама, erid: 2W5zFJw4CJd ИП Галактионов Тихон Витальевич, ИНН 771618975809	571
17	🔥 Антипаттерн в 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 — ключ к стабильному и предсказуемому поведению компонентов. 📲 Мы в MAX ✍️ @React_lib	605
18	🎯 Оптимизация ререндеров в 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 — он не даст забыть зависимости. 📲 Мы в MAX ✍️ @React_lib	560
19	🚀 Подборка полезных 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 Типичный Сисадмин 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика Программирование Go📌 https://max.ru/golang_lib Библиотека Go (Golang) разработчика Программирование React📌 https://max.ru/react_lib React Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика GitHub Сообщество 📌 https://max.ru/githublib Интересное из GitHub Базы данных (Data Base) 📌 https://max.ru/database_info Все про базы данных Фронтенд разработка 📌 https://max.ru/frontend_1 Подборки для frontend разработчиков Библиотеки 📌 https://max.ru/programmist_of Книги по программированию https://max.ru/proglb Библиотека программиста https://max.ru/bfbook Книги для программистов Программирование 📌 https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 Шутки программистов 📌 https://max.ru/itumor Шутки программистов Защита, взлом, безопасность 📌 https://max.ru/thehaking Канал о кибербезопасности https://max.ru/xakkep_1 Хакер Free Книги, статьи для дизайнеров 📌 https://max.ru/odesigners Статьи, книги для дизайнеров Математика 📌 https://max.ru/Pomatematike Канал по математике https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике Вакансии 📌 https://max.ru/progjob Вакансии в IT Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Бонус 📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы	438
20	🔥 Сегодня покажу, как настроить мгновенное обновление компонентов в 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-режиме. В проде всё остаётся стабильным и оптимизированным. 📲 Мы в MAX ✍️ @React_lib	529

عرض جميع المنشورات