Storybook Community Showcase

Сводка последних новостей от сообщества Storybook: энциклопедия компонентов, плагин Figma, Story Explorer и различные аддоны: Variants, переменные CSS, Recoil…

- Энциклопедия компонентов. В Storybook собрали большую коллекцию популярных UI библиотек от Airbnb, Wix, WordPress и других. Теперь при создании своей UI библиотеки можно подсмотреть идеи у лучших компаний.

- Figma плагин для дизайн ревью. С помощью плагина Storybook Connect можно смотреть Storybook истории прямо в дизайне фигмы и тестировать компонент в живую.

- Обозреватель историй VSCode. Позволяет запускать истории в редакторе.

https://storybook.js.org/blog/community-showcase-2/

Возможно вам не нужны эффекты

Эффекты – это выход из парадигмы React. Они позволяют синхронизировать компоненты с какой-либо внешней системой, такой как виджет, не относящийся к React, сеть или DOM браузера. Если не задействована какая-то внешняя система (например, изменение стейта при обновлении какого-то пропа), вам не нужен эффект.

Основные случаи, когда эффект не нужен:

- Обновление стейта при обновлении стейта или пропа. Вместо этого используйте производные переменные.
- Кэширование вычислений. Используйте useMemo.
- Сброс стейта при изменении пропа. Установите изменяющийся проп в проп key. При изменении key, React пересоздает DOM и сбрасывает стейт у компонента и всех его потомков.
- Получение данных. Если делаете fetch в эффекте, то используйте cleanup функцию для отмены запроса, чтобы предотвратить race condition. Также есть комментарий Дэна Абрамова про рекомендованный способ получения данных в React 18.

https://beta.reactjs.org/learn/you-might-not-need-an-effect

React Query FAQ

Доминик Дорфмайстер, один из разработчиков библиотеки React Query, написал в своем блоге FAQ по библиотеке react-query, в которой ответил на наиболее популярные вопросы.

- Как передать параметр в refetch? Если кратко, то это сделать нельзя, т.к. нарушается принцип работы react-query. React-query кэширует результат запроса по ключу, переданному в хук в первом параметре, поэтому refetch только повторяет запрос. Если нужно выполнить refetch с другими параметрами, то это значит, что нужно сделать новый запрос с новым ключом.

const { data } = useQuery(['item', id], () => fetchItem({ id }))

- Состояние загрузки. Чтобы сохранить предыдущее значение data при изменении ключа до загрузки новых данных, можно использовать параметр keepPreviousData. Дополнительно можно использовать флаг isPreviousData, который обозначает что в data находится устаревшее значение.

const { data, isPreviousData } = useQuery(
  ['item', id],
  () => fetchItem({ id }),
  { keepPreviousData: true }
)

- Почему не обновляется кэш? При работе напрямую с Query Cache бывают моменты, когда кэш не обновляется. Одна из причин – не совпадают ключи. Когда вызываете queryClient.setQueryData, ключи запроса должны полностью совпадать с существующими. Например, следующие ключи не будут совпадать, потому что ‘1’ !== 1:

['item', '1']
['item', 1]

Еще одна возможная причина того, что не обновляет кэш – нестабильная ссылка на QueryClient в QueryClientProvider. Лучше всего объявлять QueryClient вне компонента, но если нужно объявить его внутри компонента, то объявляйте внутри рефа или useState:

export default function App() {
  const [queryClient] = React.useState(() => new QueryClient())

  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

https://tkdodo.eu/blog/react-query-fa-qs

Получение данных и Suspense

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

Но как Suspense понимает, что внутри компонента происходит сетевой запрос на получение данных? Suspense рендерит индикатор загрузки, но в коде мы нигде не сообщаем React, что делаем сетевой запрос. Если вы используете библиотеки react-query, SWR, то в них есть поддержка Suspense. Давайте попробуем сделать поддержку Suspense для Axios.

Чтобы Suspense узнал о том, что в компоненте происходит асинхронная операция, нужно выкинуть исключение в виде промиса. Можно сделать функцию, которая бы делала это с любыми промисами и обернуть ее в сетевые запросы:

const dataFetch = () => {
  const userPromise = fetchUser;
  return {
    user: wrapPromise(userPromise),
  };
};
const wrapPromise = (promise) => {
  let status = "pending";
  let result;
  let suspend = promise().then(
    (res) => {
      status = "success";
      result = res;
    },
    (err) => {
      status = "error";
      result = err;
    }
  );
  return {
    read() {
      if (status === "pending") {
        throw suspend;
      } else if (status === "error") {
        throw result;
      } else if (status === "success") {
        return result;
      }
    },
  };
};

Применение данной функции:

const resource = dataFetch();
const UserProfile = () => {
  const user = resource.user.read();
  return (
    <div className="container">
      <h1 className="noscript">{user.name}</h1>
    </div>
  );
};

Таким образом, Suspense увидит, что в компоненте UserProfile происходит сетевой запрос и покажет индикатор загрузки.

https://blog.openreplay.com/data-fetching-with-suspense-in-react

Уже в этот четверг 21 июля в 19 МСК друзья из AgileFluent и Solvery проведут бесплатное live собеседование на английском с software engineer.

Интервьюеры:
Маша Реутская, международный HR эксперт AgileFluent, 15+ лет опыта in-house в крупнейших международных компаниях.
Проведёт софт-скилл интервью и даст фидбек, как улучшить ответы.

Саша Черношей, Software engineer в Microsoft в Эстонии, ментор Solvery. 6 лет опыта разработки ПО и 4 года мобильной разработки на react-native для заказчиков из США и Великобритании. Проведет техническую часть интервью.

📆Дата и время: 21 июля, 19:00 по Мск.

Будет полезно разработчикам, которые хотят в международную компанию или готовятся к тех интервью. И всем, кто готовится к behavioral-интервью: эта часть схожая у всех профессий.

Будет интервью с кандидатом из зала — если хочешь в поучаствовать и получить фидбэк от рекрутера и нанимающего менеджера, заполняй форму тут. Очень ждем на интервью реакт-нейтивов.

Записаться и получить запись можно в боте.

Тайна React Element и повторные рендеры

Например, у вас есть родительский компонент, в котором часто изменяется стейт. В нем рендерится дочерний компонент:

const MovingComponent = () => {
  const [state, setState] = useState({ x: 100, y: 100 });

  return (
    <div onMouseMove={(e) => setState({ x: e.clientX - 20, y: e.clientY - 20 })} style={{ left: state.x, top: state.y }}>
      <ChildComponent />
    </div>
  );
};

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

const MovingComponent = ({ children }) => {
  const [state, setState] = useState({ x: 100, y: 100 });

  return (
    <div onMouseMove={(e) => setState({ x: e.clientX - 20, y: e.clientY - 20 })} style={{ left: state.x, top: state.y }}>
      {children}
    </div>
  );
};

const SomeOutsideComponent = () => {
  return (
    <MovingComponent>
      <ChildComponent />
    </MovingComponent>
  );
};

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

В случае передачи компонента как проп children, компонент создается один раз в SomeOutsideComponent. При рендере компонента MovingComponent, при изменении стейта его пропсы остаются такими же, поэтому не происходит повторный рендер компонента ChildComponent.

https://www.developerway.com/posts/react-elements-children-parents

Изучаем исходный код React

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

Например, при вызове createRoot из ReactDOM будет создаваться объект ReactDOMRoot:

function ReactDOMRoot(internalRoot: FiberRoot) {
  this._internalRoot = internalRoot
}

Эта функция всего лишь сохраняет переданное значение в this и ничего не возвращает. Методы этой функции, например render, будут объявляться через прототип:

ReactDOMHydrationRoot.prototype.render =
  ReactDOMRoot.prototype.render = function (
    children: ReactNodeList
  ): void {
    const root = this._internalRoot
    
    // …
}

Этот подход имеет свои преимущества. Во-первых, можно использовать оператор instanceof для проверки типа объекта (instanceof будет проверять цепочку прототипа). Во-вторых, это более производительнее. Функция прототипа создается один раз, в отличии от замыканий.

https://alexkondov.com/readint-source-code-react/

React Core Team не рекомендует CSS-in-JS runtime библиотеки

В недавнем Q&A интервью Дэн Абрамов поделился мнением насчет стилей в React приложениях. Основной посыл был в том, что если используются динамические стили, то лучше применять инлайновые стили у элемента. Если стили не динамические, то лучше использовать что-то, что компилируется в CSS при сборке приложения и не использует runtime.

Это утверждение совпадает с мнением Себастьяна Маркбоге, одного из ментейнера React. Он рекомендует выносить статичные стили при компиляции в <link rel="stylesheet">.

Одними из популярных CSS-in-JS библиотек, которые генерируют стили в runtime, являются Emotion и Styled Components. Одной из проблем этих библиотек является их производительность. Браузер во время загрузки страницы может параллельно парсить JS, CSS и HTML. В случае CSS-in-JS runtime библиотек сначала надо спарсить и запустить JS, который сгенерирует стили, и спарсить их отдельно.

Применение принципов SOLID в React

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

В своем блоге Константин Лебедев интерпретировал принципы SOLID в коде React. Например, как можно применить принцип разделения интерфейса:

// VideoList.tsx
type Video = {
  noscript: string
  duration: number
  coverUrl: string
}
type Props = {
  items: Array<Video>
}
const VideoList = ({ items }) => {
  return (
    <ul>
      {items.map(item => 
        <Thumbnail 
          key={item.noscript} 
          video={item} 
        />
      )}
    </ul>
  )
}

// Thumbnail.tsx
type Props = {
  video: Video
}
const Thumbnail = ({ video }: Props) => {
  return <img src={video.coverUrl} />
}

Компонент Thumbnail принимает объект video, хотя для работы данного компонента требуется только ссылка на изображение. Чтобы показать проблему, добавим новый тип видео в VideoList, у которого будет отличаться интерфейс объекта. В этом случае Thumbnail будет работать неправильно и его придется переделать. Сделаем так, чтобы Thumbnail принимал проп coverUrl – ссылку на изображение и будем передавать туда нужный проп в зависимости от типа видео:

type Props = {
  items: Array<Video | LiveStream>
}
const VideoList = ({ items }) => {
  return (
    <ul>
      {items.map(item => {
        if ('coverUrl' in item) {
          // it's a video
          return <Thumbnail coverUrl={item.coverUrl} />
        } else {
          // it's a live stream
          return <Thumbnail coverUrl={item.previewUrl} />
        }
      })}
    </ul>
  )
}

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

https://konstantinlebedev.com/solid-in-react/

Date & Time picker для всех

UI библиотека от Adobe, React Spectrum, представила новые инструменты для работы с датой и временем для React – хуки useDateField и useTimeField. Также есть инструменты для работы с календарем useCalendar и useRangeCalendar. Помимо хуков есть стилизованные компоненты для работы с датой, временем и календарем.

Для работы с интернационализацией Adobe представила библиотеку @internationalized/date. В ней вместо использования стандартного объекта Date используются новые объекты для работы с датой и временем, с разным поведением и для разных кейсов. Например, CalendarDate представляет из себя только дату без времени, а Time только время без даты. Объекты поддерживают арифметические операции и их можно между собой сравнивать. В целом, получилась альтернатива Moment.js и другим подобным библиотекам.

https://react-spectrum.adobe.com/blog/date-and-time-pickers-for-all.html

Как использовать Next.js мидлвары

В блоге Криса Николаса вышла статья о том, как можно использовать Next.js мидлвары. Файл мидлвара должен лежать в корневой папке проекта с названием middleware.ts.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware (request: NextRequest) {
  return NextResponse.next()
}

Эта функция будет запускаться перед каждой загрузкой страницы, API роута или файла на сайте. Мидлвар не может возвращать Response. Также можно настроить работу мидлвара только для отдельных страниц, экспортировав config с массивом URL в файле middleware.ts:

export const config = {
  matcher: ['/about', '/articles/:path*']
}

Какие есть возможные варианты использования мидлваров:
- Редирект на другую страницу.
- Переписывание страницы, т.е. использование другой страницы для данного URL.
- Проверка UserAgent. Можно делать редирект или переписывание страницы на мобильную/десктопную версию сайта.
- Проверка доступа. Можно получить из запроса токен пользователя и проверить доступ к странице.
- Счетчик посещений.

// Мидлвар проверки доступа
const secretKey = 'artichoke'

export function middleware (request: NextRequest) {
  if (request.nextUrl.pathname === '/api/query') {
    const headerKey = request.headers.get('secret-key')

    // If secret keys match, allow access
    if (headerKey === secretKey) {
      return NextResponse.next()
    }

    // Otherwise, redirect to your custom error page
    const url = request.nextUrl.clone()
    url.pathname = '/unauthorised'
    return NextResponse.redirect(url)
  }

  return NextResponse.next()
}

https://www.ctnicholas.dev/articles/how-to-use-nextjs-middleware

Подборка React компонентов и библиотек

Курируемый список компонентов и библиотек для разных кейсов. Мейнтейнеры собрали список из полезных компонентов и библиотек, которые решают проблемы в своей области.
Список разнообразный и разбит по категориям: от текстовых редакторов до древовидных меню и библиотек интернационализаций.

https://github.com/brillout/awesome-react-components

HolyJS возвращается!

В ноябре JUG Ru Group организует конференцию для JavaScript‑разработчиков — HolyJS 2022. В программе — технические доклады и дискуссии о языках, архитектуре, графике, фреймворках и инструментах. На конференции соберутся все, кто программирует на JavaScript, — для фронтенда и не только.

Участники конференции любят обсуждать нетривиальные задачи и новые подходы в JavaScript-разработке. Есть интересные кейсы? Тогда подавайте заявку на выступление. Программный комитет поможет с подготовкой к выступлению: назначит персонального куратора, проведет ревью материала и организует репетиции.

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

Всем спикерам JUG Ru Group дарит билет на все конференции сезона в онлайне и офлайне.

А билеты можно купить здесь.

Event bus для React

Event Bus или шина событий – это шаблон проектирования, который используется для общения между компонентами, в то время как сами компоненты остаются слабо связанными.

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

В своем блоге Доу-Чи Лиу показал, как с нуля сделать шину событий на TypeScript и использовать в React компонентах для отправки аналитики.

export default function Index() {
  useEffect(() => {
    const unsubscribeOnMapIdle = mapEventChannel.on('onMapIdle', () => {
      logUserInteraction('on map idle.')
    })

    return () => {
      unsubscribeOnMapIdle()
    }
  }, [])

  // …
}

https://dawchihliou.github.io/articles/event-bus-for-react

React Query v4

Вышла новая версия библиотеки React Query. Точнее, теперь она называется TanStack Query. Разработчик провел ребрендинг и теперь библиотека не привязана к какому-то конкретному одному фреймворку. Помимо React планируется поддержка Vue, Svelte и Solid.

Кроме самого ребрендинга в 4ой версии появились новые фичи.

Поддержка офлайна. Query теперь может работать с любыми асинхронными данными и не зависит от того, доступна ли сейчас сеть. Также появился Network mode, который позволяет разрабатывать offline-first приложение. Это особенно удобно, если разрабатываете PWA приложение и кэшируете данные в Service Worker или в localStorage.

Улучшение производительности. С 4ой версии Tracked Queries стало поведением по умолчанию. При использовании данной фичи, компонент использующий Query будет ререндерится только при изменении использованных пропов query. Например, если вы не используете стейт isSuccess, то компонент не будет ререндерится, если он изменился. Более подробно написано здесь.

Персистентность. Есть возможность сохранять Query Cache во внешнее хранилище, например, в localStorage. Для того, чтобы подключить внешнее хранилище для кэша, нужно использовать адаптеры SyncStoragePersister и AsyncStoragePersister.

Поддержка React 18. В адаптере для React теперь используется useSyncExternalStore для поддержки конкурентного режима.

https://tanstack.com/blog/announcing-tanstack-query-v4

Изучаем шейдеры и React Three Fiber

Three.js и его адаптер React Three Fiber используют WebGL для отрисовки сцен на экране. В свою очередь, WebGL использует шейдеры. Внутри Three.js уже есть встроенные шейдеры материалов: MeshNormalMaterial, MeshPhysicalMaterial и другие. Стандартные шейдеры ограничивают потенциал использования WebGL, поэтому Three.js позволяет создавать и использовать собственные шейдеры.

Максим Хекель в своем блоге рассказал про шейдеры, их виды и показал примеры их использования с React Three Fiber. Кроме самописных шейдеров существуют библиотеки для декларативного создания материалов – Lamina. С помощью композиции слоев можно создать новый материал, используя встроенные слои.

https://blog.maximeheckel.com/posts/the-study-of-shaders-with-react-three-fiber/

Гайд по ре-рендерам React

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

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

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

Одним из полезных паттернов предотвращения ре-рендера, особенно для тяжелых компонентов, является композиция и прокидывание компонента как проп. В базовом случае можно прокидывать компонент как children.

const ComponentWithScroll = ({ children }) => {
 const [value, setValue] = useState({});

 return (
  <div onScroll={setValue}>
   {children}
  </div>
 )
}

const App = () => {
 return (
  <ComponentWithScroll>
   <HeavyComponent />
  </ComponentWithScroll>
 )
}

В компоненте ComponentWithScroll проп children не будет зависеть от изменения стейта и вследствие чего не будет происходить его ре-рендер.

Стоит учитывать, что сам по себе ре-рендер не является проблемой, т.к. изменения в DOM браузера происходят после фазы коммита в React. Однако слишком частый ре-рендер может привести к тормозам и фризам UI, из-за чего приложением будет сложно пользоваться, особенно на слабых устройствах.

https://www.developerway.com/posts/react-re-renders-guide

Обзор способов локализации React приложений

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

react-i18next
Библиотека для перевода локалей на несколько языков:
- Возможность хранения переводов как локально в json файлах, так и на стороннем сервере, подгружая локали через плагин на бэкенде.
- Поддержка TypeScript: типизация ключей.
- Есть хуки для перевода строк и компонент Trans для перевода JSX дерева.
- Есть поддержка популярных фреймворков: Next.js, Gatsby, Remix.

import React from 'react';
import { useTranslation } from 'react-i18next';

export function MyComponent() {
  const { t, i18n } = useTranslation();
  // or const [t, i18n] = useTranslation();

  return <p>{t('my translated text')}</p>
}

react-intl
Библиотека для интернационализации приложения для разных локаций. Использует браузерное API Intl для интернационализации чисел, дат, относительного времени и плюрализации.
Есть как хуки, так и компоненты. Для каждого типа данных есть свой компонент. Например FormattedDate для дат, FormattedNumber для чисел, FormattedMessage для текстовых строк. Чаще всего пользуются последним – FormattedMessage. Также есть поддержка TypeScript.

import {FormattedRelative, useIntl} from 'react-intl';
const MS_IN_DAY = 1e3 * 3600 * 24

const PostDate = ({date}) => {
  const intl = useIntl()
  return (
    <span noscript={intl.formatDate(date)}>
      <FormattedRelativeTime value={(Date.now() - date)/MS_IN_DAY} unit="day"/>
    </span>
  )
});

