React - Estadísticas y analítica del canal de Telegram @react

2 657

Сегодня я покажу вам фичу React, которую многие недооценивают — useCallback. Часто его либо используют слишком много, либо вообще не используют. А ведь он может здорово помочь оптимизировать ререндеры, особенно когда дело касается передачи функций в дочерние компоненты. Что делает useCallback? Он кэширует функцию, возвращая ту же ссылку, пока зависимости не изменятся.


const handleClick = useCallback(() => {
  console.log('Clicked!');
}, []);

Без него, при каждом ререндере компонента создаётся новая функция, и если вы передаёте её в props, это может триггерить лишние ререндеры у дочерних компонентов. Где реально нужен useCallback? - Когда функция передаётся в мемоизированный компонент (React.memo) - Когда функция используется в useEffect, useMemo или других хук-эффектах - Когда вы работаете с большими списками, и каждый элемент зависит от onClick или другого хендлера Где не нужен? - В простых компонентах без глубоких вложенностей - Когда вы не передаёте функцию в другие компоненты - Когда оптимизация важна меньше, чем читаемость Мини-пример


const Parent = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return <Child onClick={increment} />;
};

const Child = React.memo(({ onClick }: { onClick: () => void }) => {
  console.log('Child rendered');
  return <button onClick={onClick}>Click me</button>;
});

Если бы мы не использовали useCallback, Child бы перерендеривался каждый раз, даже если count не менялся внутри него. Пишите в комментах, как часто вы используете useCallback — помогает или только мешает? 📲 Мы в MAX ✍️ @React_lib

2 657

+4

👨‍💻 Фронтенд с AI: что можно делегировать агентам 5 октября, стартует конференция Podlodka Frontend Crew — сезон о том, как применять AI во фронтенд-разработке на практике. Участники конференции узнают: • Как находить prompt injection и противостоять таким атакам; • Какие подходы помогают повысить доверие к результатам агентской разработки; • Как проводить ревью кода, созданного AI-агентами; • Как AI помогает упростить починку багов. В программе ещё много практических кейсов. Также нужно отметить, что у конференции очень удобный формат. Это пять дней Zoom-сессий по утрам и вечерам и закрытое Telegram-комьюнити, где можно обсудить новый опыт и узнать от единомышленников то, что не догадаешься спросить у своей LLM. Приходите, чтобы разобраться, какие задачи уже можно делегировать AI, где важно сохранять контроль и как выстроить системную работу с AI в команде или проекте. Скидка по промокоду codepen 🔗 Программа и билеты: https://podlodka.io/fecrew

2 657

Сегодня покажу вам, как в 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>
  );
}

🔥 Очень советую попробовать на новом проекте. Работать с формами становится не только проще, но и приятно. 📲 Мы в MAX ✍️ @React_lib

2 657

Как сделать 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-трюк, но эффект — огромный. 📲 Мы в MAX ✍️ @React_lib

2 657

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

2 657

❌ Избегайте использования нескольких переменных состояния для отслеживания статуса. ✅ Вместо этого используйте перечисления (enums). 📲 Мы в MAX ✍️ @React_lib

2 657

Сегодня написал пост на тему, которая регулярно бьёт по скорости разработки: почему React-приложение “тормозит”, даже когда кажется, что код нормальный. Часто вижу одну и ту же ситуацию: компонент маленький, логика простая, данных немного, а интерфейс всё равно начинает дёргаться. Особенно в формах, таблицах и списках. Обычно проблема не в React как таковом. Проблема в том, что мы слишком поздно начинаем смотреть что именно ререндерится. Вот 3 вещи, которые я первым делом проверяю: 1. Родитель слишком “шумный” Если родительский компонент часто обновляет state, все дочерние компоненты тоже могут улетать в ререндер. Даже если визуально ничего не меняется. 2. useMemo и useCallback не спасают автоматически Их часто добавляют “на всякий случай”, но без понимания, где узкое место. В итоге код становится сложнее, а пользы - ноль. 3. Ключи в списках Нестабильные key - классика. Если в списке стоит index, React может пересоздавать элементы там, где не должен. Особенно больно это ощущается в интерактивных списках. Мой рабочий подход простой: • сначала открываю React DevTools Profiler • нахожу, какой компонент ререндерится чаще всего • проверяю, это реально нужно или нет • только потом оптимизирую Главная мысль: не оптимизируйте React вслепую. Сначала найдите источник лишних ререндеров. Очень часто после этого оказывается, что фикс занимает 5 минут, а не 2 часа. 📲 Мы в MAX ✍️ @React_lib

