Полезные видео о фронтенде. Подпишись на Rutube

Продвинутые стратегии при работе с React и TypeScript

2 года назад·10 мин. на чтение

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

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

Архитектура

Хорошо спроектированная архитектура необходима для создания масштабируемых, поддерживаемых и расширяемых приложений. Продуманная архитектурная стратегия может гарантировать, что ваше приложение остается управляемым по мере его роста и развития с течением времени. Существует несколько архитектурных шаблонов, доступных для приложений React, таких как Flux, Redux и Context API. Каждый шаблон имеет свои сильные и слабые стороны, и выбор будет зависеть от требований вашего приложения и предпочтений вашей команды. При создании приложения TypeScript важно выбрать архитектуру, которая хорошо работает с дополнительным уровнем сложности TypeScript. Многоуровневая архитектура, такая как Domain-Driven Design, может помочь управлять сложностью и обеспечивать разделение задач. Кроме того, модульная архитектура, такая как Micro Frontends, может помочь разбить большие приложения на более мелкие, более управляемые части. Другая архитектурная стратегия заключается в использовании компонентов-контейнеров и презентационных компонентов. Компоненты-контейнеры отвечают за управление состоянием приложения и потоком данных, в то время как презентационные компоненты связаны с отображением пользовательского интерфейса. Такой подход помогает обеспечить разделение задач и упорядочить кодовую базу.

Давайте подробнее рассмотрим пример архитектуры приложения React и TypeScript.

// App.tsx
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import NotFound from './pages/NotFound';

function App() {
  return (
    <Provider store={store}>
      <Router>
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route exact path="/contact" component={Contact} />
          <Route component={NotFound} />
        </Switch>
        <Footer />
      </Router>
    </Provider>
  );
}
export default App;

В этом примере архитектуры у нас есть компонент контейнера App, который управляет состоянием приложения и потоком данных. Мы используем React Router для управления маршрутизацией приложения и рендеринга различных страниц на основе URL- адреса. Компонент контейнера также заключает все приложение в Provider Redux, который предоставляет доступ к глобальному состоянию приложения. Презентационные компоненты, Header и Footer, связаны с отображением пользовательского интерфейса и получением пропса от компонента контейнера.

Тестирование

Тестирование имеет решающее значение для обеспечения того, чтобы ваш код работал так, как задумано, выявляя ошибки до того, как они попадут в продакшен. Эффективное тестирование требует комплексной стратегии, охватывающей все аспекты приложения, от модульных тестов до интеграционных тестов и end-to-end тестов. Существует несколько фреймворков тестирования и инструментов, доступных для React и TypeScript, таких как Jest, Enzyme и React Testing Library. При тестировании приложений TypeScript важно убедиться, что тесты правильно типизируют код и обнаруживают ошибки, связанные с типами. Модульные тесты должны быть написаны для охвата отдельных функций или компонентов, в то время как интеграционные тесты должны проверять, как различные части приложения работают вместе. End-to-end (e2e) тесты должны имитировать реальные пользовательские сценарии и охватывать все аспекты приложения. Давайте подробнее рассмотрим пример стратегии тестирования для приложения React и TypeScript.

// Example.test.tsx

import React from 'react';
import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import store from './store';
import Example from './Example';

describe('Example component', () => {
  it('renders correctly', () => {
    render(
      <Provider store={store}>
        <Example />
      </Provider>
    );
    const linkElement = screen.getByText(/Example Component/i);
    expect(linkElement).toBeInTheDocument();
  });
});

В этом примере стратегии тестирования мы используем платформы Jest и React Testing Library для написания модульного теста для компонента Example. Компонент заключен в провайдер Redux Provider, который предоставляет доступ к глобальному состоянию приложения. Функция render используется для рендеринга компонента и предоставления его для тестирования. screen - объект из библиотеки React Testing Library используется для поиска элемента с текстом Example Component. Наконец, функция expect используется для обеспечения того, чтобы элемент находился в документе.

Производительность

