Заметки про React

Фича флаги в Next.js

Для Next.js появилась библиотека @vercel/flags/next для работы с фича-флагами в коде. Пример объявления:

import { unstable_flag as flag } from "@vercel/flags/next";

export const showBanner = flag({
  key: "banner",
  decide: () => false,
});

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

import { showBanner } from "../flags";

export default async function Page() {
  const banner = await showBanner();
  return (
    <div>
      {banner ? <Banner /> : null}
      {/* other components */}
    </div>
  );
}

Библиотека не зависит от источника данных для фича-флагов, функция decide может быть асинхронной. Можно использовать как env переменные, так и делать запросы в провайдер данных для фича-флага:

export const showBanner = flag({
  key: "banner",
  async decide () {
    await featureFlagClient.init();
    return featureFlagClient.get(this.key);
  }
});​​​​​​​​​

https://vercel.com/blog/flags-as-code-in-next-js

DRY – источник плохих абстракций

В блоге Свижец Теллер вышла статья про принцип DRY. Самый худший и сложный для сопровождения код, который я видел или писал, был написан в погоне за DRY - Don't Repeat Yourself. Это один из первых принципов проектирования, который изучают разработчики и используют повсеместно.

⭐️ Бездумное использование принципа DRY приводит к созданию плохих абстракций в коде. Из-за чего код становится запутанным и сложно поддерживаемым.

Например, нужно показать навигационное меню:

// 1
const NavigationMenu = () => {
  return (
    <ul>
      <li>
        <a href="/about">
          <img src="question-icon.png" />
          About
        </a>
      </li>
      <li>
        <a href="/contact">
          <img src="person-icon.png" />
          Contact
        </a>
      </li>
      <li>
        <a href="/buy">
          <img src="cash-icon.png" />
          Buy
        </a>
      </li>
      // ...
    </ul>
  )
}

Если пойти в сторону принципа DRY, то можно написать функцию-фабрику создания пункта меню и использовать массив:

// 2
const NavigationMenu = () => {
  const items = [
    makeNavItem("/about", "question-icon.png", "About"),
    makeNavItem("/contact", "person-icon.png", "Contact"),
    makeNavItem("/buy", "cash-icon.png", "Buy"),
    // ...
  ]

  return (
    <ul>
      {items.map((item) => (
        <li>
          <a href={item.url}>
            <img src={item.icon} />
            {label}
          </a>
        </li>
      ))}
    </ul>
  )
}

Теперь добавление и удаление элементов меню стало проще, однако читать код стало тяжелее, т.к. приходится прыгать по строкам кода.

Представьте, что поступила задача – подсветить кнопку Buy красным цветом. Однако в текущем виде абстракция оптимизирована на отображение всех кнопок в одинаковом стиле. Можно попытаться добавить новые параметры в функцию-фабрику или попробовать переписать всю абстракцию. Но это усложнит код и будет проще вернуться к первому варианту кода.

https://swizec.com/blog/dry-the-common-source-of-bad-abstractions/

Получение данных с помощью Server Actions в Next.js

В своем блоге Робин Вирух показал опыт использования Server Actions для получения данных в Next.js. В документации Next.js рекомендуют использовать Route Handlers для создания API, например:

import { getPosts } from "@/data";

export async function GET() {
  const posts = await getPosts();
  return Response.json(posts);
}

"use client";

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

const fetchPosts = async () => {
  const response = await fetch("/api/posts");
  return await response.json();
};

const Page = () => {
  const { data, isLoading } = useQuery({
    queryKey: ["posts-route-handler"],
    queryFn: fetchPosts,
  });

  /* --snip-- */
}

У этого подхода есть свои минусы: функцию fetchPosts необходимо отдельно типизировать.

В документации Next.js написано, что Server Actions предназначены только для записи (мутация), а не для чтения (запроса) данных. Однако, возможность использовать Server Actions для чтения данных есть, пример:

"use client";

import { getPosts } from "@/data";
import { Posts } from "@/posts";
import { useQuery } from "@tanstack/react-query";

const fetchPosts = async () => {
  return await getPosts();
};

const Page = () => {
  const { data, isLoading } = useQuery({
    queryKey: ["posts-server-action"],
    queryFn: fetchPosts,
  });

  /* --snip-- */
}

Плюсы такого подхода:

🔴Есть возможность переиспользовать getPosts как в серверных компонентах, так и в клиентских компонентах.

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

https://www.robinwieruch.de/next-server-actions-fetch-data/

react-html

В React появился отдельный модуль react-html, из которого можно импортировать функцию рендера HTML renderToMarkup. Это преемник функции renderToStaticMarkup из react-dom.

Функцию renderToMarkup можно будет использовать как в React Native, так и с React Server Components. Эта функция рендерит HTML код, который не предназначен для гидратации. Функцию renderToMarkup можно использовать для генерации e-mail в Server Action:

import { renderToMarkup } from 'react-html';
import EmailTemplate from './my-email-template-component.js'

async function action(email, name) {
  "use server";
  // ... in your server, e.g. a Server Action...
  const htmlString = await renderToMarkup(<EmailTemplate name={name} />);
  // ... send e-mail using some e-mail provider
  await sendEmail({ to: email, contentType: 'text/html', body: htmlString });
} 

💬 https://github.com/facebook/react/pull/30105

https://github.com/facebook/react/tree/main/packages/react-html

Отличия React и React Native

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

В нативных приложениях нельзя использовать HTML теги, вместо них используются UI примитивы:

// Блок
<div></div> 
<View></View>

// Изображение
<img src="https://domain.com/static/my-image.png" />
<Image source={{ uri: "https://domain.com/static/my-image.png" }} />

// Текст
<p>Hello</p>
<Text>Hello</Text>

// Список
array.map(item => <span>>{item.name}</span>)

<FlatList
  data={posts}
  renderItem={({ item }) => (
    <Text>{item.name}</Text>
  )}
/>

В нативных приложениях нет глобальных стилей. Все стили инлайновые и передаются в элемент через тег style:

export function MyComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.greeting}>Set Reminder</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 24,
  },
  greeting: {
    fontSize: 24
  },
});

Также по умолчанию все элементы имеют стиль display: flex. Флексы работают немного иначе чем на вебе, например, flexDirection по умолчанию column (вместо row).

При начале работ на React Native новички допускают ошибки:

🔴 Использование array.map. Если нужно отрендерить список элементов, то вместо array.map нужно использовать FlatList, который умеет оптимально рендерить большие списки и поддерживает виртуализацию.

🔴Используют элемент Button из React Native. Этот элемент плохо стилизуется и не практичен. Вместо него используйте TouchableOpacity.

🔴Используют логические операторы AND (&&). Если случайно в них вернуть '', NaN или 0, то React Native не отрендерит их как текст. В этом случае произойдет крах приложения.

https://expo.dev/blog/from-web-to-native-with-react

Изучите Suspense создавая хук useFetch

В своем блоге Слава Князев поэтапно создал хук useFetch для демонстрации того, как работает Suspense. Также автор показал, как сделать кэширование запросов, чтобы избежать частых запросов и рассинхрона данных.

В результате получился хук, который работает с Suspense и ErrorBoundary: если запрос находится в статусе pending, то покажется fallback Suspense, а если в запросе произойдет ошибка, то покажется fallback ErrorBoundary.

const useFetch = (url) => {
  const { fetchUrl } = useContext(fetchCacheContext)
  const promise = fetchUrl(url)
  const state = readPromiseState(promise)

  // Throw pending promise
  const isPending = state.status === "pending"
  if (isPending) throw promise

  // Throw rejection reason
  const error = state.reason
  if (error) throw error

  const data = state.value

  // Allow refreshing data
  const reload = () => fetchUrl(url, true)

  // Only return data now
  return [data, reload]
}

