React

🦾 Разработка меняется. ИИ-агенты уже умеют анализировать код, работать с инструментами, искать ошибки и выполнять последовательность действий. Главным становится вопрос: как организовать процессы и сохранить контроль над результатом.

На открытом уроке 19 октября в 20:00 МСК в преддверие старта курса «Разработка ИИ-агентов» разберем, как создавать и применять агентов в реальной разработке. Вы узнаете, какие задачи можно делегировать ИИ-агентам, как они работают с кодовой базой и внешними системами, где помогают ускорить процессы, а где требуется участие разработчика.

👨‍💻🛠👨🏻‍💻 Урок будет полезен разработчикам, техническим специалистам и тимлидам, которые хотят использовать возможности ИИ не только для генерации кода.

➡️ Откройте новый подход к разработке. Регистрируйтесь на открытый урок: https://vk.cc/d2RnrI

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

🔥 Как ускорить работу с формами в React

Я часто использую библиотеку react-hook-form, и одна из самых частых задач — это создание динамических списков полей (например, список контактов пользователя).
Раньше я писал кучу ручного кода для добавления/удаления элементов, пока не открыл для себя хук useFieldArray.

Пример использования:

import { useForm, useFieldArray } from "react-hook-form";

function ContactForm() {
const { control, register, handleSubmit } = useForm({
defaultValues: {
contacts: [{ value: "" }]
}
});
const { fields, append, remove } = useFieldArray({
control,
name: "contacts"
});

return (
<form onSubmit={handleSubmit(data => console.log(data))}>
{fields.map((field, index) => (
<div key={field.id}>
<input {...register(`contacts.${index}.value`)} />
<button type="button" onClick={() => remove(index)}>Удалить</button>
</div>
))}
<button type="button" onClick={() => append({ value: "" })}>Добавить контакт</button>
<button type="submit">Отправить</button>
</form>
);
}

Этот код автоматически управляет всеми id полей и обновляет форму без лишней боли!
Если раньше вы управляли массивами вручную — попробуйте useFieldArray, вы удивитесь, насколько это проще.

❓ Пользуетесь ли вы react-hook-form или предпочитаете что-то другое для работы с формами?

✍️ @React_lib

🚀 Подборка полезных 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

Сегодня я покажу вам одну фишку, которую часто недооценивают — как упростить управление глобальным состоянием с помощью Context + useReducer.

🧠 Многие сразу тянут в проект Redux или Zustand, но это не всегда нужно. Если у вас приложение небольшое или средней сложности — useReducer + Context может закрыть все ваши нужды.

Вот пример мини-хранилища:

// counterContext.tsx
import { createContext, useReducer, useContext, ReactNode } from 'react';

const CounterContext = createContext<any>(null);

const initialState = { count: 0 };

function reducer(state: typeof initialState, action: { type: string }) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
}

export const CounterProvider = ({ children }: { children: ReactNode }) => {
const [state, dispatch] = useReducer(reducer, initialState);

return (
<CounterContext.Provider value={{ state, dispatch }}>
{children}
</CounterContext.Provider>
);
};

export const useCounter = () => useContext(CounterContext);

А вот как использовать:

// App.tsx
import { CounterProvider, useCounter } from './counterContext';

function Counter() {
const { state, dispatch } = useCounter();

return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}

export default function App() {
return (
<CounterProvider>
<Counter />
</CounterProvider>
);
}

🎯 Такой подход помогает:
- Локализовать логику
- Избежать лишних зависимостей
- Делать масштабирование более контролируемым

Если в будущем нужно будет вынести логику в отдельные модули или добавить middlewares — это тоже можно сделать!

А вы как решаете глобальное состояние в небольших проектах? Используете кастомные хуки, Zustand или всё же Redux?

✍️ @React_lib

Сегодня я покажу вам фичу 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 не менялся внутри него.

✍️ @React_lib

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

🔥 Очень советую попробовать на новом проекте. Работать с формами становится не только проще, но и приятно.

✍️ @React_lib

Как сделать 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-трюк, но эффект — огромный.

✍️ @React_lib