React

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

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

إظهار المزيد

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

2 681

المشتركون

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

-27 أيام

-1530 أيام

417

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

~ 18324 ساعات

~ 21148 ساعات

15.55%

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

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

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

Ads index

beta

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

2 681

📕От нуля до пиццы за 60 минут: Angular Reactive Forms в бою - разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue) На открытом уроке 13 ноября в 20:00 мск мы погрузимся в создание интерактивного конструктора пиццы с использованием Angular Reactive Forms и сигналов. 📗 На вебинаре: 1. Понимание архитектуры компонентов и Template syntax: директивы, биндинги, pipes 2. Погружение в Event handling и реактивность 📘 В результате на практике изучите и освоите создание и настройка форм через FormBuilder, работу с FormGroup и FormControl, валидацию данных и обработку ошибок. 👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cRfr0P Все участники открытого урока получат скидку на курс "Angular Developer" Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

2 681

Почему 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. ✍️ @React_lib

2 681

📕Angular UI-Kit с нуля: Как построить библиотеку переиспользуемых компонентов - разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue) На открытом уроке 29 октября в 20:00 мск мы разберёмся в применении Angular Reactive Forms и сигналов: 📗 На вебинаре: 1. Template syntax: директивы, биндинги, pipes. 2. Event handling и реактивность. 📘 В результате на практике изучите и освоите создание и настройка форм через FormBuilder, работу с FormGroup и FormControl, валидацию данных и обработку ошибок. 👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cQL6nz Все участники открытого урока получат скидку на курс "Angular Developer" Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

2 681

⚛️ Я собрал визуализацию того, как работает процесс рендеринга в React Надеюсь, она поможет вам понять этот процесс и позволит лучше предсказывать и контролировать изменения UI. Trigger → Render → Commit ✍️ @React_lib

2 681

🚀 Оптимизация React-приложения: 5 техник, которые работают Сегодня расскажу вам, как можно ускорить работу React-приложения, если оно начинает тормозить. 1️⃣ Используйте React.memo Если ваш компонент ререндерится без причины, оберните его в React.memo(). Это предотвратит ненужные перерисовки, если пропсы не изменились.


const OptimizedComponent = React.memo(({ data }) => {
  return <div>{data}</div>;
});

2️⃣ Оптимизируйте контекст с useMemo и useCallback Частая ошибка — передача в useContext сложных объектов без мемоизации. Используйте useMemo и useCallback для оптимизации.


const value = useMemo(() => ({ user, logout }), [user]);

3️⃣ Разбейте состояние на атомарные части Часто программисты хранят весь стейт в одном useState, но лучше разбить его на части. Так обновление одной переменной не будет вызывать ререндер всего компонента.


const [name, setName] = useState("");  
const [age, setAge] = useState(0);

4️⃣ Динамическая подгрузка компонентов (Code Splitting) Если у вас большое приложение, используйте React.lazy для загрузки компонентов по требованию.


const LazyComponent = React.lazy(() => import("./BigComponent"));

5️⃣ Используйте производительные списки Если у вас много элементов (список в 1000+ элементов), используйте виртуализацию, например, react-window или react-virtualized.


import { FixedSizeList as List } from "react-window";

<List height={400} itemCount={items.length} itemSize={35}>
  {({ index, style }) => <div style={style}>{items[index]}</div>}
</List>;

✍️ @React_lib

2 681

🚀 Хотите создавать современные и отзывчивые веб-приложения на самом популярном JS-фреймворке? Начните с бесплатного вебинара и прокачайте навыки React прямо «здесь и сейчас»! 🗓 28 октября, 20:00 — «Галерея с API и тёмной темой — React зажигает UX» Что узнают участники: - Связь React с реальным API и динамическая загрузка данных - Работа с событиями и хуками для интерактивного интерфейса - Lazy loading и его влияние на UX - Как собрать полноценное приложение всего за 1,5 часа 🎯 Для фронтенд-разработчиков и начинающих React-разработчиков, которые хотят оживить интерфейсы и собрать мини-проект для портфолио. 💻 Курс «React.js Developer» - следующий шаг после вебинара: - Освоите Redux, Redux-Saga, Redux-thunk - Будете создавать SPA и оптимизировать под production - Изучите TypeScript и пишете чистый код - Работаете с GraphQL, Apollo, Relay - Разбираетесь с Webpack, Babel и паттернами функционального программирования ⚡️ Не упустите шанс - вебинар бесплатный, а курс поможет выйти на уровень middle+ и собирать проекты с реальными API! Регистрируйтесь на вебинар: https://vk.cc/cQnPZ7 Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

