🚀 Новинка в React 19: ref как проп

С выходом React 19 появилась возможность передавать ref напрямую в функциональные компоненты как обычный пропс. Это упрощает использование ссылок и делает код более читаемым.

🔹Как было раньше

Раньше для передачи ссылки в функциональные компоненты использовался HOC forwardRef, что добавляло лишний код:

import React, { forwardRef } from "react";

const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

<MyInput placeholder="Введите текст" ref={inputRef} />

🔹Как стало в React 19

Теперь ref можно передавать как обычный пропс:

function MyInput({ placeholder, ref }) {
  return <input placeholder={placeholder} ref={ref} />;
}

<MyInput ref={inputRef} placeholder="Введите текст" />

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

🔄 Что изменится в будущем?

React планирует полностью удалить поддержку `forwardRef` в следующих версиях.
Для упрощения перехода разработчикам будет предоставлен инструмент codemod, который автоматически обновит существующий код.

📌 Важно

- Классы по-прежнему не поддерживают передачу ref как пропса, поскольку ref указывает на экземпляр компонента.

🎯 Заключение

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

ReactJs Daily | #react19

🚀 Хук useFormStatus в React 19

С выходом React 19 разработчикам стал доступен новый мощный инструмент для управления состояниями форм — хук useFormStatus. Он значительно упрощает работу с формами, предоставляя удобный способ отслеживать состояния, связанные с отправкой данных.

🔹Что такое useFormStatus?

Этот хук возвращает объект с информацией о текущем состоянии формы:
- pending — указывает, находится ли форма в процессе отправки.
- data — объект с данными, которые отправляются.
- method — метод HTTP-запроса (GET или POST).
- action — ссылка на функцию, переданную в action у <form>.

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

Допустим, у нас есть форма с кнопкой отправки. С помощью useFormStatus можно блокировать кнопку, пока форма отправляется, и отображать статус загрузки:

import { useFormStatus } from "react-dom";

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Отправка..." : "Отправить"}
    </button>
  );
}

function Form({ action }) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

export default function App() {
  const submitAction = async (formData) => {
    const name = formData.get("name");
    console.log(`Отправляем данные: ${name}`);
    // Здесь можно выполнить асинхронный запрос
  };

  return <Form action={submitAction} />;
}

🔹Особенности и нюансы

1. Где использовать хук:
useFormStatus необходимо вызывать из компонента, который находится внутри <form>. Например:

 function Submit() {
   const { pending } = useFormStatus();
   return <button disabled={pending}>...</button>;
 }   

2. Данные формы:
С помощью свойства data можно получить данные, отправляемые формой. Это полезно для отображения подтверждения или предварительной информации:

 const { pending, data } = useFormStatus();
 return <p>{data ? `Отправляем: ${data.get("username")}` : ""}</p>;
   

3. Ограничения:
Хук отслеживает состояние только для <form>, которая является родителем компонента, где вызывается useFormStatus. Если форма и хук находятся в одном компоненте, состояние отслеживаться не будет.

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

Простое управление состоянием формы: Не нужно вручную создавать состояния для отправки или ошибок.
Чистый код: Уменьшается количество кода для управления состоянием форм.
Гибкость: Подходит как для простых форм, так и для сложных асинхронных сценариев.


Попробуйте useFormStatus в своих проектах, чтобы оптимизировать работу с формами!

ReactJs Daily | #react19

🚀 Три лучших фреймворка для аутентификации: сравнение и примеры

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

🔹Clerk

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

- Поддержка различных стратегий аутентификации: Clerk поддерживает множество способов аутентификации, включая электронную почту, социальные сети и двухфакторную аутентификацию.
- Полноценное управление пользователями: Быстро добавляйте функции регистрации, входа и управления профилем в ваше приложение.
- Интеграции с базами данных: Clerk позволяет пользователям аутентифицироваться и взаимодействовать с вашей базой данных через интеграцию.
- Настраиваемые компоненты: Clerk предоставляет настраиваемые компоненты, которые можно адаптировать под дизайн вашего приложения.
- Организации: Подходящий вариант для корпоративных приложений, где необходимы общие аккаунты для управления проектами и ресурсами.

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

import { SignIn, SignUp, Profile } from '@clerk/clerk-react';

function App() {
  return (
    <>
      <SignIn path="/signin" routing="path" />
      <SignUp path="/signup" routing="path" />
      <Profile path="/profile" routing="path" />
    </>
  );
}

Подробнее

🔹SupabaseAuth

Supabase — это альтернатива Firebase с открытым исходным кодом. SupabaseAuth помогает легко реализовать аутентификацию и авторизацию в вашем приложении:

- Поддержка различных методов аутентификации: Включает пароли, магические ссылки, одноразовые пароли (OTP), социальную авторизацию и единый вход (SSO).
- Работа с JSON Web Token (JWT): SupabaseAuth использует JWT для аутентификации, что облегчает интеграцию с Row Level Security (RLS).
- Интеграция с популярными провайдерами: SupabaseAuth поддерживает множество сторонних поставщиков для социальных сетей и телефонов.

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

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.SUPABASE_URL
const supabaseKey = process.env.SUPABASE_KEY
const supabase = createClient(supabaseUrl, supabaseKey)

async function signInWithEmail(email, password) {
  const { session, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  })

  if (error) throw error
  return session
}

Подробнее

🔹Better Auth

Better Auth — это фреймворк для аутентификации и авторизации, независимый от конкретных технологий. Он предлагает богатую функциональность и простоту использования:

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

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

import { BetterAuth } from 'better-auth';

const auth = new BetterAuth({
  providers: ['google', 'github'],
  secret: process.env.BETTER_AUTH_SECRET,
});

auth.init();

await auth.login('google');

Подробнее

🎯 Заключение

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

ReactJs Daily| #begginers

🚀 Хук useTransition в React 19: оптимизация рендеринга без блокировок

Новый хук useTransition в React 19 позволяет помечать обновления состояния как "переходы" (Transitions), делая их неблокирующими. Это особенно полезно для улучшения пользовательского опыта в случаях, когда рендеринг занимает значительное время, например, при переключении вкладок, обновлении графиков или выполнении других вычислительных задач.

🔹Что делает `useTransition`?

1. Плавный UX: Обновления состояния, помеченные как "Transitions", не блокируют основной поток. Это значит, что другие более важные обновления, такие как ввод текста, будут обработаны быстрее.
2. Контроль статуса: Хук возвращает флаг isPending, который показывает, находится ли Transition в процессе выполнения.
3. Гибкость: Позволяет разработчику явно указывать, какие обновления должны быть выполнены в фоне.

🔹Основы использования

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

import { useTransition, useState } from "react";

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState("about");

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <div>
      <button onClick={() => selectTab("about")}>О нас</button>
      <button onClick={() => selectTab("services")}>Услуги</button>
      {isPending && <p>Загрузка...</p>}
      <div>{tab === "about" ? "Контент 'О нас'" : "Контент 'Услуги'"}</div>
    </div>
  );
}

Как это работает:
- startTransition используется для оборачивания обновления состояния (setTab).
- isPending позволяет отобразить состояние загрузки, пока React выполняет переход.

🔹Как работает startTransition

startTransition принимает функцию (Action), которая должна содержать обновление состояния. Все состояния, обновляемые внутри этой функции, будут помечены как Transition.

Пример с асинхронным запросом:

function SubmitButton({ submitAction }) {
  const [isPending, startTransition] = useTransition();

  return (
    <button
      disabled={isPending}
      onClick={() => {
        startTransition(() => {
          submitAction();
        });
      }}
    >
      {isPending ? "Отправка..." : "Отправить"}
    </button>
  );
}

🔹Особенности и ограничения

1. Использование только в компонентах: useTransition работает только в компонентах или пользовательских хуках.
2. Асинхронные обновления: Если вы делаете асинхронный запрос внутри Transition, все обновления состояния после await должны быть снова обернуты в startTransition.
3. Перебивания: Transition можно прерывать более важными обновлениями, например, вводом текста в поле.
4. Обновление полей ввода: Transition не подходит для управления текстовыми полями.

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

- Улучшает плавность интерфейсов.
- Уменьшает время реакции приложения на пользовательские действия.
- Позволяет эффективно управлять приоритетом обновлений.

🔹Когда применять

useTransition идеально подходит для задач, которые могут выполняться с небольшой задержкой, например:
- Переключение вкладок.
- Загрузка больших списков данных.
- Рендеринг сложных компонентов (например, диаграмм или таблиц).

🎯 Заключение

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

ReactJs Daily| #react19

🚀 Insomnia: легкий инструмент для тестирования API, который вам точно понравится

Ребята, я тут недавно наткнулся на Insomnia. Если вы, как и я, устали от тяжеловесных инструментов вроде Postman, которые тормозят систему и отвлекают от работы, то вот вам достойная альтернатива. Insomnia — это легкий, быстрый и суперудобный инструмент для разработчиков. Подходит для работы с REST, GraphQL, gRPC и даже WebSocket API.

🔹Чем хороша Insomnia?

- HTTP-запросы: стандартные GET, POST, PUT и DELETE — всё работает как надо.
- GraphQL: поддержка из коробки, никаких лишних настроек.
- gRPC и WebSocket: идеальный вариант для тестирования современных протоколов реального времени.
- Event Stream: удобно обрабатывать серверные события в реальном времени.