Производительность имеет решающее значение для обеспечения быстрого и отзывчивого взаимодействия с пользователем, особенно для более крупных и сложных приложений. Оптимизация производительности должна быть включена в вашу стратегию развития с самого начала. Для React и TypeScript доступно несколько методов оптимизации производительности, таких как отложенная загрузка (ленивая загрузка, lazy loading), разделение кода и мемоизация. При оптимизации производительности приложения TypeScript важно убедиться, что TypeScript используется эффективным и оптимизированным образом. Кроме того, следует проводить регулярное тестирование производительности и профилирование, чтобы убедиться, что оптимизация повышает производительность. Давайте подробнее рассмотрим пример метода оптимизации производительности для приложений React и TypeScript.

// LazyLoadedComponent.tsx

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

const LazyLoadedComponent = lazy(() => import('./LazyLoadedComponentImpl'));
function LazyLoadedComponentWrapper() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyLoadedComponent />
    </Suspense>
  );
}
export default LazyLoadedComponentWrapper;

В этом примере метода оптимизации производительности мы используем функцию React lazy для ленивой загрузки компонента. Функция lazy принимает функцию, которая возвращает динамический импорт, позволяя загружать компонент только при необходимости. Компонент Suspense используется для предоставления резервного пользовательского интерфейса во время загрузки компонента. Этот метод может помочь улучшить начальное время загрузки приложения за счет уменьшения объема кода, который необходимо загрузить и проанализировать.

Процесс разработки

Эффективный и оптимизированный процесс разработки может помочь вам писать лучший код быстрее и эффективнее. Такие инструменты, как webpack, Babel и ESLint, могут помочь оптимизировать процесс разработки, а системы управления версиями, такие как Git, могут помочь управлять кодом и эффективно взаимодействовать с вашей командой. Гибкие методологии разработки, такие как Scrum, могут помочь оптимизировать процесс разработки, способствовать сотрудничеству и общению, а также более эффективно предоставлять высококачественное программное обеспечение. Регулярные проверки кода и сеансы обмена знаниями также могут помочь поддерживать качество кода и гарантировать, что все члены команды будут в курсе последних разработок. Другим аспектом оптимизированного процесса разработки является автоматизация. Автоматизация повторяющихся задач, таких как построение и развертывание приложения, может помочь сэкономить время и уменьшить количество ошибок. Конвейеры непрерывной интеграции и непрерывной доставки (CI/CD) помогают автоматизировать процесс разработки, позволяя сосредоточиться на написании кода и предоставлении функций.

Давайте подробнее рассмотрим пример процесса разработки для приложения React и TypeScript.

// package.json
{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack -mode production",
    "test": "jest",
    "lint": "eslint src",
    "precommit": "lint-staged",
    "deploy": "npm run build && aws s3 sync dist s3://my-bucket -delete"
  },
  "devDependencies": {
    "webpack": "5.64.4",
    "webpack-cli": "4.9.1",
    "webpack-dev-server": "4.6.0",
    "babel-loader": "8.2.3",
    "@babel/core": "7.16.7",
    "@babel/preset-env": "7.16.8",
    "@babel/preset-react": "7.16.7",
    "@babel/preset-typescript": "7.16.7",
    "eslint": "8.6.0",
    "eslint-plugin-react": "7.29.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "jest": "27.4.3",
    "ts-jest": "27.0.5",
    "lint-staged": "12.2.4",
    "husky": "7.0.4"
  },
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-redux": "7.2.6",
    "react-router-dom": "6.2.1",
    "redux": "4.1.2",
    "axios": "0.24.0"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "git add"
    ]
  }
}

В этом примере процесса разработки мы используем webpack для объединения нашего кода и Babel для преобразования нашего кода TypeScript в JavaScript. Мы используем Jest для выполнения наших тестов и ESLint для линтинга нашего кода. Скрипт precommit использует lint-staged для запуска ESLint и форматирования нашего кода перед каждым коммитом. Наконец, скрипт deploy создает наше приложение и развертывает его в бакете AWS S3.

Специальные возможности и доступность (Accessibility)