2 681

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

2 681

Custom Hooks Часто мы пишем один и тот же код в разных компонентах: работа с localStorage, отслеживание размеров окна, дебаунс запросов. И вот тут кастомные хуки реально спасают. Например, простой хук для работы с localStorage 👇


import { useState } from "react";

function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  const setStoredValue = (newValue: T) => {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  };

  return [value, setStoredValue] as const;
}

export default useLocalStorage;

Теперь можно использовать так:


const [theme, setTheme] = useLocalStorage("theme", "light");

🔥 Плюсы: - код становится чище и переиспользуемым; - избавляемся от дублирования логики; - легко тестировать и поддерживать. Я заметил, что когда начинаешь собирать библиотеку своих хуков, разработка ускоряется в разы. Советую прямо сегодня завести папку hooks и складывать туда такие полезности. ✍️ @React_lib

2 681

Как frontend-разработчику получить оффер в Bigtech? Ты уже давно в профессии, но до сих пор в компании, которая тебя не ценит. Зарплата не растёт, задачи скучные. Хочешь сменить работу, но технические собеседования всё сложнее, а на отклики на hh только отказы и тестовые? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK, Т-Банк. Хочется стабильности, интересных задач и наконец-то попасть в сильную команду...

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Bigtech и сопровождаю на испытательном сроке.

На своем канале: 👉публикую видео с решением задач, которые прямо сейчас дают крупные компании на собеседованиях 👉даю примеры по прохождению собеседований 👉разбираю резюме и докручиваю резюме подписчиков 👉И просто создаю дружелюбное, комфортное сообщество, где коллеги всегда готовы подсказать и поддержать вас 🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки. Подписывайся и получай максимум пользы, а нас уже больше 3500 🤓: frontend_punks Реклама, erid : 2W5zFGwJB1r ИП Галактионов Тихон Витальевич, ИНН 771618975809

2 681

2 681

✍️ @React_lib

2 681

Выжимка самого полезного о библиотеке Motion для React из англоязычной документации Когда я начал разбираться с Motion для React, то оказалось, что свежих обзорных статей почти нет — нашёл только несколько старых постов про framer-motion. Поэтому я решил написать свой обзор: перевёл и разобрал документацию (ссылки в конце), попробовал библиотеку в деле и собрал всё в одном месте. В статье есть примеры кода, GIF-анимации и описание хуков, которых, по моему личному мнению, достаточно, чтобы понять Motion, и, возможно, попробовать его руками, сэкономив время на чтении документации. https://habr.com/ru/companies/alfa/articles/942624/ ✍️ @React_lib

2 681

Формы без боли: react-hook-form + zod = схема в центре, минимум ререндеров Сейчас покажу, как я собираю формы так, чтобы валидация была в одном месте, а компоненты не прыгали от каждого ввода. 1) Схема — источник правды


import { z } from 'zod';

export const userSchema = z.object({
  email: z.string().email(),
  age: z.number().int().min(18),
  newsletter: z.boolean().default(false),
});
export type UserForm = z.infer<typeof userSchema>;

2) Инициализация формы с резолвером


import { useForm, FormProvider } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

const UserForm = ({ initial }: { initial?: Partial<UserForm> }) => {
  const methods = useForm<UserForm>({
    resolver: zodResolver(userSchema),
    defaultValues: { newsletter: false, ...initial },
    mode: 'onChange', // мгновенная подсветка ошибок
  });

  const { handleSubmit, formState: { isSubmitting, errors } } = methods;

  const onSubmit = async (data: UserForm) => {
    // маппим серверные ошибки обратно в форму при необходимости
    // setError('email', { type: 'server', message: 'уже занято' })
    await api.saveUser(data);
  };

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Input name="email" label="Email" />
        <NumberInput name="age" label="Возраст" />
        <Checkbox name="newsletter" label="Подписаться" />
        {errors.root && <p className="error">{errors.root.message}</p>}
        <button disabled={isSubmitting}>Сохранить</button>
      </form>
    </FormProvider>
  );
};

3) Поля - через контекст, с мемоизацией


import { useFormContext, Controller } from 'react-hook-form';

// Простой контролируемый инпут с минимальными ререндерами
export const Input = React.memo(({ name, label }: { name: string; label: string }) => {
  const { register, formState: { errors } } = useFormContext();
  return (
    <label>
      {label}
      <input {...register(name)} />
      {errors[name] && <span className="error">{String(errors[name]?.message)}</span>}
    </label>
  );
});