🔹Почему я выбрал Insomnia?

1. Лёгкость: Insomnia не нагружает систему. Всё быстро, гладко и без лагов.
2. Простота: интерфейс интуитивно понятный — ничего лишнего. сел, настроил, работаешь.
3. Гибкость: поддержка плагинов позволяет адаптировать инструмент под ваши задачи.
4. Поддержка всех современных протоколов: REST, GraphQL, gRPC, WebSocket — всё есть.

🔹Для кого это подойдёт?

- Бекенд-разработчики: чтобы быстро тестировать эндпоинты.
- Фронтенд-разработчики: для интеграции с API без головной боли.
- Те, кто хочет облегчить себе жизнь: если вам надоело путаться в сложных настройках и грузить систему, попробуйте Insomnia.

Серьёзно, попробуйте. Я перешёл с Postman и не жалею — экономия времени и нервов колоссальная. А главное, всё выглядит и работает супер просто.

https://insomnia.rest/

ReactJs Daily| #shortinfo

🚀 Понимание хука useParams в React

Привет, друзья! 👋 Сегодня поговорим о useParams — это хук из React Router, который позволяет извлекать динамические параметры из URL. Это удобно для создания страниц с динамическими данными, таких как профили пользователей, статьи или карточки товаров.

🔹Как работает useParams

Хук возвращает объект, где:
Ключи — имена динамических сегментов маршрута.
Значения — параметры, извлечённые из URL.

Пример маршрутов:

<Route path="/profile/:userId" element={<UserProfile />} />
<Route path="/post/:postId/comment/:commentId" element={<PostComment />} />

При переходе по URL:
1. /profile/123: useParams() вернёт { userId: "123" }.
2. /post/456/comment/789: useParams() вернёт { postId: "456", commentId: "789" }.

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

1. Базовый пример

Вывод информации о пользователе по его ID:

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

function UserProfile() {
  const { userId } = useParams();

  return <h1>Профиль пользователя: {userId}</h1>;
}

Объяснение: При переходе на /profile/123 из URL извлекается параметр userId и отображается на странице.

2. Несколько параметров

Работа с несколькими динамическими сегментами:

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

function PostComment() {
  const { postId, commentId } = useParams();

  return (
    <div>
      <h1>Идентификатор поста: {postId}</h1>
      <h2>Идентификатор комментария: {commentId}</h2>
    </div>
  );
}

Объяснение: Для URL /post/456/comment/789 postId будет "456", а commentId — "789".

3. Опциональные параметры

Маршруты могут включать опциональные параметры:

<Route path="/search/:query?" element={<Search />} />

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

function Search() {
  const { query } = useParams();

  return (
    <h1>{query ? `Результаты поиска: ${query}` : "Показать все результаты"}</h1>
  );
}

Объяснение:
- /search/books → Показывает: "Результаты поиска: books"
- /search → Показывает: "Показать все результаты"

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

- Динамические маршруты: Когда URL содержит переменные сегменты (например, /users/:id).
- Получение данных: Для запросов данных с использованием параметров URL.
- Вложенные маршруты: При необходимости извлечения параметров из сложных структур маршрутов.

🔹Полезные советы

1. Строковые значения: Все параметры, возвращаемые useParams, являются строками. Для чисел используйте парсинг.
2. Обработка ошибок: Убедитесь, что ваш код корректно обрабатывает случаи отсутствия или некорректности параметров.
3. Опциональные параметры: Используйте :paramName?, чтобы сегмент маршрута был необязательным.

🎯 Заключение

useParams — это простой и мощный инструмент для работы с динамическими маршрутами. В сочетании с useEffect и API-запросами он помогает легко создавать страницы с уникальным содержимым.

ReactJs Daily| #begginers

🚀 Новый хук use в React: больше гибкости для работы с ресурсами

С выходом новых версий React мы получили доступ к невероятно удобному инструменту — хуку use. Это API позволяет напрямую работать с ресурсами, такими как контекст или промисы, делая ваш код чище и удобнее. Давайте разберёмся, как это работает!

🔹Что такое use?

Хук use позволяет "прочитать" значение ресурса, такого как:
Promise: например, данные из API.
Контекст: значение, переданное через React Context.

Это похоже на useContext, но с важным отличием: use можно вызывать в условиях и циклах, таких как if и for.

🔹Как работает use?

Когда вы передаёте в use промис, React:
1. Приостанавливает рендеринг компонента до тех пор, пока промис не завершится.
2. Если компонент находится внутри границы Suspense, отображает fallback, пока данные загружаются.
3. После завершения промиса рендерит компонент с готовыми данными.
4. Если промис завершится с ошибкой, ближайший ErrorBoundary обработает её.

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

1. Работа с промисом

import { use } from 'react';  