https://www.bbss.dev/posts/react-learn-suspense/

Скрытые утечки памяти в React: как компилятор не спасет вас

Кевин Шинер недавно писал про useCallback и утечки памяти. Если кратко, то там было написано о том, что замыкания захватывают переменные из внешней области видимости, в React компонентах это означает захват пропсов, стейта или мемоизированных значений. Утечка памяти происходила, когда попеременно вызывался мемоизированный колбек, бесконечно создавая новую область видимости с ссылкой на старую.

Если запустить пример из предыдущей статьи после React Compiler, то утечки памяти не будет. Однако, React Compiler не спасет вас от утечки памяти. Автор изменил пример, чтобы добиться утечки памяти с использованием React Compiler:

export const App = () => {
  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);
  const bigData = new BigObject(`${countA}/${countB}`); // 10MB of data

  // --snip--
};

Теперь при каждом изменении стейта будет создаваться новый объект bigData. Утечка памяти будет происходить все так же при попеременном вызове мемоизированных колбеков. Как скомпилируется новый пример:

const App = () => {
  const $ = compilerRuntimeExports.c(24);
  const [countA, setCountA] = reactExports.useState(0);
  const [countB, setCountB] = reactExports.useState(0);
  const t0 = `${countA}/${countB}`;
  let t1;
  if ($[0] !== t0) {
    t1 = new BigObject(t0);
    $[0] = t0;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  const bigData = t1;
  // ...
};

Чтобы предотвратить утечку памяти можно отказаться от мемоизации колбеков. Однако с React Compiler это сделать не получится.

https://schiener.io/2024-07-07/react-closures-compiler

5 заблуждений о React Server Components

В React 19 представили большое архитектурное изменение: разделение на серверные и клиентские компоненты. Серверные компоненты выполняются только на сервере, и их код не попадает в клиентский бандл. Клиентские компоненты – обычные компоненты React, к которым уже все привыкли. Эта новая архитектура направлена на использование сильных сторон как на сервере, так и на клиенте.

Возможно, некоторые поняли новую концепцию серверных компонентов неправильно и вот некоторые заблуждения о них:

- Предпочитайте только серверные компоненты, а клиентские используйте редко. Это не так, потому что серверные компоненты не подходят для всех сценариев, особенно которые требуют интерактивности. Серверные компоненты – это новый тип компонентов, которые выполняются только на сервере, получают данные и рендерят их на сервере для повышения производительности.

async function UserProfile({ userId }) {
  const response = await db.query('SELECT * FROM users WHERE id = ?', [userId]);
  const user = response.user;
 
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

- use client помечает клиентские компоненты, а use server помечает серверные компоненты. На самом деле директива use client помечает клиентские компоненты. Но директива use server не нужна, все компоненты по умолчанию являются серверными.

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

- Серверные компоненты не могут быть вложены в клиентские компоненты. Напрямую импортировать серверный компонент в клиентский нельзя. Но использовать серверный компонент внутри клиентского можно через проп, например, children:

// ServerComponent.js
function ServerComponent() {
  return <h1>Hello from the server</h1>;
}

// ClientComponent.js
'use client'
function ClientComponent({ children }) {
  return (
    <div>
      <p>This is a client component</p>
      {children}
    </div>
  );
}

// Usage
function App() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  );
}

https://www.builder.io/blog/nextjs-react-server-components

Ленивое обнаружение роутов в React Router

В новой минорной версии React Router 6.24 появилась возможность ленивого обнаружения роутов. С помощью метода unstable_patchRoutesOnMiss можно загружать дополнительные роуты и реализовывать разделение кода для ваших роутов вместо того, чтобы хранить их все в одном монолитном модуле. Эта фича пригодится для приложений с тысячами роутов, которые теперь не надо будет загружать заранее, задерживая гидратацию.