2 657

❌ Избегайте «прокидывания» пропсов (prop-drilling) для расширения компонентов ✅ Вместо этого используйте композицию 📲 Мы в MAX ✍️ @React_lib

2 657

🚀 Подборка полезных 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/channel_i_linux Системный администратор https://max.ru/channel_devopslib DevOps, SRE, Sysadmin https://max.ru/channel_devops_star DevOps Star (Звезда Девопса) Excel лайфхак 📌 https://t.me/Excel_lifehack Excel лайфхак Английский с нуля 🇬🇧 https://max.ru/UchuEnglish 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С https://max.ru/channel_DevLab1C 1С:Предприятие 8 Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика https://max.ru/channel_cpp_geek C++ geek Программирование Go📌 https://max.ru/golang_lib Библиотека Go (Golang) разработчика Программирование React📌 https://max.ru/react_lib React Программирование Rust📌 https://max.ru/channel_rust_lib Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика https://max.ru/channel_java_geek Java Geek 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 Обучающие видео, книги по Физике и Математике Вакансии в IT📌 https://max.ru/progjob https://max.ru/channel_rabotait Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Городские📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП https://max.ru/channel_krasnodar_novosty Краснодар Новости https://max.ru/channel_novosibirsk_novosti Новосибирск https://max.ru/channel_samara_novosti Новости Самары https://max.ru/channel_ekaterinburg_novosti Новости Екатеринбурга https://max.ru/channel_kazan_novosti Новости Казани https://max.ru/channel_omsk_novosti Новости Омска https://max.ru/channel_moskva_24 Москва 24

2 657

⚛️ Реактивность - это просто (и всего 35 строк кода) Мы часто воспринимаем реактивность в современных фреймворках (Vue, Solid, MobX или Preact Signals) как некую "магию". Кажется, что под капотом там сложные механизмы, доступные только избранным архитекторам. Автор блога romgrk решил развеять этот миф и показал, что базовый движок реактивности можно реализовать буквально за 35 строчек кода. В статье «Reactivity is easy» он разбирает ключевые концепции: 🔹 Signals (Сигналы) — контейнеры для значений. 🔹 Effects (Эффекты) — функции, которые реагируют на изменения. 🔹 Dependency Tracking — как именно эффект "узнает", на какие сигналы он подписан (спойлер: через глобальный контекст). Отличный материал для тех, кто хочет перестать бояться "магии" стейт-менеджеров и понять, как всё работает на уровне чистого JS. 👉 Читать статью: https://romgrk.com/posts/reactivity-is-easy #js #frontend #reactivity #architecture 📲 Мы в MAX ✍️ @React_lib

2 657

Сегодня хочу поговорить про типичную боль React-разработчиков - лишние ререндеры. Я регулярно вижу код, где приложение «тормозит», хотя логика простая. В 80% случаев причина банальна: компоненты перерисовываются без необходимости. Что я проверяю в первую очередь 1️⃣ props меняются по ссылке


<Component data={{ a: 1 }} />

Каждый рендер - новый объект → новый ререндер. Решение: useMemo. 2️⃣ функции создаются заново


onClick={() => doSomething()}

