Почему useForm лучше useState?

Сегодня выпущу гайд по работе с react-hook-form.

✅ Возможности. useForm обладает огромным доп. функционалом, которого нет у useState.

✅ Производительность. Используя useForm, код становится свободней и читабельней. А это значит, что серверу понадобится гораздо меньше времени для считывания файла.

✅ Комфорт. Хук позволяет производить настройку "под себя". Например: в useState отслеживать изменения input мы можем указав "onChange" в каждом теге. В useForm этого делать не нужно. Данный параметр можно указать один раз прямо в настройках хука, и всё будет работать также!

❤️ за старания :)

Самый быстрый гайд по react-hook-form.

1️⃣ Установка. В терминале пишем: yarn add react-hook-form.

2️⃣ Импортируем useForm.

import { useForm } from 'react-hook-form'

3️⃣ Настраиваем useForm.

reset - очищает все input.
handleSubmit - получает данные формы.
register - оборачивает каждое значение input в объект.

const { reset, handleSubmit, register } = useForm({ mode: 'onSubmit' })

4️⃣ Оборачиваем input.

import styles from './Form.module.css'
import { useForm } from 'react-hook-form'

export const Form = () => {

  const { reset, handleSubmit, register } = useForm({ mode: 'onSubmit' })

  const change = data => {
    console.log(data)
    reset()
  }

  return (

    <div className={styles.wrap}>

      <span className={styles.title}>Авторизация</span>

      <form className={styles.form} onSubmit={handleSubmit(change)}>

        <div className={styles.email}>
          <input placeholder=''
            {...register("email", { required: true })}
          />
          <span>Email</span>
        </div>


        <div className={styles.password}>
          <input placeholder=''
            {...register("password", { required: true })}
          />
          <span>Password</span>
        </div>

        <button className={styles.submit} type='submit'>Вход</button>
      </form>
    </div>
    
  )
}

Код стал гораздо меньше и красивее, не так ли?🔥

Нужен видео-урок по данной теме?

"❤️" - да.
"🔥" - в посте всё понятно.

План реализации мессенджера:

1. Меню
2. Регистрация
3. Добавления в друзья
4. Реализация чата
5. Прочий доп. функционал(Настройки, статистика в профиле, поиск по чатам, онлайн/оффлайн)

Stack: React, Express, Socket, JWT(может быть, тк регистрацию я могу сделать и на чистом реакте через Context)

Если есть идеи по дополнительным функциям пишите в комментариях👇

Канал создан, сегодня выпущу первое видео❤️

Вышло новое видео🔥

Ютуб почему-то решил поужинать качеством, но надеюсь это временно.

Что такое useContext?

Этот хук схож с useState, он также хранит в себе определённые данные.

✅ Сходства:

👉 Локальное хранилище.

👉 Управление. Возможность изменения и удаления данных из любого файла.

❌ Различия:

👉 Удобство и масштабирование. useContext подходит для более крупной задачи(хранение данных авторизации и прочей тематики)

👉 Реализация в коде. useContext в больших случаях работает в связке с useState(благодаря нему мы передаём в контекст пропсы функций и объектов).

👉 Возможностей у useContext гораздо больше чем у useState. Мы можем оборачивать в контекст наши компоненты и блокировать, если не хотим распространять данные повсюду.

5❤️ = делаю гайд по реализации.

Самый быстрый гайд по useContext.

👉 Маршрутизация. В "src" создаём папку "providers". В ней создаём файл "Auth.provide.jsx".

👉 Импортируем createContext и useState.

import { useState } from "react"
import { createContext } from "react"

👉 Создаём тело контекста.

export const AuthContext = createContext()

export const AuthProvider = ({ children }) => {

    const [auth, SetAuth] = useState({}) //Эта та самая связка про которую я говорил выше
    
    return (

        <AuthContext.Provider value={{auth, SetAuth}}>

            { children }

        </AuthContext.Provider>
    )
}

👉 Подключаем провайдер в файле main.jsx.

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Router } from './Routers'
import { AuthProvider } from './providers/Auth.provide'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>

    <AuthProvider>

      <Router />

    </AuthProvider>
    
  </React.StrictMode>,
)

👉 Получаем данные или меняем их.

import { useContext } from "react"
import { Form } from "../reg-form/Form"
import styles from './Home.module.css'
import { AuthContext } from '../../../providers/Auth.provide'

export const Home = () => {

  const { auth, SetAuth } = useContext(AuthContext) //Работаем теперь как с useState, но через фигурные скобки

  console.log(auth)


  return (

    <div className={styles.wrap}>
      <Form />
    </div>
  )
 
}

Всё легко и просто❤️

структура проекта

Что такое кастомные хуки?

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

➡️ Вернёмся к первым темам про хуки. Что мы про них знаем? Хуки - это методы(подобие функции), которые выполняют определённые действия.

