React

🚀 Подборка полезных 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 Свежие новости Москвы

MAX

Системный Администратор | Sysadmin Windows & Linux Server. …

Купить рекламу: https://telega.in/m/i_odmin

Блог практикующего админа. Настройка Windows Server, Active Directory (AD), GPO и терминальных серверов (RDP). Раб…

👎1

536 views05:18

React

🔥 React: избегай лишнего состояния с derived state!

В React часто встречается антипаттерн — derived state — когда ты дублируешь вычисляемое значение в useState.

👎 Пример плохого подхода:


const [items, setItems] = useState([]);
const [filtered, setFiltered] = useState([]);

useEffect(() => {
  setFiltered(items.filter(...));
}, [items]);

🔍 Проблема: ты сам обязан синхронизировать filtered с items. Это источник багов, особенно при сложных зависимостях.

✅ Лучше вычисляй на лету:


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

🔧 useMemo кэширует результат, и ты не хранишь дублирующее состояние.

🧠 Правило: если значение можно вычислить из другого — не пиши useState.

Подробнее: https://react.dev/learn/you-might-not-need-an-effect

📲 Мы в MAX

✍️ @React_lib

🔥4

568 views08:16

React

🔥 Сегодня покажу, как настроить мгновенное обновление компонентов в 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

👍5🤯1

537 views06:03

React

MAX

Системный Администратор | Sysadmin Windows & Linux Server. …

🖕1

443 views18:20

React

🎯 Оптимизация ререндеров в 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

👍2🔥1

578 views05:38

React

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

👍3🥴1

601 views06:29

React

Как frontend-разработчику вырасти в ЗП?

День сурка frontend-разработчика выглядит так

Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов

Откликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость».

И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...

Ты тоже можешь получить оффер в компанию, в которой тебя будут ценить и хорошо платить.

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

В своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю, как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров

А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме

А еще у меня множество успешных кейсов и трогательных отзывов, найти их можно в канале.

Реклама, erid: 2W5zFJw4CJd ИП Галактионов Тихон Витальевич, ИНН 771618975809

🤡2

525 views16:01

React

Сегодня поговорим о 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

👍3🔥1

547 views06:00

React

Как создать свой кастомный хук 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

👍2

519 views04:57

React

Сегодня хочу поделиться с вами простым, но часто необходимым при работе приёмом: созданием и использованием кастомного хука 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, чтобы отменять запросы при новых вызовах или при размонтировании:

📲 Мы в MAX

✍️ @React_lib

👍3

424 viewsedited 12:20

React

🔧 Шпаргалка по базовым компонентам 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

👍3

255 views07:47

React

🚀 Как ускорить загрузку 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

👍2🔥2

168 views06:35

About

Blog

Apps

Platform