Хитрости React: быстро, удобно и весело

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

- Используйте React.cloneElement для композиций. Если нет доступа к элементу, но нужно изменить его пропсы, то можно использовать клонирование элемента:

cloneElement(<img />, { src: "keyboard-cat.webp" }) 
// <img src="keyboard-cat.webp" />

Также с помощью клонирования можно установить свой реф и получить доступ к DOM элементу.

- Улучшайте производительность. По умолчанию компоненты в React не являются «чистыми». Используйте React.memo, чтобы предотвратить лишние ре-рендеры, и useMemo, useCallback для мемоизации пропсов.

- Используйте useSyncExternalStore для подписки на изменения внешнего состояния. Из-за конкурентного рендеринга разные части приложения могут не соответствовать глобальному состоянию. Если вы используете внешнее состояние напрямую, то могут возникнуть нежелательные сбои, поэтому используйте хук useSyncExternalStore. Например, в Wouter хуки useBrowserLocation, useHashLocation, useSearch используют useSyncExternalStore.

https://molefrog.com/notes/react-tricks

Оптимизация производительности в React

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

- Узкое место в приложении может замедлить работу всей системы, и, чтобы найти его, есть несколько инструментов: React Developer Tools, Chrome DevTools -> вкладка Performance, React Profiler API.

- Один из вариантов ускорения работы медленного компонента – мемоизация React.memo.

- Обращайте внимание на локальный стейт компонента. Минимизация изменения стейта предотвращает от лишних ре-рендеров. Убедитесь, что обновление стейта происходит только по необходимости.

- Используйте ленивую загрузку и разделение кода. Это ускорит загрузку сайта. Например, если только на одной странице используется большая библиотека, то не надо грузить код библиотеки в общий бандл, можно разделить код по страницам.

- Используйте виртуализацию для больших списков. Это сократит потребление памяти браузера.

https://www.sitepoint.com/react-performance-optimization/

Легкий способ исправить ошибки гидратации – React Hydration Overlay

В блоге Builder.io рассказали про библиотеку React Hydration Overlay, которая помогает исправить ошибки гидратации. Это библиотека пока что работает только для Next.js.

Сейчас в Next.js при возникновении ошибки гидратации появляется не очень информативное сообщение, в котором не совсем понятно в каком месте не совпадают элементы на клиенте и в SSR. Библиотека более точно показывает в каком месте есть несовпадение.

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

https://www.builder.io/blog/announcing-react-hydration-overlay

Релиз React Aria 1.0

React Aria – библиотека компонентов от Adobe, более 40 компонентов, поддерживающих доступность и интернационализацию, а также кастомизацию стилей.

React Aria поддерживает доступный drag and drop, управление клавиатурой, встроенная валидация формы, изменение размеров колонок таблиц и многое другое.

Компоненты оптимизированы для взаимодействия на разных устройствах и поддерживают мышь, сенсорный экран, клавиатура и screen reader.

Компоненты в React Aria декомпозированы, поэтому можно самому настраивать нужный вид и компоновать их:

<ComboBox>
  <Label>Permissions</Label>
  <Group>
    <Input />
    <Button>▼</Button>
  </Group>
  <Popover>
    <ListBox>
      <ListBoxItem>Read Only</ListBoxItem>
      <ListBoxItem>Edit</ListBoxItem>
      <ListBoxItem>Admin</ListBoxItem>
    </ListBox>
  </Popover>
</ComboBox>

https://react-spectrum.adobe.com/react-aria/index.html

Конкурентный React, внешний стор и «разрыв» стейта

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

«Разрыв» стейта возникает, когда два и более компонентов рендерят разный UI от одного и того же источника данных.

Библиотеки, использующие внешний стор, дают пользователю точечную реактивность для предотвращения лишних ререндеров, но не поддерживают конкурентный рендеринг, чтобы избежать «разрыва» состояния.

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

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

Для решения проблемы «разрыва» стейта при доступе к внешнему стору можно использовать хук useSyncExternalStore. С помощью него можно получить доступ к внешнему стейту и использовать конкурентный рендеринг.

https://interbolt.org/blog/react-ui-tearing/

Puck: self-hosted drag-and-drop редактор лендинга на React

Puck - это модульный, с открытым исходным кодом, визуальный редактор лендинга на React. Аналог Tilda, компоненты которого можно настроить под себя и опубликовать на своем сервере без вендор-лока. Т.к. это React, то можно использовать Next.js для рендера на сервере.

Можно самостоятельно настроить вид компонентов, список полей и их тип. Пример:

const config = {
  components: {
    HeadingBlock: {
      fields: {
        noscript: {
          type: "text",
        },
      },
      defaultProps: {
        noscript: "Hello, world",
      },
      render: ({ noscript }) => {
        return <h1>{noscript}</h1>;
      },
    },
  },
};

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

// Данные по умолчанию
const initialData = {
  content: [],
  root: {},
};
 
// Измененные данные в виде JSON
const save = (data) => {};
 
// Рендер редактора
export function Editor() {
  return <Puck config={config} data={initialData} onPublish={save} />;
}

Для рендера страницы надо передать конфиг компонентов и данные:

export function Page() {
  return <Render config={config} data={data} />;
}

https://puckeditor.com/

Серверные компоненты React: хороший, плохой и уродливый

Обзор серверных компонентов React: что кажется удобным и хорошим, а что не очень.
С помощью серверных компонентов можно получать данные и рендерить UI на сервере:

export default async function Page() {
  const stuff = await fetch(/* … */);
  return <div>{stuff}</div>;
}

Еще удобно сразу обрабатывать данные формы:

<form
 action={async (formData) => {
 "use server";
 const email = formData.get("email");
 await db.emails.insert({ email });
 }}
>
 <label htmlFor="email">Email</label>
 <input id="email" name="email" type="email" />
 <button>Send me spam</button>
</form>

Из-за прогрессивного улучшения эта форма будет работать даже если JS будет выключен. Однако, если потребуется дополнительно показывать состояние загрузки формы или ошибки отправки формы, то код усложнится: придется добавить хуки useFormState и useFormStatus. Пример:

"use client";
const [formState, formAction] = useFormState(saveEmailAction);

<form action={formAction}>
 <!-- snip -->
</form>

Такой подход уже не так удобен, т.к. близкий код уже не располагается рядом.

Еще одним минусом серверных компонент стал манки-патчинг fetch API в Next.js:
- по умолчанию все запросы кэшируются.
- нет доступа к объекту Request вне мидлвара.

Также, с серверными компонентами вырос размер JS бандла. В Next.js 12 базовый бандл весил ~70КБ, сейчас Next.js 14 весит 85-90КБ в сжатом виде. Не в сжатом виде, бандл весит 300КБ.

https://www.mayank.co/blog/react-server-components

Углубленный взгляд на ReactDOM.flushSync и для чего он нужен

flushSync – простое API чтобы заставить React выполнить всю ожидающую работу и синхронно обновить DOM. Ожидающая работа – изменение стейта в компонентах.

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

function Demo() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    flushSync(() => {
      setCount((c) => c + 1);
    });
    flushSync(() => {
      setFlag((f) => !f);
    });
  }

  {/* --snip-- */}
}

При вызове колбека handleClick, каждое выполнение flushSync заставить React перерендерить компонент и синхронно обновить DOM, вместо одного раза в конце колбека.

Также, flushSync используют, когда после изменения стейта нужно сразу обратиться в DOM, например для измерения DOM узла. Еще пример использования – скролл к элементу сразу после обновления стейта.

https://julesblom.com/writing/flushsync

Селектор контекста через React.use и React.useMemo

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

Для оптимизации контекста можно использовать библиотеку use-context-selector. Библиотека предоставляет селектор для контекста и ограничивает ререндеры компонента только на изменение выбранных в селекторе значений. Пример:

import { createContext, useContextSelector } from 'use-context-selector';

const context = createContext(null);

const Counter1 = () => {
  const count1 = useContextSelector(context, v => v[0].count1);
  const setState = useContextSelector(context, v => v[1]);
  const increment = () => setState(s => ({
    ...s,
    count1: s.count1 + 1,
  }));

  {/* --snip-- */}
};

const StateProvider = ({ children }) => (
  <context.Provider value={useState({ count1: 0, count2: 0 })}>
    {children}
  </context.Provider>
);

Если библиотека use-context-selector не подходит, то скоро появится возможность оптимизировать контекст через useMemo и функцию use. Пример:

import { createContext, useMemo, use } from 'react';

const MyContext = createContext({
    foo: '',
    bar: 0,
});

const useFoo = () => {
    return useMemo(() => {
        const { foo } = use(MyContext);
        return foo;
    }, []);
};

На данный момент функция use доступна в canary версии React. Как видно по примеру, в useMemo не надо ничего передавать в массив зависимостей, React сам поймет когда нужно произвести ререндер когда foo изменится.

https://interbolt.org/blog/react-use-selector-optimization/

Продвинутые фичи Next.js

Подборка менее известных фич в Next.js, о которых полезно знать. Краткий список:

- Автоматическая типизация <Link />:

const nextConfig = {
  experimental: {
    typedRoutes: true,
  },
}

В настройках можно включить типизацию ссылок в компоненте <Link />. Сгенерится d.ts файл, в котором будут типы созданных роутов, и можно будет безопасно использовать href в <Link />.

- Встроенные модули для сторонних скриптов Google. В Next.js есть встроенные компоненты для распространенных скриптов Google в @next/third-parties/google: GoogleTagManager, GoogleAnalytics, GoogleMapsEmbed, YouTubeEmbed.

- Простая генерация sitemap.xml. Нужно создать страницу sitemap.ts и вернуть в нем массив метаданных о страницах:

import { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://acme.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    }
  ]
}

- Если в src расположить файл instrumentation.ts, то Next.js будет запускать экспортируемую функцию register при запуске сервера. Может пригодиться, если надо запускать внешний код при запуске приложения.

- generateViewport (app router) для генерации мета-тегов в серверных компонентах:

export function generateViewport({ params }) {
  return {
    themeColor: 'black',
  }

  /*
 <meta name="theme-color" content="black" />
  */
}

https://codedrivendevelopment.com/posts/rarely-known-nextjs-features

Настройка отчетов о «мягкой» навигации в React

Отчет о «мягкой» навигации – это экспериментальная фича Google Web Vitals. С ее помощью можно измерять Core Web Vitals и другие метрики для динамических URL в SPA. «Мягкая» навигация происходит при изменении URL с помощью JavaScript, что типично для SPA приложений.

Что нужно сделать, чтобы подключить отчеты в приложении:

1) Включить экспериментальную фичу chrome://flags/#enable-experimental-web-platform-features.

2) Установить web-vitals с «мягкой» навигацией npm i web-vitals@3.5.0-soft-navs-10/

3) Создать функцию для отчетов в src/reportWebVitals.js и вызвать ее в src/index.js:

const  reportWebVitals  =  onPerfEntry  => {
    if (onPerfEntry  &&  onPerfEntry  instanceof  Function) {
        import('web-vitals').then(({ onTTFB, onFCP, onLCP, onCLS, onFID, onINP }) => {
            onTTFB(onPerfEntry, {reportSoftNavs: true});
            onFCP(onPerfEntry, {reportSoftNavs: true});
            onLCP(onPerfEntry, {reportSoftNavs: true});
            onCLS(onPerfEntry, {reportSoftNavs: true});
            onFID(onPerfEntry, {reportSoftNavs: true});
            onINP(onPerfEntry, {reportSoftNavs: true});
        });
    }
};

export  default  reportWebVitals;

https://www.debugbear.com/blog/soft-navigations-react-tutorial

Релиз Glide Data Grid 6.0

Вышел релиз Glide Data Grid 6.0 – датагрида на канвасе. Основные новые фичи:
- Экспериментальная поддержка кинетического скролла на iOS.
- Улучшение производительности при обновлении большего количества данных за раз.
- Улучшение ячейки UriCell – подчеркивание ссылки при наведении.
- Показ скелетонов в ячейках.

Основное преимущество Glide Data Grid – возможность отрендерить миллион строк, используя ленивый рендеринг. Также для сохранения батареи устройства используется нативный скроллинг.

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

Базовый пример как использовать Glide Data Grid:

const columns: GridColumn[] = [
  { noscript: "First Name", width: 100 },
  { noscript: "Last Name", width: 100 }
];

function getData([col, row]: Item): GridCell {
  const person = data[row];

  if (col === 0) {
    return {
      kind: GridCellKind.Text,
      data: person.firstName,
      allowOverlay: false,
      displayData: person.firstName
    };
  } else if (col === 1) {
    return {
      kind: GridCellKind.Text,
      data: person.lastName,
      allowOverlay: false,
      displayData: person.lastName
    };
  } else {
    throw new Error();
  }
}

export default function App() {
  return (
    <DataEditor columns={columns} getCellContent={getData} rows={data.length} />
  );
}   

https://grid.glideapps.com/

Гайд по композиции серверных компонентов

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

function Page() {
  return (
    <Card>
      <Details city={...} />
      <Tags tags={...} />
      <Footer>
        <AddToFavorites />
        <Button />
      </Footer>
    </Card>
  );
}

При композиции серверных и клиентских компонентов есть несколько особенностей, которые стоит учитывать:

- Возможна передача только отрендеренных компонентов при передаче серверных компонентов в клиентский:

// Так можно
<ClientCard footer={<ServerFooter />} />

// Так нельзя
<ClientCard Footer={ServerFooter} />