Специальные возможности имеют решающее значение для обеспечения того, чтобы все пользователи, независимо от их возможностей, могли получить доступ к приложению и использовать его. Следует следовать рекомендациям и стандартам по специальным возможностям, таким как Руководство по доступности веб (WCAG), чтобы обеспечить доступность приложения для всех. При разработке приложений React и TypeScript специальные возможности должны быть включены в процесс разработки с самого начала. Такие инструменты, как axe-core, можно использовать для проверки проблем со специальными возможностями и обеспечения соответствия приложения рекомендациям по специальным возможностям. Кроме того, использование семантического HTML и предоставление альтернативного текста для изображений может помочь улучшить специальные возможности вашего приложения. Давайте подробнее рассмотрим пример метода специальных возможностей для приложения React и TypeScript.

// AccessibleButton.tsx

import React, { ButtonHTMLAttributes } from 'react';
interface AccessibleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  label: string;
}
function AccessibleButton({ label, ...rest }: AccessibleButtonProps) {
  return (
    <button aria-label={label} {...rest}>
      {label}
    </button>
  );
}
export default AccessibleButton;

В этом примере метода специальных возможностей мы используем атрибут aria-label для предоставления метки со специальными возможностями для кнопки. Компонент AccessibleButton принимает проп label и отображает кнопку с атрибутом aria-label. Такой подход гарантирует, что кнопка будет доступна всем пользователям, включая пользователей, использующих программы чтения с экрана.

Безопасность

Безопасность является еще одним важным аспектом продвинутой разработки React и TypeScript. Уязвимости безопасности могут иметь серьезные последствия, начиная от утечек данных и заканчивая простоями приложений. Существует несколько рекомендаций по безопасности, которые следует соблюдать при разработке приложений React и TypeScript, такие как методы безопасного кодирования, валидация ввода и использование HTTPS. При разработке приложений TypeScript важно убедиться, что ваш код написан с учетом безопасности. Распространенные уязвимости системы безопасности, такие как внедрение кода SQL и межсайтовые скрипты (XSS), можно предотвратить с помощью параметризованных запросов и санитизации пользовательского ввода. Кроме того, использование HTTPS может помочь обеспечить шифрование данных при передаче и предотвратить атаки типа man-in-the-middle.

Давайте подробнее рассмотрим пример техники безопасности для приложения React и TypeScript.

// SecureForm.tsx
import React, { useState } from 'react';
import axios from 'axios';

function SecureForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    try {
      await axios.post('/api/submit-form', { name, email });
      alert('Form submitted successfully!');
    } catch (error) {
      alert('Error submitting form. Please try again.');
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}
export default SecureForm;

В этом примере техники безопасности мы используем методы безопасного кодирования и проверки ввода для предотвращения уязвимостей безопасности. Функция handleSubmit очищает и проверяет введенные пользователем данные перед отправкой на сервер. Кроме того, форма отправляется с использованием безопасного протокола HTTPS, чтобы обеспечить шифрование данных при передаче.

Обслуживание и поддержка

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

// ExampleComponent.tsx

import React from 'react';
import PropTypes from 'prop-types';

interface ExampleComponentProps {
  text: string;
}
function ExampleComponent({ text }: ExampleComponentProps) {
  return <div>{text}</div>;
}
ExampleComponent.propTypes = {
  text: PropTypes.string.isRequired,
};
export default ExampleComponent;

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