const router = createBrowserRouter(
  [
    {
      id: "root",
      path: "/",
      Component: RootComponent,
    },
  ],
  {
    async unstable_patchRoutesOnMiss({ path, patch }) {
      if (path === "/a") {
        // Загрузка `a` роута (`{ path: 'a', Component: A }`)
        let route = await getARoute();
        // Установка `a` роута как новый дочерний роут у `root` 
        patch("root", [route]);
      }
    },
  }
);

https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v6240

Релиз TypeScript 5.5

Вышел релиз новой версии TypeScript. Список основных изменений:

- Предикаты выводимых типов (Inferred Type Predicates). Одно из главных изменений, которое многим упростит написание кода. Теперь TS сам выводит типы для предикатов-функций, сужая (narrowing) возвращаемый тип. Пример:

// function isBirdReal(bird: Bird | undefined): bird is Bird
function isBirdReal(bird: Bird | undefined) {
  return bird !== undefined;
}

Это будет работать для метода массива filter. Если раньше TS не определял тип у элемента массива после фильтрации, то теперь будет. Пример:

function makeBirdCalls(countries: string[]) {
  // birds: Bird[]
  const birds = countries
    .map(country => nationalBirds.get(country))
    .filter(bird => bird !== undefined);

  for (const bird of birds) {
    bird.sing();  // ok!
  }
}

- Сужение типа для констант. TS теперь может сужать типы для выражений obj[key], где obj и key константы. Пример:

function f1(obj: Record<string, unknown>, key: string) {
    if (typeof obj[key] === "string") {
        // Сейчас работает, ранее была ошибка
        obj[key].toUpperCase();
    }
}

- Поддержка новых ECMAScript методов для Set. Появилась поддержка новых методов для Set: union, intersection, difference, symmetricDifference, isSubsetOf, isSupersetOf, isDisjointFrom. Пример:

let fruits = new Set(["apples", "bananas", "pears", "oranges"]);
let oranges = new Set(["oranges"]);

// Set(4) {'apples', 'bananas', 'pears', 'oranges'}
console.log(fruits.union(oranges));

https://devblogs.microsoft.com/typescript/announcing-typescript-5-5/

Как работает React Compiler

Автор объясняет, как работает компилятор React начиная с самых основ (транспилятор, AST, мемоизация), а затем анализирует результат компилятора на конкретном примере:

function List(t0) {
  const $ = _c(6);

  const { items } = t0;
  
  /* --snip-- */

  let t2;

  if ($[1] !== items) {
    const pItems = processItems(items);
    let t3;

    if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
      t3 = (item) => <li>{item}</li>;

      $[3] = t3;
    } else {
      t3 = $[3];
    }

    t2 = pItems.map(t3);
    $[1] = items;
    $[2] = t2;
  } else {
    t2 = $[2];
  }

  /* --snip-- */
}

Функция _c (сокращенно от cache) создает массив длинной 6. Компилятор React проанализировал функцию Link и понял, что для максимизации производительности надо хранить 6 элементов. Когда функция Link вызовется впервые, то результат каждой операции сохранится в одном из шести элементов массива $.

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

https://tonyalicea.dev/blog/understanding-react-compiler/

Suspense и React 19 RC

В React 19 RC появилось спорное изменение в работе Suspense.

В 18 версии внутри Suspense рендерелись все компоненты и отображался fallback, пока внутри компонентов происходила загрузка данных. После окончания загрузки данных во всех компонентах вместо fallback отображались сами компоненты.

export default function App() {
  return (
    <Suspense fallback={<p>...</p>}>
      <Header />
      <Navbar />
      <main>
        <Content />
      </main>
      <Footer />
    </Suspense>
  )
}

В React 19 RC изменилось поведение Suspense. Если компонент приостановится, то его соседние компоненты не будут отрендерены до тех пор, пока компонент не закончит загрузку данных. Это привело к тому, что вместо параллельной загрузки данных во всех компонентах, он начал делать последовательную загрузку данных, создавая «водопад» запросов.