- Нельзя передавать пропсы через React.cloneElement в клиентских компонентах, которые принимают серверные. Связано это с тем, что серверные компоненты рендерятся перед клиентскими, поэтому передача пропсов через React.cloneElement не сработает.

- Не рекомендуется использовать серверные компоненты в render props. Пример того, как делать не надо:

<ClientCard
  renderFooter={async (clientProps) => {
    "use server";
    return <ServerFooter {...clientProps} />;
  }}
/>

function ClientCard({ renderFooter }) {
  const [count, setCount] = useState(0);
  return (
    <div>
      ...
      <Suspense>{renderFooter({ count })}</Suspense>
    </div>
  );
}

Каждый ререндер ClientCard вызовет render prop renderFooter, который спровоцирует сетевой запрос на сервер за обновленным состоянием серверного компонента <ServerFooter />.

https://frontendatscale.com/blog/donut-components/

Запуск локального React приложения в Android и iOS приложения

Гайд по запуску локального React приложения на мобильном телефоне, без доступа к интернету и запросов на сервер. В туториале по шагам описано, как забандлить React приложение на Vite в Anrdoid/iOS приложение и отобразить его через WebView.

Android: https://ditto.live/blog/run-react-locally-in-android
iOS: https://ditto.live/blog/run-react-locally-in-ios-app

Новые хуки в React 19

Помимо развития серверных компонентов в React добавляются новые хуки для получения данных и для работы с формой. Кратко о них:

- use(Promise). Хук для получения данных. Теперь при использовании fetch не надо дополнительно использовать useEffect. Достаточно хука use, пример:

import { use } from 'react';

function MessageComponent() {
    const message = use(fetch('…'));
    // ...
} 

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

- use(Context). Хук для чтения контекста. Также можно использовать внутри циклов и условных операторов. Можно оптимизировать получение значения контекста, используя хук useMemo:

import { use } from 'react';

function HorizontalRule({ show }) {
    if (show) {
        const theme = useMemo(() => use(MyContext).theme, []);
        return <hr className={theme} />;
    }
    return false;
}

- action в форме принимает асинхронную функцию:

const AddToCartForm = () => {
  const formAction = async (formData) => {
      await addToCart(formData, noscript);
  };

  return (
    <form action={formAction}>
    {/* --snip-- */}
    </form>
  );
};

- useFormState – хук для помощи при работе с action у формы. Принимает action и дефолтный стейт формы, возвращает текущий стейт формы и action для передачи в форму:

import { useFormState } from 'react-dom';
import { action } from './action';

function MyComponent() {
    const [state, formAction] = useFormState(action, null);
    // ...
    return <form action={formAction}>{/* ... */}</form>;
}

- useFormStatus – хук, который возвращает текущее состояние формы. Используется в дочерних компонентах внутри формы:

const { pending, data, method, action } = useFormStatus();

https://marmelab.com/blog/2024/01/23/react-19-new-hooks.html

Тип кортежей

В своем блоге Кайл Шевлин описал проблему типизации кортежей, возвращаемых из функции, пример:

function useBool(initialValue = false) {
  const [state, setState] = React.useState(initialValue)

  const handlers = React.useMemo(
    () => ({
 /* --snip-- */
    }),
    [initialValue],
  )

  return [state, handlers]
}

/**
const result: (
  | boolean
  | { /* --snip-- */    }
)[]
*/
const result = useBool()

Если посмотреть на тип result, то можно увидеть, что это массив, состоящий из объединения boolean и типа объекта handlers. По сути, TypeScript не знает индекс наших значений в массиве.

Чтобы решить эту проблему, можно указать возвращаемый тип у функции useBool, но более правильно будет добавить as const к возвращаемому кортежу:

function useBool(initialValue = false) {
  /* --snip-- */

  return [state, handlers] as const
}

Это сообщит TypeScript, что возвращаемый массив будет readonly и никогда не изменится. Поэтому TypeScript корректно определит типы state и handlers в местах использования.

https://kyleshevlin.com/wrangling-tuple-types/

Как начинать проект на React в 2024 году

В своем блоге Робин Вирух сделал ежегодный обзор как начинать новый проект на React в 2024 году. Вот его предложения:

- React и Vite. Если вы раньше использовали Create React App, то сейчас лучше перейти на Vite. Он быстрее, более активно поддерживается и схож с CRA. В нем также нет какого-то фреймворка, на основе которого строится приложение.

- Next.js или Remix. Если нужен готовый фреймворк с SSR/SSG. Под капотом много готовых решений для облегчения разработки, и можно легко добиться высоких показателей производительности, если все правильно делать.