Создание и поддержка продвинутых приложений React и TypeScript требует надежной стратегии. Хорошо продуманная архитектура, комплексное тестирование, оптимизация производительности, эффективный процесс разработки, доступность, безопасность и стратегия обслуживания — все это важные компоненты успешной стратегии развития. Следуя этим стратегиям, вы можете гарантировать, что ваше приложение является масштабируемым, обслуживаемым и эффективным, обеспечивая высококачественный пользовательский интерфейс для ваших пользователей. В дополнение к стратегиям, рассмотренным выше, существует множество других продвинутых методов и шаблонов React и TypeScript, которые могут помочь вам создавать лучшие приложения. Некоторые примеры этих методов включают компоненты высшего порядка, render props и контекст. Компоненты высшего порядка (HOC) являются популярным шаблоном в React, который может помочь вам повторно использовать и совместно использовать логику между компонентами. HOC — это функции, которые принимают компонент и возвращают новый компонент с дополнительной функциональностью. Например, можно использовать HOC для добавления проверки подлинности или авторизации компонента. renderProps — еще один популярный шаблон в React, который может помочь вам повторно использовать логику между компонентами. Render props — это функции, которые передаются компоненту в качестве пропса, позволяя компоненту отображать динамическое содержимое. Например, можно использовать рендер проп для рендеринга загружаемого спиннера во время извлечения данных. Контекст — это функциональность в React, которая позволяет передавать данные через дерево компонентов без необходимости вручную передавать проп на каждом уровне. Контекст может быть полезен для передачи данных, таких как тема или предпочитаемый язык, компонентам, которые находятся глубоко в дереве компонентов.

Давайте подробнее рассмотрим пример реализации каждого из этих передовых методов.

// withAuthentication.tsx
import React, { ComponentType } from 'react';

function withAuthentication<T>(WrappedComponent: ComponentType<T>) {
  return function WithAuthentication(props: T) {
    const isAuthenticated = true; // replace with actual authentication logic
    return isAuthenticated ? (
      <WrappedComponent {...props} />
    ) : (
      <div>You must be logged in to view this content.</div>
    );
  };
}
export default withAuthentication;

В этом примере реализации HOC мы используем функцию withAuthentication для добавления проверки подлинности к компоненту. Функция withAuthentication принимает компонент и возвращает новый компонент с дополнительной логикой проверки подлинности. Новый компонент отображает упакованный компонент, если пользователь прошел проверку подлинности, или сообщение о том, что пользователь должен войти в систему в противном случае.

// FetchData.tsx

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

interface FetchDataProps {
  url: string;
  render: (data: any) => React.ReactNode;
}
function FetchData({ url, render }: FetchDataProps) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  useEffect(() => {
    setIsLoading(true);
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setIsLoading(false);
      })
      .catch((error) => {
        setError(error);
        setIsLoading(false);
      });
  }, [url]);
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>{error.message}</div>;
  }
  return <>{render(data)}</>;
}
export default FetchData;

В этом примере реализации рендер пропса мы используем компонент FetchData для извлечения данных из API и их рендеринга с помощью рендер пропса. Компонент FetchData принимает url, который указывает конечную точку API для извлечения, и render prop который является функцией, которая принимает извлеченные данные и возвращает JSX для рендеринга.

// ThemeContext.tsx
import React from 'react';

export const ThemeContext = React.createContext('light');
export const ThemeProvider = ({ children }: { children: React.ReactNode }) => (
  <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
);

В этом примере реализации контекста мы используем ThemeContext для предоставления темы нашему приложению. ThemeContext создается с помощью функции createContext, которая создает новый объект контекста. Компонент ThemeProvider используется для предоставления ThemeContext нашему приложению. ThemeProvider принимает проп children, который представляет собой дерево компонентов, которое должно быть обернуто контекстом темы.

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

Redux: предсказуемый контейнер состояния для JavaScript приложений.
React Router: библиотека для маршрутизации в приложениях React.
Styled Components: библиотека для стилизации компонентов React с помощью CSS-in-JS.
Formik: библиотека для построения форм в React.
Storybook: инструмент для изолированного построения компонентов пользовательского интерфейса.

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

Итоги

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

Архитектура и состав компонентов
Комплексное тестирование
Оптимизация производительности
Эффективный процесс разработки
Доступность
Безопасность
Поддержка

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

Frontend React TypeScript

Все виды управления состоянием в React

8 дней назад·9 мин. на чтение

Управлять состоянием в React можно множеством способов. Вам может не понадобиться useState, Redux, TanStack Query или любая другая библиотека. Это зависит от типа состояния, которым вам нужно управлять.

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

Состояние в адресной строке