➡️ Кастомные хуки - это те же хуки, но повторяющие уже нашу логику, а не react.

➡️ Они используются для вынесения загромождающего кода. Работают также как и простые функции(возвращают определённое значение).

5⚡️ = продолжаю данную тему.

Данное творение выглядит пока что так, сейчас занимаюсь бэком✅

✅ Простой пример кастомного хука для смены темы приложения

import React, { useState } from 'react';

const useTheme = (initialTheme = 'light') => {
  const [theme, setTheme] = useState(initialTheme);

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return {
    theme,
    toggleTheme
  };
}

const App = () => {
  const { theme, toggleTheme } = useTheme('light');

  return (
    <div className={theme}>
      <button onClick={toggleTheme}>Переключить тему</button>
    </div>
  );
}

Мои настройки VSC.

На нашу продуктивность также влияет рабочее пространство. Поэтому очень важно уделить этому время. Определившись с IDE давайте её настроим под себя.

✅ Расширения.
👉 GitHub Theme - думаю тут и без слов всё понятно.

👉 ES7+ React/Redux/React-Native snippets - подсвечивает новый синтаксис js и много другое(к примеру rafc из моих видео).

👉 Live Share - позволяет кодить в одном проекте нескольким людям сразу.

👉 Material Icon Theme - красивые иконки файлов.

👉 Tabnine AI - нейросеть, которая подсказывает код наперёд.

Также в настройках есть settings.json, в нём прописан ваш конфиг VSC. Свой прикрепил ниже👇

Нужен подробный разбор по нему?
🏆 = да.
❤️ = следующая тема.

✅ Делаем приятный плавный курсор в Visual Studio Code.

👉 Settings => Text Editor => Cursor => Cursor Blinking (expand)

👉 Settings => Text Editor => Cursor => Cursor Smooth Caret Animation (on)

❤️ если ничего не успеваешь:)

Сегодня выйдет новое видео на YouTube, ждите🔥

Приятного просмотра❤️

🚀 Оптимизация производительности в React: Лучшие практики и инструменты 🚀

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

🚀 Инструменты для анализа и оптимизации:
Использование инструментов, таких как React DevTools и React Profiler, поможет выявить и устранить узкие места в производительности вашего приложения.

🚀 Ленивая загрузка (Lazy Loading):
Использование ленивой загрузки для компонентов или ресурсов, которые не требуются сразу при загрузке приложения, позволяет ускорить начальную загрузку и улучшить время отклика.

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

🚀 Оптимизация работы с виртуальным DOM:
Применение эффективных методов управления рендерингом, минимизация ненужных перерисовок компонентов, а также применение React.memo для предотвращения повторных рендеров могут значительно улучшить производительность.

👉React от А до Я

🚀 Виртуальный DOM (Virtual DOM) в React: Как Это Работает и Почему Это Важно 🚀

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

🎯 Что такое виртуальный DOM?
Виртуальный DOM - это концепция, которая обеспечивает абстракцию над реальным DOM, предоставляя средства для оптимизации и ускорения изменений интерфейса приложения.

🔍 Как это работает?
Когда состояние приложения меняется, React создает в памяти виртуальное представление DOM, сравнивает его с предыдущим состоянием и эффективно применяет только фактические изменения к реальному DOM.

💼 Почему важно использовать виртуальный DOM?
Использование виртуального DOM позволяет уменьшить количество манипуляций с реальным DOM, что ведет к повышению производительности и эффективности приложений. Он также обеспечивает более гладкий пользовательский опыт и снижает нагрузку на браузер.

Понимание виртуального DOM поможет вам создавать более эффективные и производительные веб-приложения в React.

👉React от А до Я

🚀 Использование React Query для Эффективной Работы с Данными в React Приложениях 🚀

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

🔍 Что такое React Query?
React Query предоставляет простой и интуитивно понятный способ для работы с удаленными и локальными данными в вашем приложении. Он предлагает удобный механизм для кэширования, инвалидации данных, запросов и многого другого.

🎯 Преимущества использования React Query:
- Управление состоянием данных без лишних усилий.
- Автоматическое обновление данных при необходимости.
- Возможность кэширования данных для улучшения производительности.

💡 Как использовать React Query в вашем проекте:
1. Установите библиотеку через npm или yarn: npm install @tanstack/react-query или yarn add @tanstack/react-query.
2. Создайте экземпляр QueryClient и оберните ваше приложение в QueryClientProvider.
3. Определите запросы с помощью хука useQuery, который автоматически управляет загрузкой данных и их кэшированием.

❗️ Практические примеры использования и дополнительные возможности:
- Обработка ошибок и переопределение поведения загрузки данных.
- Обновление данных в фоновом режиме для повышения отзывчивости приложения.

6🏆 = показываю реализацию в коде.

👉React от А до Я