Рефакторинг запутанного компонента

В своем блоге Алекс Кондов рассказал, как бы он проводил рефакторинг запутанного компонента формы. Кратко, о чем он пишет:

- Написать тесты. Если еще тестов нет, то перед рефакторингом надо написать тесты для компонента. В тестах должна проверяться бизнес логика. Делается это для того, чтобы знать, что в процессе рефакторинга ничего не сломается.

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

- Удалить «мертвый» код. Нужно удалить лишние комментарии, неиспользуемые переменные. В этом как раз поможет линтер.

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

- Убрать большие условные рендеры. Если блоки похожи, то их можно объединить в один компонент. Если блоки различны, то лучше разделить их на два компонента и разделить логику между ними.

return !numberIncorrect ? (
    // A lot of JSX...
) : (
    // Even more JSX...
)

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

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

- Используйте для валидации форм декларативные схемы, например Zod, Yup.

- Не используйте inline стили.

https://alexkondov.com/refactoring-a-messy-react-component/

Создание стейт менеджера за 40 строк

Пример простого стейт менеджера для React, работающего через хук useSyncExternalStore.

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

useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

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

import { useSyncExternalStore } from 'react';

export type Listener = () => void;

function createStore<T>({ initialState }: { initialState: T }) {
  let subscribers: Listener[] = [];
  let state = initialState;

  const notifyStateChanged = () => {
    subscribers.forEach((fn) => fn());
  };

  return {
    subscribe(fn: Listener) {
      subscribers.push(fn);
      return () => {
        subscribers = subscribers.filter((listener) => listener !== fn);
      };
    },
    getSnapshot() {
      return state;
    },
    setState(newState: T) {
      state = newState;
      notifyStateChanged();
    },
  };
}

export function createUseStore<T>(initialState: T) {
  const store = createStore({ initialState });
  return () => [useSyncExternalStore(store.subscribe, store.getSnapshot), store.setState] as const;
}

export const useCountStore = createUseStore(0);

function Counter() {
  const [count, setCount] = useCountStore();

  const increment = () => {
    setCount(count + 1);
  };

  /* --snip-- */
}

Если хук useCountStore будет использоваться в нескольких компонентах, то его значение будет общим между всеми компонентами.

https://paripsky.github.io/blog/build-your-own-react-state-management/

Типобезопасный REST API вместе с Zod

При работе с REST API нельзя быть уверенным в том, что вернется в ответе запроса. Даже если используешь TypeScript и пишешь типы для ответа, то запрос все равно может вернуть другой ответ, в следствие чего может произойти runtime ошибка.

Если хотите быть уверенными в том, что возвращает REST API, то используйте валидацию ответа через Zod схемы. В этом случае, если ответ запроса не соответствует ожиданию, выбросится ошибка. Пример:

const FetchedDataSchema = z.object({
  id: z.number(),
  name: z.string(),
});

type FetchedData = z.infer<typeof FetchedDataSchema>;

function DataFetchingComponent() {
  const fetchData = async (): Promise<FetchedData> => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return FetchedDataSchema.parse(data);
  };

  /* --snip-- */
}

https://noahflk.com/blog/typesafe-rest-api

Обработка ошибок в React Server Components

В серверных компонентах React могут возникать ошибки. Для их обработки можно использовать ErrorBoundary из react-error-boundary, который поддерживает восстановление ошибки и повторную попытку рендеринга.

С помощью RSC и react-error-boundary можно реализовать повторный рендеринг. Пример компонента ErrorFallback, который выполняет повторный рендеринг по клику на кнопку:

'use client'

import { startTransition, useState } from 'react'
import { useRouter } from 'next/navigation'

export default function ErrorFallback({
  error,
  resetErrorBoundary,
}: {
  error: Error
  resetErrorBoundary: () => void
}) {
  const router = useRouter()

  // Стейт кнопки сброса
  const [isResetting, setIsResetting] = useState(false)

  function retry() {
    setIsResetting(true)

    startTransition(() => {
      router.refresh()
      resetErrorBoundary()
      setIsResetting(false)
    })
  }

  return (
    <button onClick={() => retry()}>
      {isResetting ? <Spinner /> : null}
      Retry
    </button>
  )
} 

