🚀 Знакомство с хуками useState и useEffect в React

Привет, дорогие подписчики! 👋
Поговорим о двух ключевых хуках в React — useState и useEffect. Эти инструменты позволяют управлять состоянием и жизненным циклом компонентов, делая ваш код гибким и функциональным.

🔹 Что такое хуки?

Хуки (hooks) — это специальные функции, которые позволяют «подключить» дополнительные возможности к функциональным компонентам React. С их помощью можно добавлять в компоненты состояние (useState) и эффекты (useEffect) без необходимости создавать классовые компоненты.

🌟 useState: управление состоянием компонента

Хук useState позволяет добавлять состояние в функциональные компоненты. Он возвращает пару значений — текущее состояние и функцию для его обновления.

Пример:

import React, { useState } from 'react';

function Counter() {
   const [count, setCount] = useState(0); // Инициализация состояния
   
   return (
      <div>
         <p>Вы кликнули {count} раз(а)</p>
         <button onClick={() => setCount(count + 1)}>Нажми меня</button>
      </div>
   );
}

В этом примере мы создаем состояние count с начальным значением 0. Каждый раз при нажатии на кнопку состояние обновляется, и компонент перерисовывается.

🌟 useEffect: управление побочными эффектами

Хук useEffect позволяет выполнять побочные эффекты в компонентах, такие как загрузка данных, подписки или изменения DOM. Его можно рассматривать как аналог методов жизненного цикла componentDidMount, componentDidUpdate и componentWillUnmount в классовых компонентах.

Пример:

import React, { useState, useEffect } from 'react';

function Timer() {
   const [seconds, setSeconds] = useState(0);

   useEffect(() => {
      const interval = setInterval(() => {
         setSeconds((prev) => prev + 1);
      }, 1000);

      return () => clearInterval(interval); // Очистка таймера при размонтировании
   }, []); // Пустой массив зависимостей — эффект запускается один раз при монтировании

   return <p>Секунд прошло: {seconds}</p>;
}

В этом примере useEffect запускает таймер при монтировании компонента. Функция очистки (clearInterval) обеспечивает удаление таймера при размонтировании.

✨ Советы по использованию хуков

- Управляйте зависимостями: Передавая массив зависимостей во второй параметр useEffect, вы контролируете, когда должен выполняться эффект. Пустой массив означает запуск только при монтировании.

- Состояние — отдельное для каждого хука: Вы можете использовать несколько хуков useState или useEffect в одном компоненте, чтобы разделить логику на более мелкие части.

- Очистка эффектов: Всегда удаляйте ресурсы в useEffect, если это необходимо (например, таймеры или подписки), чтобы избежать утечек памяти.


🎯 Заключение

useState и useEffect — это основа работы с состоянием и эффектами в функциональных компонентах React. Они позволяют создавать динамические и интерактивные приложения, облегчая работу с логикой компонентов. В следующих постах мы рассмотрим более сложные хуки и практические примеры их применения.

До встречи и удачной разработки! 💻

ReactJs Daily | #begginers

📝 Best Practices: Методичное именование в React

В React правильное именование — это не просто формальность, а мощный инструмент для организации и читабельности кода. Следование методичным конвенциям, таким как использование onSomething для событий и handleSomething для функций-обработчиков, делает ваш код интуитивно понятным и масштабируемым.

Почему это важно?
1. Ясность и организация: Методичное именование помогает моментально понять назначение кода. Видя onClick, сразу ясно, что это событие клика, а handleClick указывает на обработчик этого события.

2. Стандартизация: Использование общепринятых подходов облегчает работу всей команде. Не нужно тратить время на разгадку уникальных имен — стандартные конвенции сразу говорят о назначении.

3. Масштабируемость: Добавлять новые события (например, onDoubleClick, onHover) становится проще, так как код структурирован и предсказуем.

Пример плохой практики:

function Button({ actionButton }) {
    return <button onClick={actionButton}>Click me</button>;
}

Пример хорошей практики:

function Button({ onButtonClick }) {
    return <button onClick={onButtonClick}>Click me</button>;
}

С хорошими именами — onButtonClick для события и handleButtonClick для функции — все понятно с первого взгляда.

Вывод: Стандартные конвенции имен помогают сделать React-код понятным и поддерживаемым, что важно не только для вас, но и для всей команды. 🧩

ReactJs Daily | #shortinfo

🚀 Подключение к API и работа с данными в React

Привет, разработчики! 👋
Сегодня разберемся, как в React можно подключаться к API и эффективно работать с данными, используя два популярных инструмента: fetch и axios. Мы научимся запрашивать данные, обрабатывать ответы и выводить их в компонентах. Давайте начнем! 👇

🔹 Использование fetch для работы с API

fetch — это встроенный метод JavaScript для отправки HTTP-запросов. Он возвращает промис, который можно обработать через then или с помощью async/await.

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

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);

   useEffect(() => {
      // Выполняем запрос к API
      fetch('https://api.example.com/data')
         .then((response) => response.json()) // Преобразуем ответ в JSON
         .then((data) => {
            setData(data);
            setLoading(false);
         })
         .catch((error) => {
            setError(error);
            setLoading(false);
         });
   }, []); // Пустой массив — эффект сработает один раз при монтировании компонента

   if (loading) return <div>Загрузка...</div>;
   if (error) return <div>Ошибка: {error.message}</div>;

   return (
      <div>
         <h1>Данные с API:</h1>
         <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
   );
};

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