// Пример для нестандартного компонента через Controller
export const NumberInput = React.memo(({ name, label }: { name: string; label: string }) => {
  const { control, formState: { errors } } = useFormContext();
  return (
    <label>
      {label}
      <Controller
        control={control}
        name={name}
        render={({ field }) => <input type="number" {...field} />}
      />
      {errors[name] && <span className="error">{String(errors[name]?.message)}</span>}
    </label>
  );
});

4) Динамические списки - useFieldArray


const { control } = useFormContext();
const { fields, append, remove } = useFieldArray({ control, name: 'phones' });

Храните массивы в форме, рендерите по fields, добавляйте/удаляйте кнопками - ререндерится только нужный участок. 5) Практические советы - Включайте DevTools формы только в dev. - Ошибки сервера маппьте через setError, а не кидайте alert. - При редактировании сущности меняйте key формы (<form key={user.id}>) — проще, чем делать reset в куче мест. - Дорогие поля оборачивайте в React.memo, а вычисления — в useMemo. ✍️ @React_lib

2 681

Почему ваш useEffect лишний (и что вместо него) Сейчас покажу 6 типичных случаев, где useEffect не нужен и только плодит баги и лишние рендеры. Дам короткие «до/после». 1. Вычисляемое из пропсов/стейта ❌ Плохо


const [fullName, setFullName] = useState('');
useEffect(() => { setFullName(`${user.first} ${user.last}`); }, [user]);

✅ Хорошо


const fullName = `${user.first} ${user.last}`;

2. Фильтрация/сортировка списка ❌ Плохо


const [filtered, setFiltered] = useState<Item[]>([]);
useEffect(() => { setFiltered(items.filter(byQuery(query))); }, [items, query]);

✅ Хорошо


const filtered = useMemo(() => items.filter(byQuery(query)), [items, query]);

3. Счётчики/таймеры для UI ❌ Плохо — пишут в стейт каждую секунду, лишний рендер ✅ Лучше — храните в useRef, рендерите только когда нужно показать новое число:


const tickRef = useRef(0);
useEffect(() => {
  const id = setInterval(() => { tickRef.current++; }, 1000);
  return () => clearInterval(id);
}, []);
// Когда надо отрисовать — дерните setState из контролируемой точки.

4. Синхронизация формы с данными ❌ Плохо — «заливают» в стейт через эффект ✅ Лучше — передавайте значения как defaultValue/values в форму или используйте «ключ» для ремонта формы:


<form key={user.id}>...</form>

5. Запросы данных ❌ Плохо — «сами» тащим fetch в эффект, пишем кэш, статус, отмену ✅ Лучше — вынесите в data-layer (например, TanStack Query) или хотя бы в отдельный хук с кэшем и отменой. 6. События окна/документа Если обработчик не использует реактивные данные — храните его в useRef и вешайте один раз. Если использует — чаще всего достаточно мемоизировать колбэк и вешать/снимать один раз.


const handlerRef = useRef<(e: KeyboardEvent) => void>(() => {});
handlerRef.current = (e) => { /* читаем актуальные значения из замыканий/рефов */ };

useEffect(() => {
  const onKey = (e: KeyboardEvent) => handlerRef.current(e);
  window.addEventListener('keydown', onKey);
  return () => window.removeEventListener('keydown', onKey);
}, []);

Мини-чеклист «нужен ли тут эффект?» - Это побочный эффект вне React (I/O, подписка, таймер, манипуляция DOM)? → Да — useEffect. - Это чистое вычисление на основе пропсов/стейта? → Нет эффекта, используем выражение/useMemo. - Можно ли пересчитать при рендере без записи в стейт? → Делайте это. - Будет ли этот эффект легко зафлапать гонками? → Пересмотрите дизайн. ✍️ @React_lib

2 681

Динамический импорт компонентов в React. Часто в приложении мы грузим сразу всё, даже то, что пользователю может и не понадобиться. Например, модальные окна, сложные графики, админские панели. Это увеличивает бандл и замедляет загрузку. Решение простое — использовать React.lazy и Suspense:


import { Suspense, lazy } from "react";

const Chart = lazy(() => import("./Chart"));

function Dashboard() {
  return (
    <div>
      <h1>Статистика</h1>
      <Suspense fallback={<p>Загрузка графика...</p>}>
        <Chart />
      </Suspense>
    </div>
  );
}

