⚛️ Если вы используете fetch() в useEffect, вам, вероятно, стоит посмотреть это короткое видео

✍️ @React_lib

React 19: что нового в самой популярной библиотеке для создания интерфейсов? Узнайте первыми!

Новые хуки, улучшения рефов, кастомные элементы — React становится ещё удобнее. И мы готовы рассказать, как использовать это на практике.

Хотите быть на пике технологий? На открытом вебинаре 6 февраля в 19:00 мск разберём, как применять нововведения React 19 в реальных проектах.

Все участники получат скидку на большое обучение «React.js Developer» — идеальный способ прокачать навыки.

Записаться: https://vk.cc/cI3bho

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Эффективное тестирование хуков React с помощью Vitest

В этой статье рассматривается использование Vitest и библиотеки React Testing Library для модульного тестирования хуков React таким образом, чтобы их было легко поддерживать и расширять.

https://mayashavin.com/articles/test-react-hooks-with-vitest

✍️ @React_lib

⚛️ Совет по React: Используйте пользовательский хук для управления состоянием массивов в ваших компонентах.

✍️ @React_lib

🔥Podlodka React Crew – онлайн-конференция для React-разработчиков.

И в новом сезоне ребята решили разобраться, какие инструменты и знания включают в роадмапы профессионального развития и насколько они применимы.

Что в программе:

💬 Говорим на одном языке с пользователями: i18n в React-приложениях – Виталий Баев, контрибьютор Next.js и Vite 🌍 Как выбрать инструменты и сделать интерфейс удобным для всех?

📡 OpenTelemetry для фронтенд-разработчика – Валерий Катцин, frontend-разработчик в Точке 📊 Как собирать данные о работе приложения и использовать их для улучшения продукта?

🔥 "Долгожданный" React 19 – Алекс Рассудихин, разработчик с опытом во Vue, React, Next и Astro 🚀 Какие фичи вышли в продакшен, а какие – нет?

🤖 AI Integrated Developer Experience – Марк Байдебура, Senior Full-stack Engineer в Influencer 🧠 Где AI реально помогает, а где пока его лучше не использовать?

📅 Конференция пройдет 10-14 февраля.

Ты не просто узнаешь по новые фичи и подходы, но и определишься, какие из них включить в свой roadmap и как расти дальше.

🔗 Регистрируйтесь: podlodka.io/reactcrew

Интерактивное руководство по рендерингу в React

В чистом виде React - это библиотека для построения пользовательских интерфейсов. Она настолько проста, что всю ментальную модель можно представить в виде формулы v = f(s) - где ваше представление является просто функцией вашего состояния.

Хотя это уравнение дает нам простую мысленную модель работы React, есть один аспект уравнения, который до сих пор, после стольких лет, кажется, смущает людей. Когда и как именно вызывается f? Или, говоря иначе, когда и как React обновляет представление?

Этой, казалось бы, простой теме посвящено множество постов в блогах, докладов на конференциях и сообщений в твиттере. И все же почему-то даже опытные разработчики React имеют некоторые (часто неизвестные) заблуждения на этот счет.

https://ui.dev/why-react-renders

✍️ @React_lib

❌ Избегайте использования нескольких переменных состояния для отслеживания статуса.

✅ Вместо этого используйте перечисления (enums).

✍️ @React_lib

🚀 Оптимизация 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

🔥 Оптимизация React-приложения: Код-сплиттинг с React.lazy

Сегодня расскажу о код-сплиттинге в React — мощном инструменте для ускорения загрузки приложения.

Когда наше приложение растёт, бандл становится тяжёлым, а время загрузки — длиннее. Решение? Код-сплиттинг. Он позволяет загружать только нужные компоненты, а не весь код сразу.

Как это работает?
Используем React.lazy() и Suspense, чтобы загружать компоненты только когда они реально нужны.

📌 Пример:

import React, { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <h1>Главная страница</h1>
      <Suspense fallback={<p>Загрузка...</p>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Здесь HeavyComponent загружается только тогда, когда он нужен, а пока он загружается — показывается fallback.

📍 Где это использовать?
✔ Ленивые модули
✔ Большие страницы (Dashboard, Profile)
✔ Админ-панели
✔ Карты, графики, таблицы

Но помни: React.lazy работает только для компонентов. Для остального кода (например, утилит) лучше использовать динамический импорт (import()).

Попробуй внедрить код-сплиттинг в свой проект и скажи, насколько ускорилась загрузка! 🚀

✍️ @React_lib

Как я ускоряю работу с React-компонентами 🚀

Сегодня хочу поделиться трюком, который значительно ускорил мою разработку в React. Речь о создании базовых шаблонов компонентов.

В чем суть?
Каждый раз, когда начинаешь писать новый компонент, приходится проделывать одно и то же:
✅ Создавать файл,
✅ Импортировать React,
✅ Прописывать базовую структуру,
✅ Экспортировать компонент.

Решение: создать alias-команду или snippet в VS Code, который автоматически генерирует заготовку компонента!

Как это сделать?
🔹 Вариант 1. Используем VS Code Snippets
1. Открываем команду Preferences: Configure User Snippets
2. Выбираем javascript (или typescript),
3. Добавляем сниппет:

"React Functional Component": {
  "prefix": "rfc",
  "body": [
    "import React from 'react';",
    "",
    "const ${1:ComponentName} = () => {",
    "  return (",
    "    <div>",
    "      ${2:Hello, world!}",
    "    </div>",
    "  );",
    "};",
    "",
    "export default ${1:ComponentName};"
  ],
  "description": "Создает базовый функциональный компонент"
}

Теперь, когда я пишу rfc и нажимаю Tab, код заполняется автоматически! 🔥

🔹 Вариант 2. Используем CLI-команду
Если вы используете bash или zsh, можно создать команду:

echo "import React from 'react';\n\nconst Component = () => {\n  return <div>Hello, world!</div>;\n};\n\nexport default Component;" > NewComponent.js

Теперь одним вызовом скрипта можно создать новый файл с базовой структурой!


Сниппеты и автоматизация таких рутинных задач позволяют не тратить время на однотипные действия. Используете что-то подобное в своей работе? Делитесь своими лайфхаками! 👇

✍️ @React_lib

Как писать чистый код в React? 🤔

Я знаю, что все хотят писать идеальный код, но реальность такова: зачастую приходится разбираться с грязными, запутанными компонентами. Сегодня покажу вам несколько принципов, которые помогут держать код в порядке.

1️⃣ Разбивайте компоненты 📌
Если ваш компонент растет и становится слишком сложным, разделите его на более мелкие части. Например, если у вас в компоненте 200 строк, скорее всего, это уже слишком.

❌ Плохо:

const Profile = ({ user }) => {
  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
      <button>Follow</button>
    </div>
  );
};

✅ Хорошо:

const Avatar = ({ src, alt }) => <img src={src} alt={alt} />;
const UserInfo = ({ name, bio }) => (
  <>
    <h2>{name}</h2>
    <p>{bio}</p>
  </>
);
const FollowButton = () => <button>Follow</button>;

const Profile = ({ user }) => (
  <div>
    <Avatar src={user.avatar} alt={user.name} />
    <UserInfo name={user.name} bio={user.bio} />
    <FollowButton />
  </div>
);

2️⃣ Используйте useMemo и useCallback ⚡
Если передаете функции в пропсы или у вас тяжелые вычисления, используйте мемоизацию.

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

3️⃣ Следите за зависимостями в useEffect 🔍
Ловушка многих новичков: забывают указывать зависимости или наоборот — указывают лишнее.

❌ Так делать нельзя:

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

✅ Правильный вариант:

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

Чистый код — это не просто прихоть, а необходимость! Если писать код аккуратно, вам (и вашим коллегам) будет проще его поддерживать.

А какие принципы чистого кода используете вы? Делитесь в комментариях! 👇

✍️ @React_lib

📌 Оптимизация производительности React-приложения: useMemo и useCallback

Привет, друзья! Сегодня расскажу, как useMemo и useCallback помогают оптимизировать React-приложения.

🚀 Проблема
Когда компоненты ререндерятся слишком часто, производительность падает. Особенно если в них тяжелые вычисления или вложенные коллбэки, передающиеся в дочерние компоненты.

🛠 Решение: useMemo и useCallback

✅ useMemo – мемоизирует результат вычислений, чтобы не пересчитывать одно и то же на каждом ререндере.

const expensiveCalculation = useMemo(() => {
  return someHeavyFunction(data);
}, [data]); // Пересчитается только при изменении data

✅ useCallback – мемоизирует саму функцию, чтобы не создавать новую при каждом ререндере. Это полезно, если передаёте коллбэк в дочерний компонент.

const handleClick = useCallback(() => {
  console.log("Clicked!");
}, []); // Функция не будет пересоздаваться при каждом ререндере

⚠️ Важно:
Не стоит мемоизировать всё подряд! Это не панацея, а инструмент для конкретных случаев. Если лишняя мемоизация, то она только замедлит приложение.

Вы уже используете useMemo и useCallback в своих проектах? Пишите в комментариях!

✍️ @React_lib

⚛️ Знаешь ли ты все различия между useState и useRef в React?

✍️ @React_lib

❌ Избегайте использования useState() для сложного управления состоянием в React.

✅ Вместо этого используйте useReducer:

1. Предсказуемые переходы состояний
2. Легче тестировать
3. Лучше масштабируется

✍️ @React_lib

🛠️ Как ускорить работу с React? 5 мощных трюков!

Я часто вижу, как разработчики тратят лишнее время на рутинные задачи в React. Сегодня я покажу вам 5 мощных приемов, которые ускорят вашу работу и сделают код чище!



🔹 1. Используйте useMemo и useCallback правильно
Эти хуки не должны быть просто "по умолчанию" в каждом компоненте. Используйте их ТОЛЬКО там, где это реально снижает количество ненужных ререндеров. Если зависимость изменяется часто, мемоизация только замедлит работу.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(c), [c]);