🔹 Использование axios для работы с API

axios — это популярная библиотека для работы с HTTP-запросами. Она предоставляет дополнительные возможности по сравнению с fetch, такие как отмена запросов, автоматическая обработка JSON и поддержка старых браузеров.

Для использования axios, сначала нужно установить его:

npm install axios

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

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);

   useEffect(() => {
      // Выполняем запрос с помощью axios
      axios.get('https://api.example.com/data')
         .then((response) => {
            setData(response.data); // Данные уже автоматически преобразуются в JSON
            setLoading(false);
         })
         .catch((error) => {
            setError(error);
            setLoading(false);
         });
   }, []);

   if (loading) return <div>Загрузка...</div>;
   if (error) return <div>Ошибка: {error.message}</div>;

   return (
      <div>
         <h1>Данные с API:</h1>
         <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
   );
};

Здесь мы используем axios.get для получения данных, а обработка JSON происходит автоматически. В остальном код похож на пример с fetch.

🔹 Отличия между fetch и axios

- Автоматическое преобразование JSON: В axios ответ автоматически преобразуется в объект JSON, тогда как с fetch нужно использовать response.json().
- Обработка ошибок: В fetch ошибки нужно обрабатывать вручную (например, если статус код не в пределах 2xx), в то время как axios автоматически отклоняет промис при получении статуса ошибки.
- Отмена запросов: axios имеет встроенную поддержку отмены запросов, что полезно, если запросы становятся ненужными (например, при смене компонента).

🎯 Заключение

Теперь вы знаете, как подключаться к API и работать с данными в React, используя fetch и axios. Оба инструмента мощные, и каждый имеет свои особенности. Если вам нужно больше гибкости, например, при работе с заголовками или отменой запросов, стоит рассмотреть использование axios. Если же вам нужно простое решение без дополнительных зависимостей, fetch — отличный выбор.

Попробуйте подключиться к своему API и поэкспериментировать с получением данных в React! До новых встреч в следующих постах! 💻

ReactJs Daily | #shortinfo

🚀 Zed — редактор кода, который стоит просто попробовать 🔥

Если ты ищешь что-то новое и интересное, но не готов сразу менять свой основной инструмент, Zed — это отличный вариант для эксперимента.

Вот что понравилось:

- Быстрота и лёгкость: Zed работает очень быстро, даже с большими проектами. Однако, возможно, для некоторых задач он пока не так универсален, как более привычные IDE.
- Совместная работа в реальном времени: Можно работать над проектом с коллегами одновременно. Это удобно, если вы в команде, но если ты работаешь один, это не обязательно будет востребовано.
- Умная навигация и диагностика: Zed помогает легко находить ошибки и искать код в проекте. Но для более сложных проектов может не хватать всех нужных инструментов и настроек.

Если хочешь узнать, как это всё работает, просто попробуй. Но пока не стоит переключаться на него как на основной инструмент — всё-таки ему не хватает некоторых фич для серьезной работы. 🤔


P.S Под винду только билдить самому ;)

ReactJs Daily | #shortinfo

📝 Best Practices: Не забывай зависимости в useEffect!

Одна из неприятных особенностей React — это когда забываешь зависимости в useEffect, и это может привести к устаревшим замыканиям 😱. Например, если не указать все необходимые зависимости, эффект может не обновляться как ожидается.

Всегда проверяй массив зависимостей!

Пример:

useEffect(() => { 
  // Логика эффекта
}, [dependency]);

Что происходит: этот код вызывает эффект, когда изменяется указанная зависимость. Важно включить все необходимые зависимости, чтобы эффект работал корректно.

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

Если твой интерфейс не обновляется должным образом, скорее всего, это из-за отсутствующих зависимостей в useEffect.

ReactJs Daily | #shortinfo

🚀 Оптимизация производительности React-приложений

Привет, разработчики! 👋 Поговорим о том, как оптимизировать React-приложения, особенно когда они начинают замедляться из-за большого количества компонентов, рендеров и обработки данных. Обсудим ключевые приемы: виртуализацию списков, мемоизацию, хуки useMemo и useCallback, а также работу с React Profiler. Давайте разбираться! 👇

🔹 Виртуализация списков

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

Пример с использованием библиотеки `react-window`:

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

const MyList = ({ items }) => (
   <List
      height={400}       // Высота видимой части списка
      itemCount={items.length} 
      itemSize={35}      // Высота каждого элемента
      width="100%">
      {({ index, style }) => (
         <div style={style}>
            {items[index]}
         </div>
      )}
   </List>
);

Здесь react-window отрисовывает только видимые элементы, что значительно снижает нагрузку на DOM и повышает производительность.

🔹 Мемоизация с React.memo

React.memo предотвращает лишние рендеры компонента, если его пропсы не изменились. Это особенно полезно для компонентов, которые получают одни и те же данные, но часто перерисовываются из-за изменений родительского компонента.

const MyComponent = React.memo(({ value }) => {
   console.log("Рендеринг MyComponent");
   return <div>{value}</div>;
});

Теперь MyComponent будет перерисовываться только тогда, когда проп value изменится, а не при каждом обновлении родительского компонента.

🔹 Хуки useMemo и useCallback