Самый простой вид состояния — это состояние в URL. Хранилище ключей и значений как часть URL: /search?query=abc. Состояние в URL идеально подходит для простых значений и хранения обновлений как части истории браузера. Примером может служить переключение между списком и элементом с помощью radio button.

export default function Page() {
  return (
    <div>
      <input
        name="view"
        type="radio"
        value="list"
      />
      <input
        name="view"
        type="radio"
        value="tiles"
      />
    </div>
  );
}

Сохранение фильтров и выбора в истории браузера позволяет пользователю отменить выбор, нажав кнопку «Назад» . onChange помещает ту же страницу с добавленными параметрами поиска в URL:

"use client";

import { usePathname, useRouter } from "next/navigation";

export default function Page() {
  const pathname = usePathname();
  const router = useRouter();

  // Нет нужды хранить значение в `useState`, а хранится в URL
  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const urlSearchParams = new URLSearchParams();
    urlSearchParams.set("view", event.target.value);
    router.push(`${pathname}?${urlSearchParams.toString()}`, { scroll: false });
  };

  return (
    <div>
      <input
        name="view"
        type="radio"
        value="list"
        onChange={onChange}
      />
      <input
        name="view"
        type="radio"
        value="tiles"
        onChange={onChange}
      />
    </div>
  );
}

При выборе опции URL-адрес обновляется с использованием ключа view (поле name инпута) и значения list или tiles. NextJS предоставляет хук useSearchParams для чтения параметров поиска из URL. Мы извлекаем ключ view и устанавливаем defaultChecked параметр каждого инпута:

"use client";

import { usePathname, useRouter, useSearchParams } from "next/navigation";

export default function Page() {
  const pathname = usePathname();
  const searchParams = useSearchParams(); // здесь
  const view = searchParams.get("view") ?? undefined; // здесь

  const router = useRouter();

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const urlSearchParams = new URLSearchParams(searchParams);
    urlSearchParams.set("view", event.target.value);
    router.push(`${pathname}?${urlSearchParams.toString()}`, { scroll: false });
  };

  return (
    <div>
      <input
        name="view"
        type="radio"
        value="list"
        // Применим значение по умолчанию из `URLSearchParams`
        defaultChecked={view === "list"}
        onChange={onChange}
      />
      <input
        name="view"
        type="radio"
        value="tiles"
        // Применим значение по умолчанию из `URLSearchParams`
        defaultChecked={view === "tiles"}
        onChange={onChange}
      />
    </div>
  );
}

Значение будет выбрано по умолчанию даже при перезагрузке страницы. Другой вариант с NextJS читать параметры поиска - читать их внутри серверных компонентов. Каждая страница имеет доступ к props, содержащим searchParams как Promise:

interface Props {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

export default async function Page(props: Props) {
  const searchParams = await props.searchParams; // здесь
  const view = searchParams.view ?? undefined; // здесь
  /// ...
}

Такие хуки, такие как useRouter или usePathname не доступны в серверных компонентов. Способом сохранения пропсов searchParams, и хуков в одном компоненте является новая функция use:

"use client"; // Можно не создавать отдельный компонент для клиентского кода

import { usePathname, useRouter } from "next/navigation";
import { use } from "react";

interface Props {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

// Не нужно создавать async серверный компонент
export default function Page(props: Props) {
  // Доступ к асинхронным `searchParams` с помощью новой функции `use` (React 19)
  const searchParams = use(props.searchParams);
  const view = searchParams.view ?? undefined;

  const pathname = usePathname();
  const router = useRouter();

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const urlSearchParams = new URLSearchParams();
    urlSearchParams.set("view", event.target.value);
    router.push(`${pathname}?${urlSearchParams.toString()}`, { scroll: false });
  };

  return (
    <div>
      <input
        name="view"
        type="radio"
        value="list"
        defaultChecked={view === "list"}
        onChange={onChange}
      />
      <input
        name="view"
        type="radio"
        value="tiles"
        defaultChecked={view === "tiles"}
        onChange={onChange}
      />
    </div>
  );
}

Во всех примерах обратите внимание, что инпут - неуправляемый компонент. Поскольку состояние хранится в URL, то нет необходимости в useState. Вот как реализовать то же самое с useState (управляемый компонент):

"use client";

import { useState } from "react";

export default function Page() {
  const [view, setView] = useState<string | undefined>(undefined);

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setView(event.target.value);
  };

