Listener API в Redux Toolkit

В RTK с самого начала используется redux-thunk в качестве дефолтного мидлвара для написания синхронной и асинхронной логики вне компонента. Однако, thunk не позволяет вызывать side effect функцию в ответ на dispatch экшена. Для таких целей обычно используется redux-saga.

В redux-toolkit v1.8.0 появилось новое listener API, которое позволяет создавать мидлвар для подписки на экшен или изменении стейта. Концептуально новое API похоже на useEffect, которое запускается в ответ на изменении стора.

Подписка может быть создана как в процессе создания стора через listenerMiddleware.startListening(), либо динамически в рантайме через dispatch(addListener()).

// Create the middleware instance and methods
const listenerMiddleware = createListenerMiddleware()

// Add one or more listener entries that look for specific actions.
// They may contain any sync or async logic, similar to thunks.
listenerMiddleware.startListening({
  actionCreator: todoAdded,
  effect: async (action, listenerApi) => {
    // Run whatever additional side-effect-y logic you want here
    console.log('Todo added: ', action.payload.text)

    // Can cancel other running instances
    listenerApi.cancelActiveListeners()

    // Run async logic
    const data = await fetchData()

    // Pause until action dispatched or state changed
    if (await listenerApi.condition(matchSomeAction)) {
      // Use the listener API methods to dispatch, get state,
      // unsubscribe the listener, start child tasks, and more
      listenerApi.dispatch(todoAdded('Buy pet food'))
      listenerApi.unsubscribe()
    }
  },
})

Обзор и сравнение с redux-saga:
https://blog.logrocket.com/redux-toolkits-new-listener-middleware-vs-redux-saga/

TypeScript типы для React

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

- React.ComponentProps. Иногда нет доступа к типу пропсов компонента: например, внешняя библиотека, которая дает доступ только к самому компоненту. Чтобы узнать тип пропсов компонента можно использовать React.ComponentProps.

import { ComponentProps } from "react";
import { ExternalComponent } from "external-lib";

type InternalComponentProps = ComponentProps<typeof ExternalComponent> & {
  outerClassName: string;
};

- React.MouseEventHandler. Используется для типизации колбека события мыши.

import { MouseEventHandler, } from "react";

type ComponentProps = {
  caption: string;
  onClick: MouseEventHandler<HTMLButtonElement>;
};

const Component = (props: ComponentProps) => (
  <div>
    <button onClick={props.onClick}>{props.caption}</button>
  </div>
);

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

type ComponentProps = Pick<Something, "propA" | "propB" | "children"> & {
 wrapperClassName?: string;
}

export const Component = (props: ComponentProps) => (
…
); 

https://www.chakshunyu.com/blog/7-typenoscript-utility-types-for-react-developers/

Как использовать useMemo и useCallback

Скорее всего вы знакомы с хуками useMemo и useCallback. Эти хуки используются практически в каждом проекте, и чем больше они используются, тем больше усложняют код компонента. Многие используют эти хуки, не до конца понимая зачем они нужны, и пишут их, потому что все так делают, так проще.

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

Основная задача хуков useMemo и useCallback- это мемоизация между ре-рендерами компонента. Если какое-то непримитивное значение или функция объявлены в теле компонента, то каждый раз при рендере будет создаваться новая ссылка на значение. При мемоизации значение будет закэшировано во время первого рендера и при последующих рендерах будет возвращаться ссылка на закэшированное значение. Это удобно при использовании с useEffect:

const Component = () => {
  // сохранение ссылк между ре-рендерами
  const a = useMemo(() => ({ test: 1 }), []);

  useEffect(() => {
    // будет вызван когда значение “a” изменится
  }, [a]);
};

Использование хуков useMemo и useCallback полезно только при ре-рендерах. При первом рендере React кэширует значения, поэтому рендерится компонент немного медленнее.
Один из популярных вариантов использования хуков мемоизации – это предотвращение ререндера компонента путем мемоизации пропсов. Например:

​​const Item = ({ item, onClick }) => <button onClick={onClick}>{item.name}</button>;

const Component = ({ data }) => {
  const value = useMemo(() => ({ a: someStateValue }), [someStateValue]);
  const onClick = useCallback(() => {
    console.log(value);
  }, [value]);

  return (
    <>
      {data.map((d) => (
        <Item item={d} onClick={onClick} />
      ))}
    </>
  );
};

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

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

https://www.developerway.com/posts/how-to-use-memo-use-callback

Приглашаем всех JavaScript-разработчиков 23 июня в Питер на офлайн-день конференции HolyJS 2022 Spring!

Вас ждут:
✔ 5 докладов.
✔ Дискуссии после каждого доклада.
✔ Lightning talks: мини-доклады от участников конференции.
✔ Живое общение, нетворкинг и обмен знаниями.
✔ Стенды партнеров с разными активностями, мини-докладами и мерчем.

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

Подробности, полную программу и билеты вы найдете по ссылке.

Если покупаете билет за свой счет (а не за счет компании), то воспользуйтесь промокодом для получения скидки: reactnotes2022JRGpc

Пример использования startTransition и 3D-рендеринга

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

Цель переходных обновлений состоит в том, чтобы создать более отзывчивый интерфейс.

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

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

Доу-Чи Лиу в своем блоге показал, как использовать API конкурентного рендеринга startTransition для рендера тяжелого компонента с 3D моделью с визуализацией связей между пользователями в Github.