LinguiJS
Библиотека использует ICU Message Format – синтаксис для выражения сообщений, как и react-intl. Библиотека предлагает использовать компонент Trans, внутри которого может быть JSX дерево. Используя babel макросы, LinguiJS переводит теги Trans в ICU MessageFormat. После чего вместо текстовых строк вставляет перевод. Например:

<p>
   <Trans id="msg.docs">Read the <a href="/docs">documentation</a>.</Trans>
</p>

В файле c переводом, ключом перевода сообщения выше будет строка Read the <0>documentation</0>..

Также в библиотеке есть CLI скрипты для извлечения сообщений из приложения и компиляции JS файла с локалями.

Docusaurus 2.0

Вышла новая версия генератора статических сайтов Docusaurus. Он позволяет создавать сайты на React с фокусом на контент и поддерживает Markdown разметку из под коробки. По словам разработчиков, Docusaurus как create-react-app, но для создания документации, блогов и лендингов.

В новой версии появились новые фичи:
- MDX. Можно добавлять интерактивные React компоненты в Markdown разметку.
- Плагины. У Docusaurus модульная архитектура с системой плагинов. Основные фичи, такие как блог, документация, страницы и поиск можно улучшать плагинами.
- Темизация. Возможность очень гибкой кастомизации стилей, либо создание и использование своей собственной темы.

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