useMemo
Этот хук помогает мемоизировать результат функции, чтобы не вычислять его снова, если зависимые значения не изменились.

Пример:

const expensiveCalculation = (num) => {
   console.log("Выполняем дорогостоящую операцию...");
   return num * 1000;
};

const MyComponent = ({ number }) => {
   const result = useMemo(() => expensiveCalculation(number), [number]);
   return <div>Результат: {result}</div>;
};

Теперь expensiveCalculation будет выполняться только тогда, когда number изменится.

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

Пример:

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

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

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

increment теперь не будет пересоздаваться при каждом рендере MyComponent, что оптимизирует работу дочерних компонентов.

🔹 React Profiler

React Profiler — инструмент для анализа производительности вашего приложения. Он показывает, сколько времени тратится на рендеринг компонентов, и помогает найти «узкие места» в производительности.

Чтобы использовать Profiler, включите его в код:

import { Profiler } from 'react';

const App = () => (
   <Profiler id="MyComponent" onRender={(id, phase, actualDuration) => {
      console.log({ id, phase, actualDuration });
   }}>
      <MyComponent />
   </Profiler>
);

В консоли вы увидите actualDuration — время, потраченное на рендеринг компонента. Это поможет вам найти медленные компоненты и оптимизировать их.

🎯 Заключение

Эти приемы помогут вам сделать ваше React-приложение более быстрым и отзывчивым. Попробуйте использовать виртуализацию, мемоизацию и Profiler, чтобы держать производительность под контролем! В следующем посте мы рассмотрим ещё более продвинутые оптимизации.

До встречи и удачного кодинга! 💻

ReactJs Daily | #pro

🚀 Условный рендеринг в React: Как управлять отображением компонентов?

В React условный рендеринг позволяет показывать или скрывать компоненты в зависимости от условий. Это полезная техника для создания динамичных интерфейсов. Рассмотрим основные способы условного рендеринга и примеры их использования.

1. Тернарный оператор

Один из самых популярных способов рендеринга — использование тернарного оператора. Он идеально подходит, когда требуется отобразить один из двух компонентов.

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Добро пожаловать!</p> : <p>Пожалуйста, войдите в систему.</p>}
    </div>
  );
}

2. Оператор И (&&)

Когда нужно отобразить компонент только при выполнении условия, можно использовать логический оператор &&. Этот метод удобен, если компонент рендерится или не рендерится, но не требует альтернативного варианта.

function Notification({ hasNotifications }) {
  return (
    <div>
      {hasNotifications && <p>У вас есть новые уведомления!</p>}
    </div>
  );
}

3. if...else внутри функции

Когда условие становится более сложным, лучше использовать if...else внутри функции. Этот метод делает код более читаемым и гибким, особенно когда требуется рендерить несколько компонентов.

function UserStatus({ isLoggedIn }) {
  if (isLoggedIn) {
    return <p>Вы вошли в систему.</p>;
  } else {
    return <p>Пожалуйста, войдите.</p>;
  }
}

4. Использование switch для более сложных условий

Если нужно рендерить компонент в зависимости от нескольких значений, удобно использовать switch. Это улучшает читаемость кода и позволяет легко добавлять дополнительные состояния.

function Status({ status }) {
  switch (status) {
    case 'loading':
      return <p>Загрузка...</p>;
    case 'success':
      return <p>Данные успешно загружены!</p>;
    case 'error':
      return <p>Произошла ошибка при загрузке данных.</p>;
    default:
      return null;
  }
}

5. Использование Immediately Invoked Function Expression (IIFE)

Иногда нужно выполнить условие и сразу вернуть результат. Для этого можно использовать IIFE — самовызывающееся выражение.

function App({ isSubscriber }) {
  return (
    <div>
      {(() => {
        if (isSubscriber) return <p>Добро пожаловать, подписчик ReactJs Daily!</p>;
        return <p>Подпишись, тут много интересного!</p>;
      })()}
    </div>
  );
}

💡 Заключение

Условный рендеринг в React — это мощный инструмент, который делает интерфейсы гибкими и динамичными. Используйте разные подходы в зависимости от сложности и читаемости вашего кода. Попробуйте реализовать условный рендеринг в ваших проектах, чтобы компоненты отображались именно так, как нужно!

ReactJs Daily | #begginers

📝 Best Practice: Использование кастомных хуков для повторного использования логики

Привет, React-разработчики! 👋 Обсудим одну из самых популярных практик для улучшения организации кода в React-приложениях — создание и использование кастомных хуков.

🔹 Что это такое?

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

По сути это обычная функция, имя которой начинается с "use", и внутри которой могут быть использованы другие хуки, такие как useState, useEffect и т.д.

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

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

import { useState, useEffect } from 'react';

// Создаем хук для загрузки данных
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

🔹 Использование в компонентах

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