  return (
    <div>
      <input
        name="view"
        type="radio"
        value="list"
        // `checked` вместо `defaultChecked` для управляемого компонента
        checked={view === "list"}
        onChange={onChange}
      />
      <input
        name="view"
        type="radio"
        value="tiles"
        // `checked` вместо `defaultChecked` для управляемого компонента
        checked={view === "tiles"}
        onChange={onChange}
      />
    </div>
  );
}

Состояние URL настолько распространено, что большинство React фреймворков включают специальную поддержку параметров поиска.

Состояние на стороне сервера

Состояние сервера относится к данным, которые управляются сервером, а не являются локальными для клиента. Обычно вы читаете данные при загрузке страницы. Данные не обновляются на клиенте, а перезагружаются после обновления (POST, PUT или DELETE). Поскольку эти данные считываются только один раз при загрузке страницы, вам не нужно делать запрос на чтение на клиенте. Вместо этого вы обычно предварительно загружаете данные и HTML на сервере. Вот для чего нужны серверные компоненты:

interface Post {
  title: string;
  body: string;
}

export default async function Page() {
  // Сервер загружает данные прямо в серверный компонент (React 19)
  const post = await fetch("https://jsonplaceholder.typicode.com/posts/1").then(
    (response) => response.json() as Promise<Post>
  );

  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.body}</p>
    </div>
  );
}

Серверный компонент помечен как async и fetch выполняется непосредственно внутри функции компонента. Клиент получает окончательный макет без необходимости делать еще один запрос к серверу. После обновления сервера (POST/ PUT/DELETE) вам необходимо вручную перезагрузить страницу, чтобы отобразить новые данные. Если вместо этого вы предпочитаете повторно проверять данные на клиенте, используйте такие решения, как TanStack Query. useQuery делает асинхронный запрос, когда страница загружается (на клиенте) и сохраняет ответ в кэше. Периодически делается новый запрос для повторной проверки данных:

"use client"; // Клиентский компонент

import { useQuery } from "@tanstack/react-query";

interface Post {
  title: string;
  body: string;
}

export default function Page() {
  const result = useQuery({
    queryKey: ["post"],
    queryFn: () =>
      fetch("https://jsonplaceholder.typicode.com/posts/1").then(
        (response) => response.json() as Promise<Post>
      ),
  });

  if (result.isPending) {
    return <div>Loading...</div>;
  } else if (result.isError) {
    return <div>Error: {result.error.message}</div>;
  }

  return (
    <div>
      <h2>{result.data.title}</h2>
      <p>{result.data.body}</p>
    </div>
  );
}

Вам необходимо проверить оба isPending и isError, чтобы убедиться, что data определена. Поскольку запрос выполняется на клиенте, при первой загрузке пользователь увидит состояние загрузки (isPending). Этого не происходит с серверными компонентами, поскольку страница загружена и готова к отправке клиенту.

Состояние внутри формы

Форма хранит данные ввода с целью отправки form запроса. React 19 представляет useActionState хук специально для запросов форм. useActionState сохраняет состояние запроса (обычно данные ответа) и заботится о состоянии ожидания.

export default function Page() {
  const [state, action, isPending] = useActionState(api, null);
  return (
    <form action={action}>
      <input type="text" name="email" autoComplete="email" />
      <input type="password" name="password" autoComplete="current-password" />
      <button type="submit" disabled={isPending}>
        Submit
      </button>
    </form>
  );
}

api реализует async запрос (или синхронный) путем извлечения значений из FormData (на основе name инпутов).

"use client";

import { useActionState } from "react";

type State = null; // основано на типе ответа

const api = async (
  previousState: State,
  formData: FormData
): Promise<State> => {
  const email = formData.get("email");
  const password = formData.get("password");
  console.log(email, password);
  await new Promise((resolve) => setTimeout(resolve, 2000));
  return null;
};