https://docusaurus.io/blog/2022/08/01/announcing-docusaurus-2.0

Различие между useEffect и useLayoutEffect

Хуки useEffect и useLayoutEffect предназначены для выполнения сайд-эффектов в компоненте и имеют одинаковые сигнатуру. Но цели их использования разные.

useEffect запускается асинхронно после отрисовки браузером DOM изменений.

useLayoutEffect запускается синхронно после DOM изменений, до отрисовки браузера.

Это значит, что если необходимо делать DOM изменения или какую-либо анимацию, то больше подходит useLayoutEffect. В остальных случаях необходимо использовать useEffect. Если выполнять DOM изменения в useEffect, то изменение отобразится в следующем тике браузерного рендера, что приведет к эффекту “мерцания”.

В React 18 было изменено поведение useEffect. Теперь он запускается синхронно, если это результат дискретного ввода. Дискретный ввод — это тип события, при котором результат одного события может повлиять на поведение следующего, например клик. Есть следующий пример:

const App = () => {
  const [showToolTip, setShowTooltip] = useState(false);
  const buttonRef = useRef();
  const tooltipRef = useRef();

  useEffect(() => {
    if (buttonRef.current == null || tooltipRef.current == null) return;

    const { left, top } = buttonRef.current.getBoundingClientRect();
    tooltipRef.current.style.left = ${left + 120}px;
    tooltipRef.current.style.top =  ${top - 20}px;
  }, [showToolTip]);

  return (
    <div>
      <button ref={buttonRef}
        onClick={() => setShowTooltip(prevState => !prevState)}>
        Toggle tooltip
      </button>

      {showToolTip &&
        (<div ref={tooltipRef}>
          This is a Tooltip!
        </div>)}
    </div>
  )
};