Если компонент обёрнут в memo - он всё равно будет ререндериться. Решение: useCallback. 3️⃣ memo используется «для галочки» React.memo без анализа - зло. Если props всегда новые → memo бесполезен и даже мешает. 4️⃣ state лежит слишком высоко Когда useState в родителе, а нужен только одному дочернему компоненту - привет лишним обновлениям. Мой личный чек-лист - Сначала DevTools → Highlight updates - Потом проверяю ссылки - И только в конце - memo, useMemo, useCallback ⚠️ Важно: оптимизация, это не рефлекс, а осознанный шаг. Сначала простота, потом скорость. 📲 Мы в MAX ✍️ @React_lib

2 657

🚀 Подборка полезных 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/channel_i_linux Системный администратор https://max.ru/channel_devopslib DevOps, SRE, Sysadmin https://max.ru/channel_devops_star DevOps Star (Звезда Девопса) Excel лайфхак 📌 https://t.me/Excel_lifehack Excel лайфхак Английский с нуля 🇬🇧 https://max.ru/UchuEnglish 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С https://max.ru/channel_DevLab1C 1С:Предприятие 8 Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика https://max.ru/channel_cpp_geek C++ geek Программирование Go📌 https://max.ru/golang_lib Библиотека Go (Golang) разработчика Программирование React📌 https://max.ru/react_lib React Программирование Rust📌 https://max.ru/channel_rust_lib Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика https://max.ru/channel_java_geek Java Geek 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 Обучающие видео, книги по Физике и Математике Вакансии в IT📌 https://max.ru/progjob https://max.ru/channel_rabotait Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Городские📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП https://max.ru/channel_krasnodar_novosty Краснодар Новости https://max.ru/channel_novosibirsk_novosti Новосибирск https://max.ru/channel_samara_novosti Новости Самары https://max.ru/channel_ekaterinburg_novosti Новости Екатеринбурга https://max.ru/channel_kazan_novosti Новости Казани https://max.ru/channel_omsk_novosti Новости Омска https://max.ru/channel_moskva_24 Москва 24

2 657

🔥 Антипаттерн в 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

2 657

🚀 Что такое условный рендеринг в React и зачем он нужен? Если говорить просто, условный рендеринг - это способность вашего React-приложения решать, что именно показывать пользователю в зависимости от определенных условий (состояния, пропсов и т.д.). Думайте об этом как о "if... else...", но для вашего пользовательского интерфейса (UI). - ЕСЛИ пользователь вошел в систему, ТО показать компонент <UserProfile />. - ИНАЧЕ показать компонент <LoginForm />. 💡 Для чего он нужен? Без условного рендеринга все наши приложения были бы статичными. Именно эта концепция делает интерфейс динамическим, "живым" и отзывчивым. Он нужен буквально повсюду. Вот самые частые примеры: - Пока идет загрузка данных с сервера: Мы показываем <Spinner /> (крутилку). Как только данные пришли — показываем <DataList />. - Аутентификация: Показываем "Профиль", если isLoggedIn === true, и "Войти", если isLoggedIn === false. - Обработка ошибок: Если при загрузке произошла ошибка, мы показываем <ErrorMessage /> вместо контента. - Пустые состояния: Показываем "Ваша корзина пуста", если cart.items.length === 0, и список товаров, если в ней что-то есть. - Интерактив: Показ/скрытие модальных окон, выпадающих меню или вкладок по клику. 🛠️ Как это сделать? В React есть несколько популярных способов: 1. Тернарный оператор (? :) - самый частый выбор. {isLoading ? <Spinner /> : <Content />} 2. Логический оператор "И" (&&) - идеален, когда вам нужно что-то показать или не показать ничего (нет ветки "else"). {hasMessages && <NotificationBadge />} 3. Обычный if/else - используется внутри тела компонента, до return, для более сложной логики. Условный рендеринг - это не просто "фича", это сам смысл React. Это то, что позволяет вашему UI реагировать на изменения данных и действия пользователя. #React #JavaScript #Frontend #Development #ConditionalRendering 📲 Мы в MAX ✍️ @React_lib

2 657