🔹 2. Реэкспорт компонентов для удобного импорта
Когда в проекте много компонентов, постоянные импорты превращаются в хаос. Создайте index.ts и реэкспортируйте их:

// components/index.ts
export { default as Button } from './Button';
export { default as Input } from './Input';

Теперь можно писать:

import { Button, Input } from '@/components';

🔹 3. Минимизируйте пропсы в компонентах
Чем больше пропсов, тем сложнее поддерживать код. Используйте объекты и деструктуризацию, чтобы передавать только нужные данные.

❌ Так делать не надо:

<MyComponent name={name} age={age} isAdmin={isAdmin} />

✅ А так лучше:

<MyComponent user={{ name, age, isAdmin }} />

🔹 4. Оптимизируйте контекст (useContext)
Контекст удобен, но он перерисовывает весь потребляющий компонент при изменении данных. Разбейте контекст на более мелкие части или используйте селекторы.

const userName = useContext(UserContext).name; // Изменение других данных в контексте НЕ вызовет перерисовку

🔹 5. Динамические импорты для оптимизации загрузки
Разбейте код на чанки, загружая модули по требованию:

const LazyComponent = lazy(() => import('./HeavyComponent'));

Теперь React подгрузит компонент только тогда, когда он действительно нужен!


⚡ Попробуйте эти трюки в своих проектах и напишите, какие из них вы уже используете!

✍️ @React_lib

📌 5 крутых фич TypeScript, о которых ты мог не знать

TypeScript — это не просто строгая типизация, но и мощный инструмент, который может сделать твой код чище и безопаснее. Сегодня покажу 5 полезных возможностей, которые ты мог упустить!

1️⃣ satisfies — Гарантия соответствия
Часто бывает, что мы определяем объект с определёнными ключами, но хотим, чтобы TypeScript проверил, соответствуют ли они ожидаемой схеме. Вот где пригодится satisfies:

type Theme = "light" | "dark";

const config = {
  theme: "light",
  debug: true,
} satisfies { theme: Theme; debug: boolean };

// Теперь TypeScript гарантирует, что `theme` всегда будет соответствовать "light" | "dark"

2️⃣ keyof + typeof — Безопасные ключи
Если у тебя есть объект и ты хочешь работать с его ключами безопасно, эта комбинация спасает:

const user = {
  name: "Jhon",
  age: 30,
};

type UserKeys = keyof typeof user; // "name" | "age"

const key: UserKeys = "name"; // ✅ TypeScript гарантирует, что это корректный ключ

3️⃣ Extract<> и Exclude<> — Фильтрация типов
Эти утилиты позволяют выделять или исключать типы из union-типов:

type EventType = "click" | "hover" | "scroll";
type MouseEvents = Extract<EventType, "click" | "hover">; // "click" | "hover"
type NonMouseEvents = Exclude<EventType, "click" | "hover">; // "scroll"

4️⃣ as const — Заморозка значений
Если тебе нужно, чтобы объект или массив стали неизменяемыми (и сохранили точные значения), используй as const:

const roles = ["admin", "user", "guest"] as const;

type Role = (typeof roles)[number]; // "admin" | "user" | "guest"

5️⃣ ReturnType<> — Получение типа возвращаемого значения
Если у тебя есть функция, и тебе нужно определить её возвращаемый тип, ReturnType<> сделает это за тебя:

function getUser() {
  return { name: "Jhon", age: 30 };
}

type User = ReturnType<typeof getUser>; // { name: string; age: number }

✍️ @React_lib