function MessageComponent({ messagePromise }) {  
  const message = use(messagePromise);  

  return <p>{message}</p>;  
}  

Здесь use возвращает результат, который получается после выполнения промиса messagePromise.

2. Чтение контекста

import { use } from 'react';  
import { ThemeContext } from './ThemeContext';  

function Button() {  
  const theme = use(ThemeContext);  

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

Почему это удобно: В отличие от useContext, use можно вызывать в условиях или циклах.

3. Комбинированное использование

function HorizontalRule({ show }) {  
  if (show) {  
    const theme = use(ThemeContext);  
    return <hr className={theme} />;  
  }  
  return null;  
}  

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

🔹Особенности использования

Внутри компонентов или хуков: Как и другие хуки, use можно вызывать только из компонента или пользовательского хука.
Интеграция с Suspense: Для работы с асинхронными ресурсами необходим Suspense.
Асинхронный рендеринг: Вместо создания промисов в клиентских компонентах, рекомендуется передавать их из серверных компонентов.

🔹Почему стоит попробовать use?

Гибкость: Возможность вызывать хук в условиях и циклах.
Простота: Нет необходимости вручную управлять состоянием для работы с промисами.
Поддержка контекста: Чтение контекста стало ещё удобнее.

Попробуйте use в своих проектах и ощутите, насколько он упрощает работу с асинхронными данными и контекстом!

ReactJs Daily| #react19

🎄 Наконец-то предновогодние моратории на релизы! 🎄

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

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

ReactJs Daily

🚀 Ошибка "Bad setState() call while rendering" в React: причины и решения

Привет, друзья! 👋 Сегодня разберём одну из частых ошибок в React:

Warning: Cannot update a component (Bookings) while rendering a different component (BookingConfirmationModal).

Эта ошибка возникает, когда вы пытаетесь обновить состояние одного компонента (например, Bookings) во время рендера другого (например, BookingConfirmationModal). Часто причина — передача setState в дочерний компонент через пропсы.

Почему это проблема? Такой подход нарушает цикл рендера React, что может привести к:

Бесконечным циклам рендера, которые "падают" с ошибкой.
Некорректной отрисовке UI из-за несогласованности данных.
Гонкам данных, если несколько компонентов изменяют одно и то же состояние.

🔹 Почему возникает ошибка?

1. Обновление состояния в процессе рендера
Вы вызываете setState прямо в теле функции рендера или в дочернем компоненте.

2. Побочные эффекты внутри рендера
Например, вы пытаетесь вызвать setState или выполнить асинхронную операцию.

3. Ошибочное использование хуков
Иногда проблема кроется в неверном использовании useMemo или других хуков.

🔹Как это исправить?

1. Перенесите обновление состояния в useEffect
Используйте хук useEffect, чтобы выполнять обновление состояния после рендера.

import React, { useEffect } from 'react';  

const BookingConfirmationModal = ({ someProp, setTestingState }) => {  
  useEffect(() => {  
    setTestingState(false);  
  }, [someProp]); // Добавьте зависимости, если нужно  

  return <div>Modal Content</div>;  
};  

2. Убедитесь, что состояние не обновляется внутри рендера
Проверьте, что setState не вызывается в самом компоненте или в функциях, вызываемых во время рендера.

3. Избегайте некорректного использования useMemo
Если вы используете useMemo для вычислений, связанных с состоянием, переместите эту логику в useEffect или перенесите в родительский компонент.

🔹 Пример решения

Родительский компонент:

import { useState } from 'react';  

function App() {  
  const [showModal, setShowModal] = useState(false);  

  return (  
    <div>  
      <h1>React Application</h1>  
      <button onClick={() => setShowModal(true)}>Show Modal</button>  
      {showModal && (  
        <BookingConfirmationModal setTestingState={setShowModal} />  
      )}  
    </div>  
  );  
}  

export default App;  

Дочерний компонент:

  
import React, { useEffect } from 'react';  

const BookingConfirmationModal = ({ setTestingState }) => {  
  useEffect(() => {  
    setTestingState(false);  
  }, [setTestingState]);  

  return (  
    <div>  
      <button onClick={() => setTestingState(false)}>Close Modal</button>  
    </div>  
  );  
};  

export default BookingConfirmationModal;  

🎯 Заключение

Используйте useEffect, чтобы обновлять состояние после рендера, а не во время.
Проверьте, чтобы функции setState не вызывались в процессе рендера.
При работе с хуками, такими как useMemo, следите за их правильным использованием.

ReactJs Daily| #begginers

🎄 Друзья, спасибо вам за этот год!

Привет, мои дорогие! 👋

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

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

🎅 Пусть наступающий год принесёт вам счастье, уют, успех и волшебные моменты.

С наступающим Новым годом! 🎉