Как видно из примера, используется router.refresh() для повторного рендера компонента, в котором произошла ошибка. На самом деле ре-рендерится вся страница, но пользователю кажется, что ре-рендерится только компонент с ошибкой. Т.к. router.refresh() долгая операция, которая не возвращает Promise, то для отслеживания выполнения она вызывается внутри startTransition.

https://edspencer.net/2024/7/16/errors-and-retry-with-react-server-components

Серверные функции в Tanstack Router

В Tanstack Router появилась возможность использовать серверные функции.

// getServerTime.ts
import { createServerFn } from '@tanstack/start'

export const getServerTime = createServerFn('GET', async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return new Date().toISOString()
})

// Time.tsx
import { useServerFn } from '@tanstack/start'
import { useQuery } from '@tanstack/react-query'
import { getServerTime } from './getServerTime'

export function Time() {
  const getTime = useServerFn(getServerTime)

  const timeQuery = useQuery({
    queryKey: 'time',
    queryFn: () => getTime(),
  })
}

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

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

https://tanstack.com/router/latest/docs/framework/react/start/server-functions

React и FormData

Для сбора данных формы можно использовать FormData – объект, который предоставляет геттеры и сеттеры для значений формы. Его можно использовать во время сабмита формы:

function onSubmit(event: React.FormEvent) {
  event.preventDefault()
  const formData = new FormData(event.target)

  const formValues = {
    name: formData.get('name')
    email: formData.get('email)
  }
}

Чтобы избавиться от геттеров, можно использовать Object.fromEntries для представления данных в виде объекта:

const formValues = Object.fromEntries(formData)
console.log(formValues) { name: 'my name', email: '[email protected]' }
typeof formValues // { [k: string]: FormDataEntryValue }

Если вы работаете с TypeScript, то при использовании FormData могут возникнуть проблемы с типизацией. Эти проблемы можно решить с помощью схемы Zod и парсинга данных:

const formValues = Object.fromEntries(formData) // ❌ TYPE: { [k: string]: FormDataEntryValue }

const results = myFormSchema.safeParse(formValues)
if (results.success) {
  results.data // ✅ TYPE: { email: string, quantity: number }
  console.log(results.data.email) // [email protected]
  console.log(results.data.quantity) // 5
} else {
  // Обработка ошибки
}

React 19 способствует использованию FormData и позволяет получать данные формы при сабмите через проп action:

function MyForm() {
  function formAction(formData: FormData) {
    // Получаем экземпляр formData вместо event
  }

  return <form action={formAction}>...</form>
}

https://reacttraining.com/blog/react-and-form-data

Замена кода на React на CSS :has псевдокласс

Через CSS можно стилизовать дочерние элементы на основании родительского элемента:

.content .card {
  background: #f0f0f0;
}

С помощью псевдокласса :has можно сделать наоборот, снизу вверх: стилизовать родительский элемент на основании дочернего элемента. Например, карточки, в которых есть изображение, имеют другой цвет границы:

.card:has(img) {
  border-top: 10px solid #fee6ec;
}

Псевдокласс :has поддерживается всеми основными браузерами, глобально 92% пользователей поддерживают его.

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

// Все карточки после карточки с фокусом на кнопку «открытия»
.card:has([data-action='open']:focus-visible) ~ .card,

// Все карточки перед карточкой с фокусом на кнопку «открытия»
.card:has(~ .card [data-action='open']:focus-visible) {
  filter: greyscale();
  background-color: #f6f7f6;
}

// Стиль карточки с фокусом на кнопку «открытия»
.card:has([data-action='open']:focus-visible) {
  transform: scale(1.02);
  border-top: 10px solid #c3dccf;
}

https://www.developerway.com/posts/replacing-react-with-css

Композиция компонентов в React

В своем блоге Доминик Дорфмайстер поделился, почему стоит предпочитать композицию компонентов и ранний возврат, а не условный рендеринг нескольких состояний. Рассмотрим пример «плохого» компонента:

function Layout(props: { children: ReactNode }) {
  return (
    <Card>
      <CardHeading>Welcome 👋</CardHeading>
      <CardContent>{props.children}</CardContent>
    </Card>
  )
}

export function ShoppingList() {
  const { data, isPending } = useQuery(/* ... */)

  return (
    <Layout>
      {data?.assignee ? <UserInfo {...data.assignee} /> : null}
      {isPending ? <Skeleton /> : null}
      {!data && !isPending ? <EmptyScreen /> : null}
      {data
        ? data.content.map((item) => (
            <ShoppingItem key={item.id} {...item} />
          ))
        : null}
    </Layout>
  )
}

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

export function ShoppingList() {
  const { data, isPending } = useQuery(/* ... */)

  if (isPending) {
    return (
      <Layout>
        <Skeleton />
      </Layout>
    )
  }

  if (!data) {
    return (
      <Layout>
        <EmptyScreen />
      </Layout>
    )
  }

  return (
    <Layout>
      {data.assignee ? <UserInfo {...data.assignee} /> : null}
      {data.content.map((item) => (
        <ShoppingItem key={item.id} {...item} />
      ))}
    </Layout>
  )
}

https://tkdodo.eu/blog/component-composition-is-great-btw

Контроль компонентов через URL

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

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

export default function Home() {
  let searchParams = useSearchParams();
  let search = searchParams.get('search') ?? '';
  
  /* ... */

  return (
    <>
      {/* ... */}
      
      <Input
        value={search}
        onChange={(e) => {
          let search = e.target.value;
          
          if (search) {
            router.push(`${pathname}?search=${search}`);
          } else { 
             router.push(pathname); 
          }
        }}
        placeholder="Find someone..."
      />
    </>
  );
}

https://buildui.com/posts/how-to-control-a-react-component-with-the-url

Негласные правила React хуков

При объявлении хука useEffect нужно указывать список зависимостей, массив переменных, которые используются внутри хука. Например:

const [x, setX] = useState(0);
useEffect(() => {
 console.log(x);
}, []);

В этом случае хук объявлен неправильно, переменная x не указана как зависимость. Однако, это правило не универсальное. Некоторые переменные являются стабильными, т.е. ссылка на них не меняется при ре-рендере, и их можно не указывать. Для того чтобы не ошибаться, нужно использовать плагин eslint-plugin-react-hooks. Например, какие переменные плагин считает стабильными:

const [state, setState] = useState() / React.useState()
                       // ^^^ стабильная ссылка
const [state, dispatch] = useReducer() / React.useReducer()
                      // ^^^ стабильная ссылка
const [state, dispatch] = useActionState() / React.useActionState()
                      // ^^^ стабильная ссылка
const ref = useRef()
      // ^^^ стабильная ссылка
const onStuff = useEffectEvent(() => {})
      // ^^^ стабильная ссылка
Остальные ссылки не стабильны

В своем блоге автор высказывает мнение, что есть недостаток в этом подходе. Если использовать хуки из сторонних библиотек, то возвращаемые в них переменные всегда нужно указывать в зависимостях эффекта. Это может быть setter useAtom из Jotai или вызов функции useMutation из tanstack-query. По идее эти переменные тоже стабильные, но их придется указывать в зависимостях, иначе будет ошибка плагина eslint-plugin-react-hooks.

https://macwright.com/2024/09/19/the-extra-rules-of-hooks

Оптимизация загрузки SPA с помощью предварительной загрузки чанков

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

Для решения проблемы водопада при открытии сайта можно вставлять небольшой скрипт в <head>, который будет мапить текущий адрес и чанк роута. Найденный чанк роута может подгружаться через link rel="preload”.

В своей статье автор поделился скриптом для предварительной загрузки чанка. Для реализации автор использовал сборщик Rsbuild. Для именования чанков можно использовать комментарий webpackChunkName. Это пригодится для мапинга пути и имени чанка:

const Home = lazy(
  () => import(/* webpackChunkName: "home" */ "./pages/home-page"),
);

export const routeChunkMapping = {
  "/": "home",
  "/home": "home"
};

https://mmazzarolo.com/blog/2024-08-13-async-chunk-preloading-on-load/

Environment API в Vite

В Vite 6 появится Environment API, которое позволит использовать Vite в разных окружениях. Это нужная фича для React. Например, это позволит для React с серверными компонентами создавать разный бандл для клиента, сервера и RSC – т.е. 3 разных бандла под каждое окружение.

Кроме этого, Environment API позволит запускать приложения не только на Node.js, но и в других средах выполнения, таких как Deno, Bun, Edge Runtime, а также создавать для этих сред выполнения бандл.

Новое API – это низкоуровневое API, которое предназначено для разработчиков библиотек, и не предполагается, что его будут использовать пользователи напрямую.

https://green.sapphi.red/blog/increasing-vites-potential-with-the-environment-api

Drag to Select

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

https://www.joshuawootonn.com/react-drag-to-select