🚀 Хук useOptimistic: Оптимизация UI с прогнозом изменений

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

🔹Что такое useOptimistic?

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

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

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

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

import { useOptimistic, useState, useRef } from "react";
import { deliverMessage } from "./actions.js"; //Promise отправки

function Thread({ messages, sendMessage }) {
  const formRef = useRef();
  async function formAction(formData) {
    addOptimisticMessage(formData.get("message"));
    formRef.current.reset();
    await sendMessage(formData);
  }
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      ...state,
      {
        text: newMessage,
        sending: true
      }
    ]
  );

  return (
    <>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (Sending...)</small>}
        </div>
      ))}
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="Hello!" />
        <button type="submit">Send</button>
      </form>
    </>
  );
}

export default function App() {
  const [messages, setMessages] = useState([
    { text: "Hello there!", sending: false, key: 1 }
  ]);
  async function sendMessage(formData) {
    const sentMessage = await deliverMessage(formData.get("message"));
    setMessages((messages) => [...messages, { text: sentMessage }]);
  }
  return <Thread messages={messages} sendMessage={sendMessage} />;
}

В этом примере, когда пользователь вводит сообщение в форму и нажимает кнопку "Send", хук useOptimistic позволяет сообщению сразу появиться в списке с меткой "Sending...", даже до того, как сообщение на самом деле будет отправлено на сервер. Этот «оптимистичный» подход создает впечатление скорости и отзывчивости. Затем форма пытается отправить сообщение в фоновом режиме. Как только сервер подтверждает, что сообщение было получено, метка "Sending..." удаляется.

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

1. Отзывчивость интерфейса — изменения происходят немедленно, без задержки.
2. Поддержка асинхронных операций — позволяет обрабатывать операции с сервером без блокировки UI.
3. Гибкость — легко настраиваемая логика для отката изменений в случае ошибки.

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

🎯 Заключение

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

В настоящее время хук useOptimistic доступен только в Canary.

ReactJs Daily | #shortinfo

🚀 TanStack Router: мощный инструмент для маршрутизации в React

Привет, друзья! Продолжаем знакомиться с библиотеками от TanStack. Мы уже обсуждали Query и Table, а сегодня поговорим о TanStack Router — инновационном решении для маршрутизации.

🔹 Почему TanStack Router?

- Гибкость: идеально подходит для сложных и вложенных маршрутов.
- SSR и SSG: встроенная поддержка серверного рендеринга и статической генерации страниц.
- Типизация: нативная интеграция с TypeScript упрощает разработку.
- Асинхронность: маршруты могут загружать данные перед отображением, что ускоряет рендеринг страниц.

🔹 Ключевые особенности:

1️⃣ Декларативные маршруты: маршруты описываются как дерево, что удобно для вложенности.
2️⃣ Оптимизация производительности: обновляются только те компоненты, которые зависят от изменения маршрута.
3️⃣ Универсальность: работает как в клиентских, так и в серверных приложениях.

🔹 Пример настройки:

import { createReactRouter, createRouteConfig } from "@tanstack/react-router";

// Конфигурация маршрутов
const routeConfig = createRouteConfig().addChildren([
  { path: "/", component: HomePage },
  { path: "/about", component: AboutPage },
  { path: "/contact", component: ContactPage },
]);

// Создание маршрутизатора
const router = createReactRouter({ routeConfig });

// Использование маршрутизатора
import { RouterProvider } from "@tanstack/react-router";

function App() {
  return <RouterProvider router={router} />;
}

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

TanStack Router особенно полезен, если вы разрабатываете:
- SPA с динамическими страницами.
- Приложения с поддержкой SSR или SSG (например, в сочетании с Next.js).
- Проекты с высокими требованиями к производительности.

🎯 Заключение

TanStack Router — это мощное решение для тех, кто ищет гибкость и производительность в маршрутизации. Если вам уже нравится экосистема TanStack, обязательно попробуйте этот инструмент!

ReactJs Daily | #shortinfo

🚀 Vite: Быстрый и современный инструмент для разработки

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

🔹 Что такое Vite?
Vite — это инструмент для сборки и разработки современных приложений. Название происходит от французского слова vite ("быстро"), и он полностью оправдывает своё название. Его ключевые особенности:
- Использование ES-модулей для быстрого старта.
- Невероятно быстрая замена модулей (HMR).
- Оптимизация для современных браузеров.

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

1️⃣ Мгновенный запуск проекта. В отличие от Webpack, он не сканирует весь проект, а загружает только используемые модули.
2️⃣ Скорость обновления. Hot Module Replacement (HMR) позволяет обновлять изменения за миллисекунды.
3️⃣ Поддержка TypeScript, JSX и CSS-модулей из коробки.
4️⃣ Масштабируемость. Подходит как для небольших проектов, так и для крупных приложений.

🔹 Как начать работу?

Запустить проект с Vite проще простого:

npm create vite@latest my-project  
cd my-project  
npm install  
npm run dev  