Приложение содержит два компонента:
- поисковая строка пользователя Github;
- сцена с 3D визуализацией связей на three.js и react-three-fiber;

https://dawchihliou.github.io/articles/stress-testing-concurrent-features-in-react-18

Plasmo – React фрейморвк для создания браузерных расширений

Plasmo – новый фреймворк на React и TypeScript для создания браузерных расширений. Особенности:
- live-reloading при дев разработке;
- файлы окружений;
- автоматический деплой;
- автоматическая генерация manifest.json;
- поддержка всех основных браузеров;

Также есть CLI для инициализации проекта. В фреймворке есть дополнительные библиотеки для работы с расширениями, например API постоянного хранилища, у которой есть интеграция с Redux.

https://docs.plasmo.com/

Jest Preview для дебага тестов

При написании тестов с использованием Testing Library приходится писать много запросов в DOM, держа в голове структуру страницы, которую рендерит React для теста.

Для того чтобы видеть результат рендера во время теста, можно использовать библиотеку Jest Preview. После установки библиотеки и настройки конфигов, необходимо во время запуска тестов запускать команду jest-preview, которая будет стартовать сервер для превью тестов. В самих тестах, для отображения в браузере текущего DOM компонента, используется функция preview.debug().

Стоит учитывать, что в текущий момент библиотека активно развивается и может работать нестабильно.

https://www.jest-preview.com/

React Labs: над чем мы работали – июнь 2022

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

- Серверные компоненты. Вместо использования внешней библиотеки для I/O будет использоваться async/await для лучшей совместимости. Откажутся от расширения у серверных файлов .server.js в пользу аннотаций внутри файла. Работают над унификацией для поддержки сборщиков Webpack/Vite.

- Asset Loading. Интеграция загрузки изображений, шрифтов, стилей и Suspense. Загрузка ассетов должна блокировать отображение, но не конкурентный рендеринг и стриминг.

- React Optimizing Compiler. Представили компилятор React Forget на React Conf 2021. Работа идет, недавно переписали компилятор на новую архитектуру.

- Offscreen. Предлагает новые возможности, например, мгновенный переход – рендер компонента в фоне.

https://reactjs.org/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html

Инверсия управления и внедрение JSX через Context API

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

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

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

const TableColumnActions = props => {
  const { row, column } = props;
  const [openActions, setOpenActions] = useState(false);
  useOnClickOutside(popupRef, () => setOpenActions(false));
  const renderMenu = useTableActionsContext();

  const menuOptions = renderMenu({
    row,
    column,
    styles,
  });

  return (
    <div className="relative">
      {openActions ? (
          <ul className={styles.actionsMenu}>{menuOptions}</ul>
      ) : null}
    </div>
  );
};

https://theroadtoenterprise.com/blog/react-inversion-of-control-and-jsx-injection-via-context-api

TypeScript шпаргалка для React

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

Также есть раздел со списком полезных паттернов для React появившемся в определенной версии TypeScript. Например, в ​​TypeScript 4.1 появились типы шаблонных литералов, которые позволяют моделировать динамические типы в строковых литералах. Это может использоваться при типизации роутера:

type ParseRouteParams<Rte> = Rte extends `${string}/:${infer P}` ? P : never;
type Params = ParseRouteParams<"/api/user/:userID">; // Params is "userID"

https://react-typenoscript-cheatsheet.netlify.app/

Компонент и элемент в React

В терминах React встречаются такие слова как компонент, элемент и экземпляр. Чтобы разобраться в них и понять как они работают, давайте посмотрим на примеры:

const App = () => {
  return <p>Hello React</p>;
};

Код выше является объявлением React компонента. Если конкретнее, то это функциональный компонент (объявления классовых компонентов тоже являются компонентами). Рендеринг компонента происходит, когда мы используем его этот компонент как React элемент с угловыми скобками (например <Greeting />) в другом компоненте:

const Greeting = ({ text }) => {
  return <p>{text}</p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};

Мы можем отрендерить компонент как элемент несколько раз. Каждый раз, когда мы рендерим компонент как элемент, мы создаем экземпляр данного компонента:

const App = () => {
  return (
    <>
      <Greeting text="Hello Instance 1 of Greeting" />
      <Greeting text="Hello Instance 2 of Greeting" />
    </>
  );
};

Хоть компонент и объявлен один раз, он может использоваться несколько раз. При рендере он становится экземпляром компонента и живет в дереве React.

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

https://www.robinwieruch.de/react-element-component/

Обзор Redux Toolkit

Если вы еще не пробовали Redux Toolkit (RTK), то рекомендую прочитать краткий обзор от Марка Эриксона, создателя данного инструмента. В нем он рассказывает об основных API и подходах к разработке с использованием RTK, а также призывает всех пользователей Redux начать использовать RTK. Если кратко, то основные тезисы в пользу использования RTK:

- упрощает настройку стора до вызова одной функции;
- устраняет случайную мутацию стора и упрощает изменение стейта;
- избавляет от необходимости ручного написания action creators;
- упрощает написание логики фичи в одном файле вместо распределения его по нескольким файлам;
- хорошая поддержка TypeScript из коробки;
- RTK Query позволяет избавиться от написания thunks, редьюсеров, actions creators и дополнительных хуков для управления данными и отслеживанием стейта запроса;

https://blog.isquaredsoftware.com/presentations/2022-06-modern-redux-rtk/?slideIndex=0&stepIndex=0

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/