У этого решения есть и положительный эффект: есть возможность сразу показывать fallback, избегая лишнего рендера.

Для решения проблемы «водопада» запросов нужно делать предварительные запросы на уровне роута:

export const Route = createFileRoute('/')({
  loader: ({ context: { queryClient } }) => {
    queryClient.ensureQueryData(repoOptions('tanstack/query'))
    queryClient.ensureQueryData(repoOptions('tanstack/table'))
  },
  component: () => (
    <Suspense fallback={<p>...</p>}>
      <RepoData name="tanstack/query" />
      <RepoData name="tanstack/table" />
    </Suspense>
  ),
})

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

Скорее всего поведение Suspense еще изменится перед релизом React 19, т.к. не всех устраивает текущее поведение. Например, библиотека react-three-fiber основана на асинхронной работе и полагается на то, как работает Suspense в React 18.

https://tkdodo.eu/blog/react-19-and-suspense-a-drama-in-3-acts

Чеклист безопасности в Next.js

Описание подходов, которые используются в SDK Arcjet для повышения безопасности Next.js. Хорошая безопасность обеспечивается за счет многоуровневого подхода - ничто не может быть защищено на 100%, но есть несколько простых вещей, которые каждый может сделать для снижения риска.

- Контроль зависимостей. Поддерживайте ваши зависимости в актуальном состоянии. Используйте package-lock.json, чтобы гарантированно устанавливать одинаковую версию. Периодически проводите аудит безопасности ваших зависимостей.

- Валидация и санитизация данных. Экранирование и санитизация React помогает предотвратить XSS атаки, но это не покрывает все потребности. Используйте схему для валидации данных, пришедших от пользователя. Например, для создания схемы можно использовать Zod:

export const insertTeamSchema = createInsertSchema(teams, {
  name: (schema) =>
    schema.name
      .min(2, { message: "Must be 2 or more characters." })
      .max(100, { message: "Must be 100 or fewer characters." })
      .trim(),
});

- Переменные окружения. Next.js автоматически загружает переменные окружения на сервер. Если хотите, чтобы переменная стала доступна на клиенте, то у нее должен быть префикс NEXT_PUBLIC_. Однако будьте осторожны: любое значение, которое вы раскрываете таким образом, становится публичным.

- Избегайте раскрытия кода. Чтобы избежать передачи серверного кода на клиент, используйте библиотеку server-only. Импортируйте ее в начале файла серверного компонента. Если клиентский компонент попытается использовать серверный компонент, то сборка упадет.

- Заголовки безопасности. При отдаче страницы сервером выставляйте заголовки безопасности. Они могут предотвратить распространенные веб-атаки. Основные заголовки, которые следует использовать: Content Security Policy (CSP), Strict-Transport-Security (HSTS), X-Content-Type-Options, Permissions-Policy, Referrer-Policy.

https://blog.arcjet.com/next-js-security-checklist/

Создание переиспользуемой SubmitButton

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

export default function SubmitButton({
  children,
  loading,
  disabled,
  ...otherProps
}: Props & React.HTMLProps<HTMLButtonElement>) {
  const { pending } = useFormStatus();
  const isSubmitting = pending || loading;

  return (
    <Button
      {...otherProps}
      disabled={isSubmitting || disabled}
      type="submit"
    >
      {isSubmitting ? (
         // progress
      ) : (
        children
      )}
    </Button>
  );
}

В своей статье автор привел пример использования этой кнопки в React 19 с серверными функциями. Такой пример будет работать, даже когда JavaScript выключен или когда кнопка еще не гидратировала:

export default function Component({ contactId }: { contactId: string }) {
  return (
    <form action={deleteRecord}>
      <input type="hidden" name="contactId" value={contactId} />
      <SubmitButton>Delete</SubmitButton>
    </form>
  );
}