Vite моментально поднимет сервер разработки, и вы сразу увидите своё приложение в браузере.

🔹 Поддержка фреймворков

Vite поддерживает большинство популярных фреймворков:
- React
- Vue
- Svelte
- Preact
- Lit

🔹 Что делает Vite особенным?

Vite разделяет процесс разработки на две части:
- Сервер разработки: использует нативные ES-модули, что ускоряет запуск и обновление.
- Сборка для продакшена: основана на Rollup, что обеспечивает высокую производительность и минимальный размер файлов.

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

Если вы создаёте:
- Маленькие проекты: Vite позволяет сократить время настройки.
- Большие приложения: благодаря быстрой сборке и HMR, работа становится комфортной даже с большими кодовыми базами.

🎯 Заключение

Vite — это выбор разработчиков, которые ценят своё время и хотят использовать самые современные технологии. Попробуйте Vite, и вы больше не захотите возвращаться к старым инструментам!

ReactJs Daily | #begginers

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

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

🔹 Что такое React-Scan?

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

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

1️⃣ Сканирование компонентов:
React-Scan анализирует дерево компонентов и определяет узкие места, такие как лишние обновления компонентов.

2️⃣ Мемоизация и оптимизация:
Показывает, где стоит использовать React.memo, useMemo или useCallback для предотвращения ненужных рендеров.

3️⃣ Подсказки по состоянию:
Инструмент помогает обнаружить неправильное использование контекста, пропсов или состояния, из-за чего могут рендериться не только нужные, но и соседние компоненты.

🔹 Ключевые преимущества:

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

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

React-Scan устанавливается как библиотека, а его вывод интегрируется в devtools, предоставляя графическое отображение рендеров компонентов и их времени выполнения.

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

Проблемы с производительностью.
Большое количество компонентов или сложные вычисления.
Приложения с интенсивным использованием состояния и пропсов.

🎯 Заключение

React-Scan — это ваш помощник в создании быстрых и отзывчивых приложений. Он поможет превратить медленное приложение в высокопроизводительное за счёт устранения избыточных рендеров и грамотной оптимизации.

you can technically scan ANY website on the web:

npx react-scan@latest https://react.dev

Изучить подробнее 👍

ReactJs Daily | #shortinfo

🚀 Sentry для React: мониторинг ошибок и улучшение производительности

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

🔹 Установка и настройка

Установите Sentry:

npm install @sentry/react @sentry/browser

Инициализируйте в основном файле приложения, например, в index.js:

import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: 'https://<your-dsn>@o123456.ingest.sentry.io/123456',
  integrations: [new Sentry.BrowserTracing()],
  tracesSampleRate: 1.0, // Процент выборки данных
});

🔹 Интеграция с Error Boundary

Чтобы улавливать ошибки в компонентах, используйте withErrorBoundary:

import React from 'react';
import * as Sentry from '@sentry/react';

const ErrorFallback = () => <h1>Упс! Произошла ошибка.</h1>;

const MyComponent = Sentry.withErrorBoundary(Component, {
  fallback: <ErrorFallback />,
});

export default MyComponent;

Теперь ошибки внутри будут отправляться в Sentry, а пользователи увидят fallback-интерфейс.

🔹 Отслеживание ошибок и событий

Можно явно захватывать ошибки или события:

import * as Sentry from '@sentry/react';

try {
  throw new Error("Пример ошибки");
} catch (error) {
  Sentry.captureException(error); // Отправляет отчет в Sentry
}

Sentry.captureMessage("Ключевое событие", "info");

🔹 Преимущества Sentry

1️⃣ Мгновенное уведомление об ошибках. Получайте уведомления через email, Slack и другие каналы.
2️⃣ Детальная аналитика. Логи, сессии пользователей и версия приложения помогают быстрее находить проблему.
3️⃣ Производительность. Sentry показывает медленные участки приложения, позволяя оптимизировать их.
4️⃣ Удобная интеграция. Подходит как для простых приложений, так и для сложных архитектур.

🎯 Заключение

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

ReactJs Daily | #shortinfo

🚀 Tailwind CSS в React: плюсы, минусы и использование

Привет, друзья! 👋 Сегодня поговорим про Tailwind CSS — мощный инструмент для стилизации, который использует утилитарный подход.

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

Tailwind CSS — это фреймворк, в котором вы создаёте стили с помощью готовых классов. Каждый класс отвечает за конкретный стиль: отступы, цвета, тени и многое другое. Это делает разработку быстрой и гибкой.

🔹 Преимущества Tailwind CSS

1️⃣ Быстрое создание UI:
Вы можете стилизовать React-компоненты прямо в JSX:

<button className="bg-blue-500 text-white px-4 py-2 rounded">
  Кнопка
</button>

2️⃣ Консистентный дизайн:
Благодаря встроенным переменным для отступов, цветов и шрифтов дизайн становится единообразным.

3️⃣ Минимизация CSS:
Tailwind удаляет неиспользуемые стили на этапе сборки, оптимизируя итоговый файл.