- Astro. Фреймворк для создания MPA сайтов. Этот случай подходит, если делаете сайт с упором на контент: блог, портфолио, лендинги. Ориентирован на рендер на сервере и по умолчанию не поставляет JS в браузер.

https://www.robinwieruch.de/react-starter/

Мысли про Remix

Возможности React растут, а технические подходы к созданию UI стали более сложными, появляются новые «мета-фреймворки», которые позволяют быстрее создавать более производительные и масштабируемые приложения, прилагая меньшие усилия к разработке. На данный момент есть два популярных «мета-фреймворка» – Next.js и Remix.

Соломон Хоук поделился своими мыслями про Remix. Что нравится в Remix:

- Хорошая документация, в которой легко ориентироваться, есть гайды и темам и справочник API.

- Изучение Remix связано с пониманием роутинга, загрузкой данных и изучением соглашений, принятых в Remix: наименование файла, название экспортируемых функций и констант.

- В Remix уделяется внимание стандартам веб API, например используется Response и FormData.

- Для большинства рабочих кейсов не надо устанавливать стейт-менеджер и библиотеку для получения данных (типа react-query). Хватает встроенного API, например loader для получения данных.

Также автор описал вещи, которые не нравятся в Remix:

- Remix использует esbuild, но не дает доступа к его конфигурации.

- Получение данных связано с роутом через loader. Это может стать проблемой, если хотите получать данные на уровне компонента. Как вариант, использовать react-query.

- Проблема с ESM модулями. Remix бандлит сервер в формате CommonJS и по умолчанию не бандлит зависимые модули.

https://www.viget.com/articles/thoughts-on-remix/

Улучшаем типизацию роутинга в Next.js

В Next.js есть экспериментальная фича для генерации типов роутов:

const nextConfig = {
  experimental: {
    typedRoutes: true,
  },
}

Однако, этот способ не всегда применим, он позволяет только проверить правильность написания пути роута в href у Link:

// Валидно
<Link href="/about" />
 
// Ошибка
<Link href="/aboot" />

У typedRoutes есть несколько ограничений:

- нет валидации типа query params и проверок в runtime.
- нет подсказок для динамических роутов.
- нет валидации типа при передаче href как объекта <Link href={{href: '/about', query: {ref: 'hello'}}} />
- нет валидации типа для useParams() и useSearchParams()

Чтобы обеспечить валидацию типа и проверок в runtime, автор статьи предлагает использовать Zod и создал утилитарную функцию makeRoute. Пример как используется makeRoute:

Динамические роуты:

export const OrgParams = z.object({orgId: z.string()})

export const Routes = {
  home: makeRoute(({orgId}) => `/org/${orgId}`, OrgParams)
}
…
<Link href={Routes.home({orgId: 'g4eion3e3'})} />

useParams с типизацией:

// type = {orgId: string}
const params = Routes.home.useParams()

Query параметры:

export const SignupSearchParams = z.object({
  invitationId: z.string().optional().nullable(),
})

export const Routes = {
    signup: makeRoute(() => "/signup", z.object({}), SignupSearchParams),
}
…
<Link href={Routes.signup({}, {search: {invitationId: '8haf3dx'}})} />

https://www.flightcontrol.dev/blog/fix-nextjs-routing-to-have-full-type-safety

Использование Intersection Observer в React

react-intersection-observer – библиотека для использования Intersection Observer в React. Можно использовать через хук useInView и через компонент InView:

const Component = () => {
  const { ref, inView, entry } = useInView({
    /* Optional options */
    threshold: 0,
  });

  return (
    <div ref={ref}>
      <h2>{`Header inside viewport ${inView}.`}</h2>
    </div>
  );
};

Поддерживаются параметры Intersection Observer v2: trackVisibility и delay.

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

https://github.com/thebuilder/react-intersection-observer

Релиз Storybook 8 Beta

Вышел релиз Storybook 8 Beta. Какие он принес изменения:

- Значительное улучшение производительности. Поменяли компилятор, вместо Babel теперь SWC. Для проектов на React автоматически генерируются контролы с помощью react-docgen, это ускорило время запуска на 20%.

- Обновили UI на мобильных устройствах. Теперь на мобильных устройствах боковая панель будет появляться снизу.

- Улучшили утилиты для тестирования. Объединили @storybook/jest и @storybook/testing-library в один модуль @storybook/test, который основан на Vitest.

- Поддержка React Server Components. Пока что в историях можно использовать RSC только в Next.js проектах.

- Обновили версии основных зависимостей. Для Storybook 8 потребуется Node.js 18+, Vite 5 и Lit 3 версии.

https://storybook.js.org/blog/storybook-8-beta/