https://aurorascharff.no/posts/creating-a-reusable-submitbutton-with-useformstatus

Вам все еще нужен Framer Motion?

Мэтт Перри, автор библиотеки Framer Motion, в своем блоге поделился о новых фичах в CSS. Благодаря этим фичам возможно вам больше не понадобится библиотека Framer Motion.
Автор сравнил популярные виды анимаций в Framer Motion и как их можно реализовать через CSS:

- Вводная анимация. Чтобы сделать анимацию при появлении элемента в документе или при загрузке страницы, можно использовать CSS правило @starting-style. Это правило определяет первоначальные стили, из которых элемент будет анимироваться:

#my-element {
  opacity: 1;
  transition: opacity 0.5s;

  @starting-style {
    opacity: 0;
  }
}

- Независимая трансформация. Появятся свойства translate, scale и rotate для независимой трансформации элемента.

button {
  translate: 0px 0px;
  transition:
    translate 0.2s ease-out,
    scale 0.5s ease-in-out;
}

button:hover {
  scale: 1.2;
} 

- Spring анимация. Для создания spring анимации можно использовать CSS функцию linear(). Функция принимает серию точек и линейно интерполирует между ними. Чтобы не писать серию точек вручную, используйте онлайн генераторы функции linear().

- Анимация по скроллу. В CSS появились две timeline анимации scroll() и view(). Их можно назначить в свойство animation-timeline для управления анимацией посредством скролла, а не времени:

div {
  animation-name: fadeAnimation;
  animation-timeline: scroll();
}

- Бонус, анимация высоты. В CSS нет возможности анимировать в/из auto, но CSS5 функция calc-size позволит это сделать:

li {
  height: 0px;
  transition: height 0.3s ease-out;
  
  .open {
    height: calc-size(auto);
  }
}

https://motion.dev/blog/do-you-still-need-framer-motion

Использование React Compiler на реальном проекте

В своем блоге Надя Макаревич рассказала об опыте использования React Compiler на нескольких реальных больших проектах.

При тестировании на небольших примерах React Compiler справляется хорошо, может мемоизировать разные сценарии:

- мемоизация компонента без пропсов;
- мемоизирует пропсы для компонента через useCallback, useMemo;
- мемоизирует дочерний компонент через useMemo;

const VerySlowComponentMemo = React.memo(VerySlowComponent);

export const SimpleCase3 = () => {
  const [isOpen, setIsOpen] = useState(false);

  // мемоизация дочернего компонента через useMemo
  const child = useMemo(() => <SomeOtherComponent />, []);

  return (
    <>
      ...
      <VerySlowComponentMemo>{child}</VerySlowComponentMemo>
    </>
  );
};

Однако реальные проекты гораздо сложнее чем эти примеры и в них больше разных сценариев. При установке React Compiler на три разных проекта компилятор в каждом из проектов исправил только 2 из 10 проблемных рендера.

Чтобы исправить остальные проблемные рендеры, пришлось вручную исправлять код компонентов. Например:

- деструктуризировать mutate из useMutation и использовать его в коде напрямую;
- выделить часть кода в отдельный компонент;
- в цикле изменить key с index на name.

https://www.developerway.com/posts/i-tried-react-compiler

Restyle

Новая CSS-in-JS библиотека, совместимая с RSC, которая использует новую фичу поднятия стилей и дедупликацию React 19.

Пример использования через функцию CSS, которая возвращает имена классов и тег <styles>:

import { css } from "restyle";

export default function BasicUsage() {
  const [classNames, styles] = css({
    padding: "1rem",
    backgroundColor: "peachpuff",
  });

  return (
    <>
      <div className={classNames}>Hello World</div>
      {styles}
    </>
  );
}

В React 19 тег <styles>, размещенный внутри компонента, в некоторых случаях будет перемещен внутрь тега <head>. Также React дедуплицирует одинаковые стили.