export default function Page() {
  const [state, action, isPending] = useActionState(api, null);
  return (
    <form action={action}>
      <input type="text" name="email" autoComplete="email" />
      <input type="password" name="password" autoComplete="current-password" />
      <button type="submit" disabled={isPending}>
        Submit
      </button>
    </form>
  );
}

Все инпуты неконтролируемые, их значения извлекаются из FormData. Нет необходимости в нескольких useState. При такой реализации запрос отправляется внутри клиента. Поэтому console.log будет выведен в консоль браузера.

Серверные действия

Если вы хотите выполнить действие внутри сервера, вы можете использовать серверные действия. Реализация та же самая, но api функция находится в отдельном файле, помеченном как "use server":

"use server";

type State = null;

export const api = async (
  previousState: State,
  formData: FormData
): Promise<State> => {
  const email = formData.get("email");
  const password = formData.get("password");
  console.log(email, password);
  await new Promise((resolve) => setTimeout(resolve, 2000));
  return null;
};

Компонент ссылается на api так же, как и раньше внутри useActionState:

"use client";

import { useActionState } from "react";
import { api } from "./api";

export default function Page() {
  const [state, action, isPending] = useActionState(api, null);
  return (
    <form action={action}>
      <input type="text" name="email" autoComplete="email" />
      <input type="password" name="password" autoComplete="current-password" />
      <button type="submit" disabled={isPending}>
        Submit
      </button>
    </form>
  );
}

При такой реализации api будет выполнено на сервере. Поэтому console.log печатает в логах сервера (в браузере ничего не печатается). При отправке формы на сервер отправляется POST-запрос. Параметры функции и метаданные отправляются как часть RPC-запроса для выполнения API на сервере. При отправке формы на сервер отправляется POST-запрос. Параметры функции и метаданные отправляются как часть RPC-запроса для выполнения API на сервере.

Мутации с TanStack Query

Другой вариант — использование мутаций из TanStack Query с useMutation хуком. useMutation принимает функцию для выполнения, как и useActionState. Невозможно напрямую использовать action формы. Вместо этого можно выполнить мутацию onSubmit: Вам необходимо вручную вызвать preventDefault, чтобы избежать перезагрузки страницы.

export default function Page() {
  const mutation = useMutation({
    mutationFn: api,
  });

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault(); // здесь
        mutation.mutate(new FormData(event.currentTarget));
      }}
    >
      <input type="text" name="email" autoComplete="email" />
      <input type="password" name="password" autoComplete="current-password" />
      <button type="submit" disabled={mutation.isPending}>
        Submit
      </button>
    </form>
  );
}

api то же самое, что и раньше. Он получает FormData и выполняет функцию на клиенте. Даже в этом случае состояние неконтролируемо и извлекается как FormData:

"use client";

import { useMutation } from "@tanstack/react-query";

const api = async (formData: FormData) => {
  const email = formData.get("email");
  const password = formData.get("password");
  console.log(email, password);
  await new Promise((resolve) => setTimeout(resolve, 2000));
};

export default function Page() {
  const mutation = useMutation({
    mutationFn: api,
  });

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        mutation.mutate(new FormData(event.currentTarget));
      }}
    >
      <input type="text" name="email" autoComplete="email" />
      <input type="password" name="password" autoComplete="current-password" />
      <button type="submit" disabled={mutation.isPending}>
        Submit
      </button>
    </form>
  );
}

Состояние на стороне клиента

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

Состояние URL для пар «ключ-значение» синхронизировано с URL (история браузера)
Состояние сервера для чтения данных при загрузке страницы
Состояние формы для отправки form запросов

Состояние клиента необходимо только для управления сложными взаимодействиями: множественными переменными, включая производные значения с множественными состояниями и шагами. Для этих сложных вариантов использования вам нужен способ контролировать мутации и избегать ненужных повторных рендеров. Тогда следует обратиться к библиотекам вроде XState, Zustand, Redux. В большинстве случаев вам может даже не понадобиться внешняя библиотека. Хуки вроде useReducer, useContext, и useState могут быть достаточны для большинства локальных и простых случаев использования.