Если запустить пример выше в React 17, то при клике на кнопку произойдет эффект “мерцания” – сначала тултип отобразится, потом расположится в нужной позиции. Если использоваться useLayoutEffect, то проблема исчезнет. Если запустить пример в React 18, то эффекта “мерцания” не будет и с useEffect, т.к. эффект произошел из-за дискретного ввода – клика по кнопке.

https://blog.saeloun.com/2022/07/28/difference-between-useeffect-and-useeffectlayout-hooks

Mantine 5.0 – полнофункциональная библиотека компонентов

Mantine – библиотека компонентов для React 18, написанная на TypeScript и Emotion. Включает более 100 готовых компонентов и 40 хуков.

Библиотека разделена на модули, которые можно устанавливать по необходимости. Например, есть модули для работы с формами (аналог react-hook-form) и для работы с датами (компоненты календаря, выбора даты). Также есть модуль для обеспечения серверного рендера компонентов.

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

import { Slider } from '@mantine/core';
import { useHover } from '@mantine/hooks';

export function SliderHover() {
  const { hovered, ref } = useHover();

  return (
    <Slider
      defaultValue={40}
      min={10}
      max={90}
      ref={ref}
      label={null}
      styles={{
        thumb: {
          transition: 'opacity 150ms ease',
          opacity: hovered ? 1 : 0,
        },

        dragging: {
          opacity: 1,
        },
      }}
    />
  );
}

https://mantine.dev/