4️⃣ Легкая настройка:
С помощью tailwind.config.js вы можете добавить свои цвета, шрифты и другие параметры.

🔹 Недостатки Tailwind CSS

1️⃣ Загромождение JSX-кода:
Множество классов могут затруднять чтение:

<div className="bg-white p-6 shadow-md rounded-md flex items-center">
  <span className="text-gray-700 font-semibold">Пример</span>
</div>

2️⃣ Изучение:
Нужно время, чтобы освоить обширный набор классов и их комбинации.

3️⃣ Зависимость:
Переключиться на другой CSS-фреймворк сложно из-за плотной интеграции стилей в компоненты.

🔹 Tailwind в React: пример компонента

import React from "react";

export default function Card({ title, description }) {
  return (
    <div className="bg-gray-100 p-4 rounded shadow-lg">
      <h2 className="text-lg font-bold text-gray-800">{title}</h2>
      <p className="text-gray-600">{description}</p>
    </div>
  );
}

В этом примере используется утилитарный подход для быстрого создания стильного компонента.

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

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

🎯 Заключение

Tailwind CSS — это мощный инструмент для ускорения разработки интерфейсов, особенно в больших командах. Однако его использование требует опыта и понимания утилитарного подхода.

ReactJs Daily | #begginers

🚀 Что такое RTK Query и зачем он нужен?

Всем привет! 👋 Сегодня поговорим про RTK Query — это мощный инструмент для управления состоянием и получения данных в приложениях на основе React, который входит в состав Redux Toolkit. Он значительно упрощает процесс работы с API и обеспечивает разработчиков множеством полезных возможностей.

🔹 Зачем использовать RTK Query?

1. Упрощение взаимодействия с API: RTK Query предоставляет простой и удобный способ для выполнения асинхронных запросов к REST или GraphQL API. Вам не нужно вручную обрабатывать действия, редюсеры и состояние загрузки — все это делается автоматически.

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

3. Генерация типов TypeScript: Если вы используете TypeScript, RTK Query позволяет автоматически генерировать типы для запросов и ответов, что обеспечивает большую безопасность типизации.

4. Интеграция с Redux: Поскольку RTK Query разработан как часть Redux Toolkit, он легко интегрируется с уже существующими Redux-приложениями и позволяет использовать привычные парадигмы управления состоянием.

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

🔹 Как начать использовать RTK Query?

Чтобы начать использовать RTK Query, вам нужно установить Redux Toolkit:

npm install @reduxjs/toolkit react-redux

Затем создайте «API slice», который определяет, как будет происходить взаимодействие с вашим API:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => 'posts',
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
    }),
  }),
});

export const { useGetPostsQuery, useAddPostMutation } = api;

После этого добавьте редюсер API в ваш Redux Store:

import { configureStore } from '@reduxjs/toolkit';
import { api } from './services/api';

export const store = configureStore({
  reducer: {
    // Добавьте редюсеры вашего API
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
});

Теперь вы можете использовать хуки, предоставляемые RTK Query, в ваших компонентах:

import React from 'react';
import { useGetPostsQuery, useAddPostMutation } from './services/api';

const Posts = () => {
  const { data: posts, error, isLoading } = useGetPostsQuery();
  const [addPost] = useAddPostMutation();

  const handleAddPost = async () => {
    await addPost({ title: 'Новое название', content: 'Содержимое поста' });
  };

  if (isLoading) return <div>Загрузка...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Посты</h1>
      <button onClick={handleAddPost}>Добавить пост</button>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

🎯 Заключение

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

ReactJs Daily | #begginers

🚀 React 19: Новое поколение React-приложений

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

🔹Ключевые изменения в React 19

1️⃣ React Compiler
Теперь React может оптимизировать код на этапе компиляции, а не выполнения. Это позволяет:
- Уменьшить размер JavaScript-бандлов.
- Ускорить загрузку и работу приложения.
Результат — быстрее и удобнее для пользователя.

2️⃣ Улучшенные серверные компоненты
Серверные компоненты стали еще мощнее:
- Лучшая поддержка паттернов загрузки данных.
- Снижение зависимости от JavaScript на клиенте.
Это особенно полезно для масштабных приложений.

3️⃣ Расширенные Error Boundaries
Больше подробностей об ошибках и улучшенные механизмы их обработки делают дебаггинг проще и понятнее.

4️⃣ Автоматическая координация HTML
Теперь React лучше согласовывает серверный HTML и клиентские компоненты, что сокращает проблемы гидратации и повышает производительность.

5️⃣ Отслеживание переходов состояния
Становится легче отслеживать сложные переходы состояния, что важно для оптимизации сложных интерфейсов.

🔧 Как перейти на React 19

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

💡 Почему стоит обновиться?

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

Подробное описание всех изменений доступно в официальном блоге React.

ReactJs Daily | #news

🚀 Новинка в 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

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

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

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

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

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

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