Теперь график подгрузится только тогда, когда реально нужен. ⚡ Это экономит мегабайты и ускоряет first paint приложения. 👉 Но будь аккуратен: динамический импорт хорошо работает для редко используемых частей. А если компонент нужен почти всегда — выгоды не будет. Я, например, почти всегда лениво загружаю модальные окна и тяжелые виджеты. А ты используешь React.lazy у себя в проекте? ✍️ @React_lib

2 681

🚀 С 25 по 30 августа пройдёт Podlodka React Crew #3 — сезон о паттернах и практиках фронтенда. В программе: 💡 Паттерны и подводные камни View Transition API в React (Николай Шабалин, СберЗдоровье) 🧠 Глубокое погружение в архитектуру React Hooks (Максим Никитин, Rocket Science) ⚙️ Разбор FSD 2.1 на практике, без догм (Лев Челядинов, FSD Core team) 📚Подготовка к архитектурному интервью для фронтендеров (Игорь Антонов, Т-Банк) 📐Layout-паттерны за пределами Flexbox и CSS Grid (Саша Илатовский, Albato) 🎯 Все темы прикладные, с практикой и кейсами. 🔗 Подробности и билеты P.S: Для подписчиков группы React скидка 500 р по промокоду react_crew_3_Osn1zQ

2 681

Сегодня хочу показать вам один из практичных паттернов в React - Container & Presentational Components. Очень часто мы мешаем бизнес-логику и UI в одном компоненте. Это делает код тяжелым для поддержки, особенно в больших проектах. ⚡️ Подход простой: - Container-компоненты отвечают за работу с данными: запросы к API, обработку состояния, вызовы хендлеров. - Presentational-компоненты - только за отображение. Они получают данные и колбэки через props и не думают о том, откуда эти данные пришли. Пример 👇


// Container
function UserContainer() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch("/api/user")
      .then(res => res.json())
      .then(setUser);
  }, []);

  return <UserProfile user={user} />;
}

// Presentational
function UserProfile({ user }) {
  if (!user) return <p>Загрузка...</p>;
  return <h2>{user.name}</h2>;
}

👉 Такой подход облегчает тестирование, переиспользование компонентов и уменьшает связность. А как вы пишете? Делите логику и UI или чаще держите все в одном компоненте? ✍️ @React_lib

2 681

Всем доброго вечера! Сегодня я хочу рассказать вам о проблеме, которая встречается почти у каждого React-разработчика - "эффект дрожания" интерфейса при условном рендеринге. Допустим, у вас есть компонент, который отображает список данных после загрузки. Пока данные подгружаются, вы показываете спиннер, а потом - сам список. Всё вроде нормально… но при переключении состояния верстка “прыгает”, элементы смещаются, и пользователь видит неприятный скачок. 💡 Как решить? Главная идея — зарезервировать место под контент заранее. Даже если мы показываем скелетон или спиннер, блок должен иметь такую же высоту, как и итоговый контент. Например:


{isLoading ? (
  <div style={{ height: 300 }}>
    <Spinner />
  </div>
) : (
  <List items={data} />
)}

А ещё лучше — использовать скелетон-загрузчик (skeleton loader). Он повторяет форму будущего контента, и благодаря этому переключение происходит плавно и без сдвигов. 📌 Совет: в UI-библиотеках вроде Material UI или Ant Design уже есть готовые скелетоны - просто используйте их вместо "чистого" спиннера. Пользователь не заметит перехода, и приложение будет казаться быстрее. А у вас бывает, что верстка дергается при смене состояния? Как вы это решаете? ✍️ @React_lib

2 681

🤩Хотите, чтобы ваши React-приложения не просто работали, а вызывали вау-эффект? Присоединяйтесь к открытому уроку «Анимируем React: от нуля до вау-эффекта» 12 августа в 20:00 МСК. Мы покажем, как создать живые, отзывчивые интерфейсы с помощью библиотеки анимаций Framer Motion и API Intersection Observer. Разберём, как добавить современный UX без перегрузки сторонними библиотеками, чтобы каждый элемент интерфейса был динамичным и запоминающимся. Освойте практические подходы и техники, которые используют профессионалы для создания визуально выразительных интерфейсов. Получите знания, которые значительно улучшат ваш опыт в React. ⚡️Присоединяйтесь к открытому вебинару и получите скидку на курс «React.js Developer»: https://vk.cc/cOkYCL Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

2 681

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