https://www.restyle.dev/

useCallback и утечки памяти

В своем блоге Кевин Шинер поделился об опыте поиска утечек памяти при использовании useCallback. Рассмотрим пример:

import { useState, useCallback } from "react";

class BigObject {
  public readonly data = new Uint8Array(1024 * 1024 * 10);
}

export const App = () => {
  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);
  const bigData = new BigObject(); // 10MB of data

  const handleClickA = useCallback(() => {
    setCountA(countA + 1);
  }, [countA]);

  const handleClickB = useCallback(() => {
    setCountB(countB + 1);
  }, [countB]);

  // …
};

Если попеременно вызывать handleClickA и handleClickB, то произойдет бесконечная утечка памяти. Например, при вызове функции handleClickA будет заново создан колбек только для handleClickA, т.к. поменялся countA. Для handleClickB останется старый колбек с текущей областью видимости. Новая область видимости будет хранить ссылку на новый колбек handleClickA и старый колбек handleClickB, внутри которых старая область видимости компонента.

Основная проблема связана с тем, что в одном компоненте разные useCallback могут ссылаться друг на друга и на другие данные через замыкания. Эти замыкания сохраняются в памяти до тех пор, пока useCallback не будет создан заново. Поэтому наличие в компоненте более одного useCallback затрудняет понимание того, что хранится в памяти.

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

- Пишите небольшие компоненты и используйте кастомные хуки.
- Избегайте захвата других замыканий. Это может произойти, если вы вызываете из одного useCallback другой useCallback.
- Избегайте мемоизации, когда в этом нет необходимости.
- Используйте useRef для хранения больших объектов.

https://schiener.io/2024-03-03/react-closures

Автоматическая инвалидация запросов в React Query

Reacy Query позволяет инвалидировать запросы в ручном режиме queryClient.invalidateQueries({ queryKey: ['todos'] }). В библиотеке не добавляли встроенные способы автоматической инвалидации по причине того, что это ухудшает гибкость. Ведь в разных ситуациях может потребоваться разная инвалидация: во время onSuccess или onSettled, должна ли мутация ждать инвалидацию. Ожидание инвалидации приводит к тому, что мутация остается в состоянии ожидания pending = true.

Доминик Дорфмайстер в своем блоге показал несколько способов как сделать автоматическую инвалидацию запросов. Инвалидацию можно делать в глобальном обработчике onSuccess кэша. Пример использования поля meta, в котором можно указать список полей для инвалидации:

import { matchQuery } from '@tanstack/react-query'

const queryClient = new QueryClient({
  mutationCache: new MutationCache({
    onSuccess: (_data, _variables, _context, mutation) => {
      queryClient.invalidateQueries({
        predicate: (query) =>
          // invalidate all matching tags at once
          // or everything if no meta is provided
          mutation.meta?.invalidates?.some((queryKey) =>
            matchQuery({ queryKey }, query)
          ) ?? true,
      })
    },
  }),
})

// usage:
useMutation({
  mutationFn: updateLabel,
  meta: {
    invalidates: [['issues'], ['labels']],
  },
})

https://tkdodo.eu/blog/automatic-query-invalidation-after-mutations

Влияние Styled Components на время ответа SSR

В своем блоге Эндрю Левин написал статью о результатах измерения перфоманса SSR приложения со Styled Components. Styled Components замедляет работу SSR приложения, но насколько – нужно было измерить. Для того чтобы сделать замеры автор использовал неминифицированную копию Styled Components и собрал трассировку CPU во время рендера SSR приложения.

В результате, на рендер дерева компонентов ушло 250мс, из которых 117мс потрачено на генерацию и внедрение Styled Components. Таким образом, ~47% времени SSR было потрачено на Styled Components.

https://blog.levineandrew.com/quantifying-the-impact-of-styled-components-on-server-response-times