Кастомные хуки (Custom Hooks). Создаем свой первый кастомный хук useWindowSize Сегодня напишем простой, но очень полезный хук - useWindowSize. Он будет отслеживать ширину и высоту окна браузера. Это пригодится, если вам нужно менять верстку (например, скрывать сайдбар) при изменении размера экрана. Мы создадим функцию, которая: 1. Использует useState для хранения размеров. 2. Использует useEffect для подписки на событие resize. 3. Важно: Не забываем удалять обработчик событий (cleanup function), чтобы не нагружать память! Вот готовый пример. Можете сохранить его в файл useWindowSize.js.


import { useState, useEffect } from 'react';

// Наш кастомный хук
function useWindowSize() {
  // 1. Инициализируем состояние
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });

  useEffect(() => {
    // Функция для обновления состояния
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    
    // Устанавливаем размер сразу при загрузке
    handleResize(); 
    
    // 2. Добавляем слушатель события изменения размера окна
    window.addEventListener("resize", handleResize);
    
    // 3. Очистка: удаляем слушатель при размонтировании
    return () => window.removeEventListener("resize", handleResize);
  }, []); // Пустой массив зависимостей = запускаем один раз

  return windowSize;
}

export default useWindowSize;

🚀 Как это использовать в компоненте? Теперь ваш компонент становится чистым и понятным. Никакой лишней логики внутри!


import React from 'react';
import useWindowSize from './useWindowSize';

const App = () => {
  // Просто вызываем наш хук
  const { width, height } = useWindowSize();

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>📏 Размер окна</h1>
      <p>Ширина: <strong>{width}px</strong></p>
      <p>Высота: <strong>{height}px</strong></p>
      
      {width < 600 ? (
        <p>📱 Похоже, вы на мобильном устройстве!</p>
      ) : (
        <p>💻 Это десктопная версия.</p>
      )}
    </div>
  );
};

export default App;

📲 Мы в MAX ✍️ @React_lib

2 657

🎯 Сегодня покажу вам простой, но мощный приём: как ускорить React-приложение с помощью мемоизации списков Каждый из нас рендерит списки: товары, заявки, комментарии, юзеров - список бесконечен. И одна из самых частых проблем: каждый элемент списка перерендеривается даже при минимальном изменении родителя. Сегодня разбираем реальный кейс и решение, которое спасает производительность. 🔥 Проблема У нас есть список задач, и при обновлении одной задачи - перерендериваются все элементы списка. Визуально это незаметно, но при больших списках производительность падает. Причина проста: у каждого элемента меняется ссылка на props → компонент считается обновлённым → React перерендеривает его. 💡 Решение: React.memo + useCallback Вот минимальный рабочий пример. Компонент элемента списка


const TaskItem = React.memo(function TaskItem({ task, onToggle }) {
  console.log("Render:", task.title);
  return (
    <div>
      <input
        type="checkbox"
        checked={task.done}
        onChange={() => onToggle(task.id)}
      />
      {task.title}
    </div>
  );
});

Родитель


function TaskList() {
  const [tasks, setTasks] = useState(data);

  const toggle = useCallback(id => {
    setTasks(prev =>
      prev.map(t => (t.id === id ? { ...t, done: !t.done } : t))
    );
  }, []);

  return tasks.map(task => (
    <TaskItem key={task.id} task={task} onToggle={toggle} />
  ));
}

🚀 Что это даёт? - React.memo не даст компоненту перерендериться без изменения реальных данных. - useCallback создаёт стабильную ссылку на функцию. - Итог: перерендерятся только изменённые элементы, остальное остаётся нетронутым. При 500+ элементах разница ощущается моментально. 📲 Мы в MAX ✍️ @React_lib

2 657