function UserList() {
  const { data, loading, error } = useFetch('https://api.example.com/users');

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

🔹 Почему стоит использовать?

1. Повторное использование логики: Логику можно легко переиспользовать в разных компонентах.
2. Чистота кода: Код становится более читаемым и компактным.
3. Управление состоянием: Логику состояния можно выносить в отдельные хуки, улучшая читаемость и поддержку.
4. Легкость тестирования: Логику из хуков можно тестировать отдельно от компонентов.

🎯 Заключение

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

До встречи и удачного кодинга! 💻

ReactJs Daily | #shortinfo

🚀 Асинхронные хуки и работа с Suspense и Concurrent Mode в React

Привет, разработчики! 👋 Разберём продвинутые возможности React для управления асинхронными операциями — хуки и функции для удобной работы с данными, особенно когда речь идет о загрузке и обработке информации из внешних источников.

Давайте рассмотрим ключевые технологии: асинхронные хуки, Suspense и Concurrent Mode. Они позволяют улучшить производительность приложений и сделать работу с асинхронными данными более гибкой и удобной.

🔹 Suspense: Что это и зачем?

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

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

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

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

const App = () => (
  <Suspense fallback={<div>Загрузка...</div>}>
    <MyComponent />
  </Suspense>
);

Здесь компонент MyComponent загрузится асинхронно, и до его готовности пользователь увидит fallback-заглушку. Это делает загрузку более гладкой для пользователя.

🔹 Concurrent Mode: Новый подход к рендерингу

Concurrent Mode — это обновление, которое изменяет способ рендеринга компонентов, давая React возможность прерывать рендеринг на время и возобновлять его, когда это необходимо. Concurrent Mode улучшает отзывчивость приложения, так как позволяет React перераспределять ресурсы на важные задачи.

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

1. Используйте React.lazy() для асинхронной загрузки компонентов.
2. Включите Concurrent Mode в проекте через ReactDOM.createRoot.

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Concurrent Mode также добавляет функцию Transition, которая помогает оптимизировать обновление состояния, давая React возможность приоритизировать задачи, которые видит пользователь, и отложить второстепенные задачи.

🔹 Асинхронные хуки: useTransition и useDeferredValue

Эти хуки добавлены для управления асинхронными операциями внутри Concurrent Mode.

- useTransition: Позволяет определить, какие обновления можно сделать приоритетными и отложить менее важные задачи.

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

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

import { useState, useTransition } from 'react';

const App = () => {
  const [value, setValue] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (event) => {
    startTransition(() => setValue(event.target.value));
  };

  return (
    <div>
      <input onChange={handleChange} placeholder="Введите текст" />
      {isPending ? <p>Загрузка...</p> : <p>Результат: {value}</p>}
    </div>
  );
};

Здесь useTransition дает возможность управлять обновлением состояния, чтобы приложение не «зависало» при выполнении сложных операций.

🎯 Заключение

Suspense, Concurrent Mode и асинхронные хуки, такие как useTransition, — это мощные инструменты, которые делают React более гибким и отзывчивым. Они помогают управлять асинхронными операциями, улучшая пользовательский опыт и производительность вашего приложения. Попробуйте эти подходы, чтобы улучшить работу с асинхронными данными и делать свои React-приложения более удобными для пользователей!

До скорой встречи и удачи в коде! 💻

ReactJs Daily | #pro

🚀 Формы в React: Управляемые и неуправляемые компоненты

Привет, React-разработчики! 👋 Сегодня разберемся, как эффективно работать с формами. Правильное управление помогает вам получать и обрабатывать пользовательские данные, а также улучшает производительность приложения. Давайте посмотрим на основные подходы — управляемые и неуправляемые компоненты.

🔹 Управляемые компоненты

В управляемых компонентах состояние каждого поля формы контролируется самим компонентом через стейт. Это позволяет иметь полный контроль над значениями и, например, валидировать данные в реальном времени.

Пример управляемого компонента:

import { useState } from 'react';

function ControlledForm() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Submitted name:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

Плюсы управляемых компонентов:
- Простой контроль данных: React контролирует все значения, что упрощает валидацию и обработку данных.
- Синхронизация с состоянием: Вы можете синхронизировать состояние с интерфейсом, улучшая UX.

Минусы:
- Усложнение кода: При большом количестве полей в форме код может стать громоздким.
- Дополнительная нагрузка на рендер: Каждое изменение значения вызывает перерисовку компонента, что может замедлить приложение при сложных формах.

🔹 Неуправляемые компоненты

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

Пример неуправляемого компонента:

import { useRef } from 'react';

function UncontrolledForm() {
  const nameRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Submitted name:', nameRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

Плюсы неуправляемых компонентов:
- Упрощенный код: Код более компактный, так как не требует состояния для каждого поля.
- Меньше рендеров: Компонент не перерисовывается при каждом изменении ввода, что делает его более производительным.

Минусы:
- Ограниченные возможности контроля: Без состояния сложнее контролировать ввод, делать проверки в реальном времени.
- Труднее валидация: Проверка данных становится сложнее, так как значения напрямую берутся из DOM.

❓Когда что использовать?

- Управляемые компоненты лучше подходят для форм с валидацией, когда требуется активное управление состоянием.
- Неуправляемые компоненты идеальны для простых форм или больших форм с минимальным контролем за состоянием.

🎯 Заключение

Выбор между управляемыми и неуправляемыми компонентами зависит от ваших задач. Управляемые компоненты предлагают больше контроля, но могут быть медленнее, тогда как неуправляемые более эффективны, но требуют работы с DOM напрямую. Применяйте подход, который лучше подходит для конкретного случая, и пишите формы, которые отвечают требованиям вашего приложения!

До встречи и удачного кодинга! 💻

ReactJs Daily | #begginers

🚀 React и TypeScript: Углубление в типизацию компонентов, пропсов и состояния

Привет! 👋 Давайте поговорим об одном из мощнейших инструментов для написания безопасного и удобного кода — TypeScript в React. Типизация делает код более предсказуемым, улучшает автодополнение и помогает избегать ошибок. В этом посте обсудим, как типизировать компоненты, пропсы и состояние, чтобы сделать код максимально надежным.

🔹 Типизация функциональных компонентов

Чтобы объявить типы для функционального компонента, используем React.FC (или React.FunctionComponent). Это базовый тип для компонентов, который включает стандартные пропсы, такие как children.

import React, { FC } from 'react';

type GreetingProps = {
  name: string;
  age?: number; // age — необязательный пропс
};

const Greeting: FC<GreetingProps> = ({ name, age }) => (
  <div>
    <p>Hello, {name}!</p>
    {age && <p>Age: {age}</p>}
  </div>
);

export default Greeting;

🔸 Зачем это нужно? FC автоматически типизирует children, поэтому если компонент предполагает дочерние элементы, их тип будет подхвачен TypeScript.

🔹 Типизация пропсов

TypeScript позволяет точно описывать типы для любых пропсов, делая код читаемым и предотвращая ошибки. Ниже пример с несколькими типами пропсов, включая массивы и функции.

type ListProps = {
  items: string[];
  onClick: (item: string) => void;
};

const ItemList: FC<ListProps> = ({ items, onClick }) => (
  <ul>
    {items.map((item) => (
      <li key={item} onClick={() => onClick(item)}>
        {item}
      </li>
    ))}
  </ul>
);

🔸 Что это дает? Мы четко указываем, что items — это массив строк, а onClick — функция, принимающая строку и ничего не возвращающая. Это уменьшает количество ошибок при передаче данных и упрощает работу с компонентом.

🔹 Типизация состояния с useState

Когда мы используем useState, TypeScript автоматически выводит тип на основе значения по умолчанию. Однако если состояние может изменять тип, его стоит задавать явно.

import React, { useState } from 'react';

const Counter: FC = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

🔸 Зачем это нужно? Типизация count как number защищает от ошибок при передаче нечисловых значений.

🔹 Типизация ссылок с useRef

Для работы с useRef, особенно если ссылка не сразу инициализируется, полезно указать ее тип или использовать null как начальное значение.

import React, { useRef } from 'react';

const InputFocus: FC = () => {
  const inputRef = useRef<HTMLInputElement | null>(null);

  const focusInput = () => {
    inputRef.current?.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

🔸 Зачем это нужно? Типизация useRef помогает избежать ошибок при доступе к свойствам DOM-элементов.

🔹 Типизация пользовательских хуков

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

import { useState } from 'react';

function useToggle(initialValue: boolean): [boolean, () => void] {
  const [value, setValue] = useState(initialValue);

  const toggle = () => setValue((prev) => !prev);

  return [value, toggle];
}

// Использование хука
const [isActive, toggleActive] = useToggle(false);

🔸 Преимущества: Четко указано, что useToggle возвращает массив с булевым значением и функцией. Это упрощает использование и предотвращает неверное использование хука.

🎯 Заключение

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

До встречи в новых постах, и удачного кодинга! 💻

ReactJs Daily | #begginers

🚀 Введение в маршрутизацию с React Router

Привет, разработчики! Сегодня поговорим о React Router — популярной библиотеке для добавления маршрутизации в приложения React. С его помощью можно управлять навигацией, создавая многостраничные SPA (Single Page Applications) без перезагрузки страницы.

🔹 Зачем нужен React Router?
React Router позволяет переходить между различными страницами или компонентами, не перезагружая приложение. С его помощью можно создать удобные маршруты для отдельных страниц (например, Главная, Профиль, О нас) и динамические ссылки (например, /профиль/:id).

🔹 Как начать?
1. Установите библиотеку:

   npm install react-router-dom
   

2. Добавьте маршруты в проект:
   В корневом компоненте (обычно App.js), используем <BrowserRouter>, <Routes>, и <Route> для настройки маршрутов.

   

   import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
   import Home from './pages/Home';
   import Profile from './pages/Profile';

   function App() {
      return (
         <Router>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/profile" element={<Profile />} />
            </Routes>
         </Router>
      );
   }
   

3. Использование Link для навигации:
React Router предоставляет компонент <Link> для навигации между страницами без перезагрузки.

   import { Link } from 'react-router-dom';

   function Navbar() {
      return (
         <nav>
            <Link to="/">Главная</Link>
            <Link to="/profile">Профиль</Link>
         </nav>
      );
   }
   

🔹 Динамические маршруты и параметры
С помощью динамических маршрутов можно передавать параметры URL, например, /:id.

<Route path="/profile/:id" element={<Profile />} />

Теперь компонент Profile сможет получить id через useParams:

import { useParams } from 'react-router-dom';

function Profile() {
   const { id } = useParams();
   return <h1>Профиль пользователя {id}</h1>;
}

🎯 Заключение
React Router — мощный инструмент для управления маршрутами в вашем приложении. Он позволяет легко организовать страницы, добавлять навигацию и создавать динамические ссылки.

ReactJs Daily | #begginers

📝 Best Practices: Управление событиями с помощью Throttling и Debouncing 🔹

Привет, разработчики! 👋 Сегодня разберём, как техники throttling и debouncing помогают управлять частотой вызова функций в React, поддерживая производительность приложений на высоком уровне. Давайте разберёмся, как это работает и когда использовать каждую из техник! 👇

🔹 Throttling
Throttling — это техника, позволяющая ограничить частоту вызова функции за определённый промежуток времени. Например, если функция привязана к событию изменения размера окна, она может вызываться непрерывно, пока пользователь двигает окно. Throttling ограничивает количество вызовов, позволяя запускать функцию, скажем, раз в 200 мс. Это снижает нагрузку на приложение и сохраняет его производительность.

Пример использования throttling для события прокрутки:

import { useCallback } from 'react';

const throttle = (func, delay) => {
   let lastCall = 0;
   return (...args) => {
      const now = new Date().getTime();
      if (now - lastCall >= delay) {
         lastCall = now;
         func(...args);
      }
   };
};

const handleScroll = () => {
   console.log("Прокрутка");
};

const throttledScroll = useCallback(throttle(handleScroll, 200), []);
window.addEventListener("scroll", throttledScroll);

🔹 Debouncing
Debouncing работает немного иначе: вместо ограничения частоты вызова функция задерживается и запускается только после окончания активности. Например, если у вас есть поле поиска, и функция поиска запускается при каждом нажатии клавиши, то без debouncing может отправляться слишком много запросов. С debouncing функция срабатывает только после того, как пользователь перестал вводить текст на заданное время (например, 300 мс).

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

import { useState, useCallback } from 'react';

const debounce = (func, delay) => {
   let timer;
   return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => func(...args), delay);
   };
};

const SearchComponent = () => {
   const [query, setQuery] = useState("");

   const handleSearch = useCallback(
      debounce((searchText) => {
         console.log("Поиск:", searchText);
         // выполнить поиск
      }, 300),
      []
   );

   const handleChange = (e) => {
      setQuery(e.target.value);
      handleSearch(e.target.value);
   };

   return <input type="text" value={query} onChange={handleChange} />;
};

🎯 Заключение
Throttling помогает уменьшить количество вызовов функций, а debouncing откладывает их до тех пор, пока активность не прекратится. Оба подхода полезны для оптимизации работы с часто происходящими событиями, такими как прокрутка, изменение размера окна и ввод текста. Используйте их, чтобы сделать ваше приложение быстрее и отзывчивее! 🚀

ReactJs Daily | #shortinfo

🚀 Поддержка веб-сокетов в React-приложениях: Реализуем реальное время с WebSocket и хуками

Веб-сокеты — отличный способ сделать ваше приложение интерактивным и обеспечить мгновенный обмен данными в реальном времени. Сегодня поговорим о том, как добавить поддержку WebSocket в React с помощью кастомных хуков!

🔹 Что такое WebSocket?
WebSocket — это протокол для двустороннего взаимодействия между клиентом и сервером в реальном времени. Он сохраняет открытое соединение, позволяя обмениваться сообщениями без повторного открытия HTTP-соединений.

🔹 Пример кастомного хука для WebSocket
Создадим хук useWebSocket для подключения к WebSocket-серверу и получения сообщений.

1. Создайте кастомный хук:

import { useEffect, useState } from 'react';

function useWebSocket(url) {
   const [socket, setSocket] = useState(null);
   const [message, setMessage] = useState(null);

   useEffect(() => {
      const ws = new WebSocket(url);
      setSocket(ws);

      ws.onmessage = (event) => {
         setMessage(JSON.parse(event.data));
      };

      return () => {
         ws.close();
      };
   }, [url]);

   const sendMessage = (msg) => {
      if (socket && socket.readyState === WebSocket.OPEN) {
         socket.send(JSON.stringify(msg));
      }
   };

   return { message, sendMessage };
}

export default useWebSocket;
   

2. Используйте хук в компоненте:

import React, { useState } from 'react';
import useWebSocket from './useWebSocket';

function Chat() {
   const { message, sendMessage } = useWebSocket('ws://localhost:4000');
   const [input, setInput] = useState('');

   const handleSubmit = (e) => {
      e.preventDefault();
      sendMessage({ text: input });
      setInput('');
   };

   return (
      <div>
         <h2>Чат в реальном времени</h2>
         <form onSubmit={handleSubmit}>
            <input
               value={input}
               onChange={(e) => setInput(e.target.value)}
            />
            <button type="submit">Отправить</button>
         </form>
         {message && <p>Новое сообщение: {message.text}</p>}
      </div>
   );
}

export default Chat;
   

🔹 Как работает хук?
- useWebSocket устанавливает соединение с сервером при монтировании компонента и закрывает его при размонтировании.
- onmessage обрабатывает входящие сообщения и обновляет состояние message, чтобы его можно было использовать в компоненте.
- sendMessage отправляет данные на сервер через WebSocket.

🎯 Заключение
Использование WebSocket и кастомных хуков помогает легко добавлять реальное время в React-приложения. Вы можете использовать этот подход для чатов, уведомлений, отображения данных и других интерактивных элементов. Попробуйте создать свой хук для работы с WebSocket и добавьте живое взаимодействие в ваше приложение!

ReactJs Daily | #pro

🚀 Обработка событий в React: Основы и Практика 🔹

Доброе утро! 👋 Сегодня поговорим о том, как эффективно работать с событиями в React, чтобы сделать интерфейсы более интерактивными и отзывчивыми. React использует собственную систему обработки событий, которая немного отличается от стандартного DOM, поэтому разберем основы и лучшие практики!

🔹 Как работают события в React?
Вместо того чтобы использовать традиционные методы addEventListener, в React мы просто добавляем атрибуты к элементам JSX, например onClick, onChange и т.д. Эти события автоматически обрабатываются через систему SyntheticEvent — это обертка над стандартными событиями браузера, которая оптимизирует их и делает кроссбраузерными.

Пример простого обработчика события:

function ClickButton() {
   const handleClick = () => {
      console.log("Кнопка нажата!");
   };

   return <button onClick={handleClick}>Нажми меня</button>;
}

🔹 Основные принципы и лучшие практики
1. Используйте стрелочные функции в обработчиках, но осторожно. Анонимные стрелочные функции в JSX создают новую функцию при каждом рендере, что может вызывать лишние рендеры у дочерних компонентов. Например:

   <button onClick={() => handleClick()} />
   

Вместо этого, объявляйте функции обработчиков отдельно и передавайте их:

   const handleClick = () => { ... };
   <button onClick={handleClick} />
   

2. Передача параметров в обработчики. Если нужно передать параметры в функцию, используйте замыкания или .bind(), чтобы не создавать функции при каждом рендере:

   <button onClick={() => handleClick(param)} />  // работает, но создаёт функцию каждый раз
   <button onClick={handleClick.bind(this, param)} />  // предпочтительнее
   

3. Предотвращайте стандартное поведение. Для обработки формы или других элементов с собственным поведением не забывайте о preventDefault().

   const handleSubmit = (e) => {
      e.preventDefault();
      console.log("Форма отправлена!");
   };
   

4. Управление всплытием событий. В React всплытие событий (event bubbling) работает как в обычном DOM, поэтому будьте внимательны к обработчикам в родительских и дочерних элементах.

🔹 Комбинирование событий и состояний
События часто работают в паре с состояниями. Например, клик по кнопке может менять текст или состояние компонента:

import { useState } from 'react';

function ToggleButton() {
   const [isOn, setIsOn] = useState(false);

   const handleClick = () => {
      setIsOn((prev) => !prev);
   };

   return <button onClick={handleClick}>{isOn ? "Вкл" : "Выкл"}</button>;
}

🎯 Заключение
Обработка событий — важный аспект взаимодействия с пользователем. Используйте оптимальные методы, чтобы избежать лишних рендеров и улучшить производительность!

ReactJs Daily | #begginers

📝 Best Practices: Полезная библиотека для React: React Query

Если вы работаете с данными, которые нужно получать, кешировать и обновлять, React Query — отличный инструмент! Она облегчает управление состоянием данных, делает запросы асинхронными и позволяет легко кешировать и обновлять данные.

Почему это полезно:
- Легкость: React Query позволяет меньше писать "ручного" кода для работы с API.
- Кеширование: Данные автоматически сохраняются и перезапрашиваются по мере необходимости.
- Фоновое обновление: React Query обновляет данные в фоне и моментально выводит на экран.
- Обработка ошибок: Управление ошибками проще, с встроенными опциями retry.

Пример:

import { useQuery } from 'react-query';

function MyComponent() {
  const { data, error, isLoading } = useQuery('todos', fetchTodos);

  if (isLoading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка!</p>;

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

React Query делает взаимодействие с API гораздо удобнее и обеспечивает лучшую производительность для ваших React-приложений!

ReactJs Daily | #shortinfo

🚀 FSD (Feature-Sliced Design) Архитектура в React: Подробное руководство по созданию структурированного проекта

Когда проект растет, правильная архитектура становится ключом к легкости поддержки и масштабирования. Feature-Sliced Design (FSD) — это подход, помогающий структурировать фронтенд-приложения так, чтобы каждая функциональность была изолирована и независима. Давайте разберем, как работает FSD и как его применять в React-проектах.

🔹 Основная идея FSD
FSD разделяет проект на уровни и модули, позволяя логично организовать компоненты, бизнес-логику и UI, основываясь на их назначении и зависимости. Благодаря этому подходу мы создаем модульные, переиспользуемые и гибкие компоненты, которые удобно тестировать, поддерживать и расширять.

🔹 Уровни FSD-архитектуры

Каждый уровень в FSD отвечает за конкретный аспект приложения:

1. App — уровень, который включает в себя инициализацию приложения. Здесь находятся:
- Основной компонент приложения (App.jsx);
- Настройки роутинга, хранилища и глобальных провайдеров (например, Redux или Context);
- Глобальные стили и настройки, например, themes.

2. Processes — глобальные процессы, которые используются в разных частях приложения:
- Например, аутентификация, обработка ошибок, конфигурация языков и локалей;
- В этом уровне организуются такие аспекты, как управление сессиями пользователя и глобальными процессами.

3. Pages — уровень, отвечающий за страницы приложения:
- Здесь организованы конкретные маршруты (pages), каждый из которых представляет собой независимый модуль (например, HomePage, ProductPage);
- В рамках страницы могут использоваться Widgets, Features и Entities;
- Этот уровень также может управлять страницами как модулями, которые обращаются к фичам и виджетам.

4. Widgets — крупные интерфейсные компоненты:
- Здесь находятся такие компоненты, как шапка (Header), подвал (Footer), боковое меню (Sidebar);
- Widgets могут содержать внутренние компоненты и подключать бизнес-логику, необходимую для их отображения, при этом избегая тяжелой логики.

5. Features — основные функциональные элементы, которые представляют отдельные действия:
- Например, фильтрация товаров (ProductFilter), добавление товара в корзину (AddToCart), формы регистрации и авторизации;
- Эти модули содержат как UI-компоненты, так и бизнес-логику, относящуюся к конкретной фиче, что делает их легко переиспользуемыми.

6. Entities — модули, которые отвечают за бизнес-логику и модель данных:
- Каждый Entity представляет сущность, например, Product, User, Order;
- Содержат взаимодействие с данными, такие как API-запросы и модели данных, что упрощает обработку данных в приложении.

7. Shared — переиспользуемые ресурсы, которые могут быть применены в разных частях проекта:
- Shared включает общие компоненты (Button, Input), стили, хелперы, хуки и утилиты;
- Эти модули предназначены для поддержки более высокого уровня компонентов, таких как Features и Widgets.

🔹 Преимущества подхода FSD

- Изоляция ответственности: FSD позволяет инкапсулировать логику и компоненты на уровне фич и виджетов, что снижает зависимость и улучшает тестируемость.
- Легкость поддержки и масштабируемость: Благодаря четкому распределению модулей, FSD подходит для проектов любой сложности, особенно если предполагается значительный рост функционала.
- Повышенная переиспользуемость: Модули, созданные на уровне Features или Shared, можно использовать повторно, что ускоряет разработку новых страниц и компонентов.
- Единая структура: С FSD легче сохранять единую структуру при добавлении новых страниц и фич, что делает проект понятным как для новых, так и для опытных разработчиков.

🎯 Заключение

Feature-Sliced Design помогает структурировать проект так, чтобы каждая часть приложения была независимой и легко изменяемой. Этот подход идеально подходит для сложных приложений, требующих четкой модульности, быстрой адаптации к изменениям и максимальной переиспользуемости компонентов.

P.S Структура в комментарии

ReactJs Daily | #pro

🚀 Управление состоянием в React-приложениях с Redux

Привет, разработчики! Сегодня обсудим одну из важнейших библиотек для управления состоянием в React — Redux. Если ваше приложение становится сложным и передача данных через пропсы вызывает неудобства, Redux может помочь в решении этих задач.

🔹 Что такое Redux и зачем он нужен?

Redux — это библиотека для управления глобальным состоянием приложения. В отличие от локального состояния, которое создается для каждого компонента отдельно (с помощью useState или useReducer), Redux позволяет хранить состояние на более высоком уровне и делиться им между всеми компонентами. Это особенно полезно в больших приложениях, где одни и те же данные должны быть доступны в разных частях интерфейса.

🔹 Основные части Redux

1. Store
Центральное хранилище всех данных приложения. Именно сюда попадают изменения состояния и откуда компоненты могут получать нужные данные.

2. Actions
Объекты, которые описывают, что именно нужно изменить в состоянии. Обычно action включает type — строку, описывающую тип изменения, и дополнительные данные (payload), если это необходимо.

const addToCart = (item) => {
   return {
      type: "ADD_TO_CART",
      payload: item,
   };
};
   

3. Reducers
Это чистые функции, которые описывают, как состояние изменяется в ответ на actions. Reducers не должны иметь побочных эффектов и всегда должны возвращать новое состояние.

const cartReducer = (state = [], action) => {
   switch (action.type) {
      case "ADD_TO_CART":
         return [...state, action.payload];
      case "REMOVE_FROM_CART":
         return state.filter((item) => item.id !== action.payload.id);
      default:
         return state;
   }
};
   

4. Dispatch
Функция, которая отправляет actions в Redux, вызывая соответствующий reducer и обновляя состояние.

🔹 Как использовать Redux в React

Для интеграции Redux с React можно воспользоваться библиотекой react-redux, которая предоставляет два основных метода: Provider и connect (или useSelector и useDispatch в случае хуков).

1. Подключение Provider
Чтобы React-компоненты могли получать данные из Redux, нужно обернуть все приложение в <Provider store={store}>, передав в него созданный store:

import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./reducers";

const store = createStore(rootReducer);

const App = () => (
   <Provider store={store}>
      <YourComponent />
   </Provider>
);
   

2. Использование useSelector и useDispatch
useSelector позволяет компонентам получать данные из Redux, а useDispatch — отправлять actions.

import React from "react";
import { useSelector, useDispatch } from "react-redux";

const Cart = () => {
   const cartItems = useSelector((state) => state.cart);
   const dispatch = useDispatch();

   const addItemToCart = (item) => {
      dispatch({ type: "ADD_TO_CART", payload: item });
   };

   return (
      <div>
         <h2>Корзина:</h2>
         {cartItems.map((item) => (
            <p key={item.id}>{item.name}</p>
         ))}
         <button onClick={() => addItemToCart({ id: 1, name: "Товар" })}>
            Добавить товар
         </button>
      </div>
   );
};
   

🔹 Когда использовать Redux?

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

🎯 Заключение

Redux помогает упорядочить состояние и облегчает управление данными в React-приложении. Его строгая структура и центральное хранилище делают приложение предсказуемым и удобным для масштабирования. Попробуйте использовать Redux в вашем проекте, и он станет незаменимым инструментом для управления состоянием в больших и сложных приложениях!

ReactJs Daily | #begginers