Функция перехода состояния

Библиотека управления состоянием в основном отвечает за:

Хранение и предоставление доступа к состоянию
Обновление состояния (избегая чрезмерного повторного рендеринга)

Распространенный шаблон, ставший популярным благодаря Redux, состоит в функции перехода состояния. Это функция, которая принимает событие и текущее состояние и возвращает следующее состояние. Самая простая реализация этого шаблона - это useReducer:

"use client";

import { useReducer } from "react";

interface State {
  firstName: string;
  lastName: string;
}

type Event =
  | { type: "firstName.update"; value: string }
  | { type: "lastName.update"; value: string };

const reducer = (state: State, event: Event): State => {
  switch (event.type) {
    case "firstName.update":
      return { ...state, firstName: event.value };
    case "lastName.update":
      return { ...state, lastName: event.value };
  }
};

export default function Page() {
  const [state, dispatch] = useReducer(reducer, {
    firstName: "",
    lastName: "",
  });
  const fullName = `${state.firstName} ${state.lastName}`; // Производное состояние
  return (
    <form>
      <input
        type="text"
        name="firstName"
        value={state.firstName}
        onChange={(event) =>
          dispatch({ type: "firstName.update", value: event.target.value })
        }
      />
      <input
        type="text"
        name="lastName"
        value={state.lastName}
        onChange={(event) =>
          dispatch({ type: "lastName.update", value: event.target.value })
        }
      />

      <p>{fullName}</p>
      <button type="submit">Submit</button>
    </form>
  );
}

Такие библиотеки, как @xstate/store и Redux, основаны на этом же шаблоне.

Стэйт машины (конечные автоматы)

Для еще более сложных случаев состояния (объекта) и событий недостаточно. Конечные автоматы моделируют различные состояния явно (например, «открыто»/«закрыто»). Обновление состояния использует ту же событийно-управляемую логику функции редьюсера. Главное отличие в том, что определенные действия разрешены только внутри определенных состояний. Конечные машины можно визуализировать в виде диаграммы. Этот дополнительный уровень абстракции предотвращает непреднамеренные действия, когда они не разрешены в состоянии. Он дает больше контроля над состояниями приложения за счет более высокой сложности . Конечный автомат моделирует всю сложность вашего приложения, поэтому его часто считают более сложным для реализации и требующим больше кода. Стандартным решением для конечных автоматов в React является XState:

"use client";

import { useMachine } from "@xstate/react";
import { createMachine } from "xstate";

const machine = createMachine({
  types: {} as {
    events: { type: "OPEN" } | { type: "CLOSE" };
  },
  initial: "closed",
  states: {
    closed: {
      on: { OPEN: "open" },
    },
    open: {
      on: { CLOSE: "closed" },
    },
  },
});

export default function Page() {
  const [snapshot, send] = useMachine(machine);

  if (snapshot.matches("open")) {
    return (
      <div>
        <p>Open</p>
        <button onClick={() => send({ type: "CLOSE" })}>Close</button>
      </div>
    );
  }

  return (
    <div>
      <p>Closed</p>
      <button onClick={() => send({ type: "OPEN" })}>Open</button>
    </div>
  );
}

Диаграммы состояний

Диаграммы состояний расширяют базовую модель конечных автоматов для создания комплексного решения по управлению состоянием. Диаграммы состояний добавляют дополнительные функции, включая иерархию, параллелизм и коммуникацию. XState реализует модель диаграмм состояний (statecharts ). Он также позволяет нескольким statecharts взаимодействовать друг с другом в модели актора. Актор инкапсулирует логику определенной функциональности в вашем приложении. Модель актора позволяет отправлять сообщения между акторами как модель параллельных вычислений.

Библиотеки управления состоянием в React

Ниже представлен обширный список библиотек управления состоянием для более сложных требований состояние на стороне клиента:

@xstate/store
zustand
jotai
redux
Redux Toolkit
MobX
xstate
Valtio
MobX-State-Tree

Frontend React hooks React Redux