🚀 Подборка полезных 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/channel_i_linux Системный администратор https://max.ru/channel_devopslib DevOps, SRE, Sysadmin https://max.ru/channel_devops_star DevOps Star (Звезда Девопса) Excel лайфхак 📌 https://t.me/Excel_lifehack Excel лайфхак Английский с нуля 🇬🇧 https://max.ru/UchuEnglish 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С https://max.ru/channel_DevLab1C 1С:Предприятие 8 Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика https://max.ru/channel_cpp_geek C++ geek Программирование Go📌 https://max.ru/golang_lib Библиотека Go (Golang) разработчика Программирование React📌 https://max.ru/react_lib React Программирование Rust📌 https://max.ru/channel_rust_lib Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика https://max.ru/channel_java_geek Java Geek 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 Обучающие видео, книги по Физике и Математике Вакансии в IT📌 https://max.ru/progjob https://max.ru/channel_rabotait Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Бонус 📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП

2 657

Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании? На фото ребята из моего комьюнити, где уже больше 220 frontend-разработчиков. Все они успешно устроились в крутые компании и получили офферы от 300 тыс рублей 🫂 👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке.

В их жизни больше нет бесконечных скучных созвонов, безуспешных откликов на вакансии, странноватых собесов с вопросами словно ты на олимпиаде.

И у тебя тоже получится 😎 У меня есть канал, где я: 👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения 👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти 👉 На примерах показываю, как проходить собеседования, включая техничку 👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров И регулярно выкладываю полезное: ▪️ Задачи, на которых валятся кандидаты ▪️ Подборка из 100+ каналов с вакансиями для разработчиков ▪️ 100 вопросов, которые помогут тебе на собеседовании ▪️ Чек-лист для проверки своего резюме Подписывайся: https://t.me/+yKkCEerQCzRmZjY6 Реклама, erid: 2W5zFHYzE6u ИП Галактионов Тихон Витальевич, ИНН 771618975809

2 657

🧠 Сегодня я покажу вам трюк, который ускоряет ре-рендеры в React на реальных проектах Иногда компонент начинает перерендериваться слишком часто, даже когда его пропсы не меняются. Особенно это заметно в списках, формах и сложных UI. Сегодня я расскажу, как я на проектах использую мемоизацию коллбеков и данных, чтобы UI перестал «дергаться». 🔥 Проблема Допустим, есть список элементов, и каждый элемент получает проп onSelect, который создаётся при каждом рендере родителя:


const handleSelect = id => {
  setSelected(id);
};

Каждый раз новая функция → дочерние элементы думают, что проп изменился → ненужный ререндер. ✅ Решение Используйте useCallback:


const handleSelect = useCallback((id) => {
  setSelected(id);
}, []);

Но самое интересное - часто хватает мемоизации не всех, а только “горячих” функций. Я обычно включаю профайлер, смотрю самые частые ререндеры и мемоизирую только узкие места. Так производительность улетает вверх без лишнего усложнения кода. 🎯 Практическое правило, которое я использую

Мемоизируйте только то, что реально ререндерится слишком часто. Слепая мемоизация = грязный код.

📲 Мы в MAX ✍️ @React_lib

2 657

Почему useEffect - это не костыль, а инструмент, и как им не надо пользоваться 😅 Очень часто вижу в коде:


useEffect(() => {
  fetchData();
}, []);

и всё вроде бы ок… пока не появляется зависимость, вроде userId, и кто-то лениво добавляет её в массив зависимостей, не понимая, что произойдёт при каждом изменении. 👉 Проблема не в useEffect - а в том, что мы не до конца понимаем его модель. useEffect = реакция на изменение состояния. Если у тебя эффект, который не зависит от UI - например, загрузка данных - вынеси его в кастомный хук или вообще за пределы компонента. Например:


function useUser(userId) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let ignore = false;
    async function load() {
      const data = await fetch(`/api/user/${userId}`).then(r => r.json());
      if (!ignore) setUser(data);
    }
    load();
    return () => (ignore = true);
  }, [userId]);

  return user;
}

Теперь у тебя эффект чистый, изолированный и переиспользуемый. Компонент не знает ничего про загрузку - он просто получает user. 💡 Маленький лайфхак: если ты пишешь эффект и не можешь объяснить словами, почему он зависит от этих переменных - скорее всего, архитектура требует пересмотра, а не новый костыль в useEffect. 📲 Мы в MAX ✍️ @React_lib