Полезные видео о фронтенде. Подпишись на Rutube

Новые клиентские хуки React 19

год назад·9 мин. на чтение

Обзор и анализ ключевых обновлений и функциональности новых клиентских хуков в React 19

Вопреки распространенному мнению, основная команда React сосредоточена не только на компонентах React Server и Next.js. Новые хуки на стороне клиента появятся в следующей основной версии React, React 19. Они сосредоточены на двух основных точках React: получение данных и формы. Эти хуки повысят производительность разработчиков React, включая тех, кто работает с SPA. Новые хуки:

use(Promise)
use(Context)
Form Actions
useFormState
useFormStatus
useOptimistic
Async transitions (Асинхронные переходы)

Примечание: Эти хуки доступны только в канареечных и экспериментальных релизах React. Они должны стать частью предстоящего React 19, но API может измениться до финального релиза.

`use(Promise)`

Этот новый хук является официальным API для приостановки на клиенте. Вы можете передать ему обещание, и React приостановится на нем до тех пор, пока промис не зарезолвится. Базовый синтаксис, взятый из документации по use React, выглядит следующим образом:

import { use } from 'react';

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  // ...
}

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

import { useState, use, Suspense } from 'react';

let news = ['news1', 'news2'];

const fetchNews = () => {
  return new Promise<string[]>((resolve) =>
    // имитация запроса данных
    setTimeout(() => {
      news = [...news, `news${news.length + 1}`];
      resolve(news);
    }, 500)
  );
}

const News = ({ newsPromise }) => {
  const news = use<string[]>(newsPromise);
  return (
    <ul>
      {news.map((title, index) => (
        <li key={index}>{title}</li>
      ))}
    </ul>
  );
};

export const App = () => {
  const [newsPromise, setNewsPromise] = useState(
    () => fetchNews()
  );

  const handleUpdate = () => {
    fetchNews().then((news) => {
      setNewsPromise(Promise.resolve(news));
    });
  };

  return (
    <>
      <button onClick={handleUpdate}>Обновить</button>
      <Suspense fallback={<p>Запрос данных...</p>}>
        <News newsPromise={newsPromise} />
      </Suspense>
    </>
  );
};

В ранних версиях было бы получено предупреждение, связанное с <Suspense>, т.к. требовалось чтобы компонент был lazy-loaded:

Suspense-enabled data fetching without the use of an opinionated framework is not yet supported.

Что ж, это уже не относится к React 19. Этот новый хук use имеет скрытую силу: в отличие от всех других хуков React, use может быть вызван в циклах и условных операторах, таких как if. Означает ли это, что нам больше не нужно использовать стороннюю библиотеку, такую как TanStack Query, для получения данных на стороне клиента? Что ж, это еще предстоит выяснить, поскольку Tanstack Query делает больше, чем просто разрешает Promise. Но это большой шаг в правильном направлении, и он упростит создание одностраничных приложений на основе REST API или GraphQL. Подробнее о хуке use(Promise).

`use(Context)`

Тот же use может быть использован для чтения React Context. Он точно такой же, как useContext, за исключением того, что его можно вызывать в циклах и условных операторах, таких как if.

import { use } from 'react';

function HorizontalRule({ show }) {
  if (show) {
    const theme = use(ThemeContext);
    return <hr className={theme} />;
  }
  return false;
}

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

Form Actions

Эта новая функциональность позволяет передавать проп action в <form>. React вызовет эту функцию, когда форма будет отправлена:

<form action="{handleSubmit}" />

Помните, что если вы добавите <form action> в React 18, вы получите следующее предупреждение:

Warning: Invalid value for prop action on <form> tag. Either remove it from the element or pass a string or number value to keep it in the DOM.

Это больше не касается React 19, где вы можете написать форму следующим образом:

import { useState } from 'react';

const AddToCartForm = ({ id, title, addToCart }) => {
  const formAction = async (formData) => {
    try {
      await addToCart(formData, title);
    } catch (e) {
      // ошибка
    }
  };

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <button type="submit">Добавить в корзину</button>
    </form>
  );
};

type Item = {
  id: string;
  title: string;
};

const Cart = ({ cart }: { cart: Item[] }) => {
  if (cart.length == 0) {
    return null;
  }
  return (
    <>
      Корзина:
      <ul>
        {cart.map((item, index) => (
          <li key={index}>{item.title}</li>
        ))}
      </ul>
      <hr />
    </>
  );
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // имитация запроса
    await new Promise(
      (resolve) => setTimeout(resolve, 1000)
    );
    setCart((cart: Item[]) => [...cart, { id, title }]);

    return { id };
  };

  return (
    <>
      <Cart cart={cart} />
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
      />
    </>
  );
};

Функция addToCart не является серверным действием. Она вызывается на стороне клиента и может быть асинхронной функцией. Это значительно упростит обработку AJAX-форм в React - например, в форме поиска. Но опять же, этого может быть недостаточно, чтобы избавиться от сторонних библиотек, таких как React Hook Form, которые делают гораздо больше, чем просто обрабатывают отправку форм (проверка, побочные эффекты и т.д.). В приведенном выше примере вы можете найти некоторые проблемы с юзабилити (кнопка отправки не отключена при отправке, отсутствует сообщение с подтверждением, позднее обновление корзины). К счастью, в этом случае появляется все больше хуков. Подробнее о <form action>.

`useFormState`

Этот новый хук призван помочь с асинхронным form action, описанным выше. Вызовите useFormState, чтобы получить доступ к возвращаемому значению действия с момента последней отправки формы.

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

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

Например, это позволяет отобразить подтверждение или сообщение об ошибке, возвращаемое действием формы:

import { useState } from 'react';
import { useFormState } from 'react-dom';

const AddToCartForm = ({ id, title, addToCart }) => {
  const addToCartAction = async (prevState, formData) => {
    try {
      await addToCart(formData, title);
      return 'Добавлено в корзину';
    } catch (e) {
      return "Невозможно добавить в корзину: товар распродан.";
    }
  };

  const [message, formAction] = useFormState(addToCartAction, null);

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <button type="submit">Добавить в корзину</button>&nbsp;
      {message}
    </form>
  );
};

type Item = {
  id: string;
  title: string;
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // имитация запроса
    await new Promise(
      (resolve) => setTimeout(resolve, 1000)
    );
    if (id === '1') {
      setCart((cart: Item[]) => [...cart, { id, title }]);
    } else {
      throw new Error('Unavailable');
    }

    return { id };
  };

  return (
    <>
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
      />
    </>
  );
};

Примечание: useFormState должен быть импортирован из react-dom, а не react. Подробнее о useFormState.

`useFormStatus`

useFormStatus позволяет узнать, отправляет ли родительский элемент <form> в настоящее время или успешно выполнил отправку. Он может быть вызван из дочерних элементов формы, и он возвращает объект со следующими свойствами:

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

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

import { useState } from 'react';
import { useFormStatus } from 'react-dom';

const AddToCartForm = ({ id, title, addToCart }) => {
  const formAction = async (formData) => {
    try {
      await addToCart(formData, title);
    } catch (e) {
      // ошибка
    }
  };

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <SubmitButton />
    </form>
  );
};

const SubmitButton = () => {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending} type="submit">
      Добавить в корзину
    </button>
  );
};

type Item = {
  id: string;
  title: string;
};

const Cart = ({ cart }: { cart: Item[] }) => {
  if (cart.length == 0) {
    return null;
  }
  return (
    <>
      Cart content:
      <ul>
        {cart.map((item, index) => (
          <li key={index}>{item.title}</li>
        ))}
      </ul>
      <hr />
    </>
  );
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // имитация запроса
    await new Promise(
      (resolve) => setTimeout(resolve, 1000)
    );
    setCart((cart: Item[]) => [...cart, { id, title }]);

    return { id };
  };

  return (
    <>
      <Cart cart={cart} />
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
      />
    </>
  );
};

Примечание: useFormState должен быть импортирован из react-dom, а не react. Кроме того, он работает только тогда, когда родительская форма использует свойство action, описанное выше. Вместе с useFormState этот хук улучшит пользовательский опыт клиентских форм, не загромождая ваши компоненты бесполезными эффектами. Подробнее о useFormStatus.

`useOptimistic`

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

import { useOptimistic } from 'react';

function AppContainer() {
  const [optimisticState, addOptimistic] = useOptimisti(
    state,
    // updateFn
    (currentState, optimisticValue) => {
      // merge and return new state
      // with optimistic value
    }
  );
}

В приведенном выше примере c корзиной мы могли бы использовать этот хук для отображения корзины с новым элементом, добавленным до завершения AJAX вызова:

import { useState, useOptimistic } from 'react';

const AddToCartForm = ({ id, title, addToCart, optimisticAddToCart }) => {
  const formAction = async (formData) => {
    optimisticAddToCart({ id, title });
    try {
      await addToCart(formData, title);
    } catch (e) {
      // ошибка
    }
  };

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <button type="submit">Добавить в корзину</button>
    </form>
  );
};

type Item = {
  id: string;
  title: string;
};

const Cart = ({ cart }: { cart: Item[] }) => {
  if (cart.length == 0) {
    return null;
  }
  return (
    <>
      Cart content:
      <ul>
        {cart.map((item, index) => (
          <li key={index}>{item.title}</li>
        ))}
      </ul>
      <hr />
    </>
  );
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const [optimisticCart, optimisticAddToCart] = useOptimistic<Item[], Item>(
    cart,
    (state, item) => [...state, item]
  );

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // имитация запроса
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setCart((cart: Item[]) => [...cart, { id, title }]);

    return { id };
  };

  return (
    <>
      <Cart cart={optimisticCart} />
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
        optimisticAddToCart={optimisticAddToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
        optimisticAddToCart={optimisticAddToCart}
      />
    </>
  );
};

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

Async Transitions (Асинхронные переходы)

React Transition API позволяет обновлять состояние, не блокируя пользовательский интерфейс. Например, он позволяет отменить предыдущее изменение состояния, если пользователь передумал. Идея состоит в том, чтобы обернуть изменение состояния вызовом startTransition.

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    // вместо прямого вызова setTab(nextTab),
    // оберните изменение состояния в transition
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

В следующем примере показана навигация по вкладкам с помощью Transition API. Нажмите «Сообщения», а затем сразу нажмите «Контакты». Обратите внимание, что это прерывает медленный рендеринг "Posts". Вкладка «Контакты» отображается сразу. Так как это обновление состояния помечено как переход, медленная повторная отрисовка не привела к зависанию пользовательского интерфейса.

import { useState, useTransition } from 'react';
import TabButton from './TabButton';
import AboutTab from './AboutTab';
import PostsTab from './PostsTab';
import ContactTab from './ContactTab';

export function App() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <>
      <TabButton isActive={tab === 'about'} onClick={() => selectTab('about')}>
        О нас
      </TabButton>
      <TabButton isActive={tab === 'posts'} onClick={() => selectTab('posts')}>
        Посты (медленное)
      </TabButton>
      <TabButton
        isActive={tab === 'contact'}
        onClick={() => selectTab('contact')}
      >
        Контакты
      </TabButton>
      <hr />
      {tab === 'about' && <AboutTab />}
      {tab === 'posts' && <PostsTab />}
      {tab === 'contact' && <ContactTab />}
    </>
  );
}

useTransition уже доступен в React 18.2. Что нового в React 19, так это то, что теперь вы можете передать асинхронную функцию startTransition, которую React ожидает для начала перехода. Это полезно для отправки данных с помощью AJAX вызова и визуализации результата в переходе. Состояние ожидания перехода начинается с асинхронной отправки данных. Он уже используется в описанной выше функции действий с формами. Это означает, что React вызывает обработчик <form action> обернутый в startTransition, поэтому он не блокирует текущую страницу.

Заключение

Все эти функции работают в клиентских приложениях React, например, в приложениях, поставляемых в комплекте с Vite. Для их использования вам не нужен SSR-фреймворк, такой как Next или Remix, хотя они также работают с серверными приложениями React. Благодаря этим функциям получение данных и формы становятся значительно проще для реализации в React. Однако создание отличного пользовательского опыта включает в себя интеграцию всех этих хуков, что может быть сложным. Почему эти функции появятся в React 19, а не в React 18.3? Похоже, что релиза 18.3 не будет, потому что эти функции включают в себя некоторые незначительные критические изменения. Когда выйдет React 19? Ожидаемого времени релиза пока нет, но все функции, упомянутые в этом посте, уже работают. Я бы пока не рекомендовал их использовать - использование канареечного релиза в продакшене не является хорошей идеей (даже если Next.js это сделает). Очень приятно видеть, что основная команда React работает над улучшением опыта разработки для всех разработчиков React, а не только для тех, кто работает над приложениями SSR. Кроме того, похоже, что они прислушиваются к отзывам сообщества - получение данных и обработка форм являются очень распространенными болевыми точками. По мотивам New client-side hooks coming to React 19

Frontend React React hooks

Как передать пропсы React компоненту

2 года назад·5 мин. на чтение

Компоненты React используют пропсы (props) для связи друг с другом. Каждый родительский компонент может передавать некоторую информацию своим дочерним компонентам, предоставляя им пропсы. Пропсы могут напоминать атрибуты HTML, но вы можете передавать через них любое значение JavaScript, включая объекты, массивы и функции.

Содержание туториала по React Компоненты React используют пропсы (props) для связи друг с другом. Каждый родительский компонент может передавать некоторую информацию своим дочерним компонентам, предоставляя им пропсы. Пропсы могут напоминать атрибуты HTML, но вы можете передавать через них любое значение JavaScript, включая объекты, массивы и функции.

Известные пропсы

Пропсы — это информация, которую вы передаете тегу JSX. Например, className, src, alt, width и height — вот некоторые пропсы, которые вы можете передать <img>:

function Avatar() {
  return (
    <img
      className="avatar"
      src="https://example.com/userpic.jpg"
      alt="Userpic"
      width={100}
      height={100}
    />
  );
}

export default function Profile() {
  return <Avatar />;
}

Пропсы, которые вы можете передать тегу <img>, предопределены (ReactDOM соответствует стандартам HTML). Но вы можете передать любые пропсы своим собственным компонентам, таким как <Avatar>, чтобы настроить их.

Передача пропсов в компонент

В этом коде компонент Profile не передает никаких пропсов своему дочернему компоненту Avatar:

export default function Profile() {
  return <Avatar />;
}

Вы можете передать в Avatar некоторые пропсы в два этапа.

Шаг 1: Передайте пропсы дочернему компоненту

Во-первых, передайте некоторые пропсы в Avatar. Например, давайте передадим два пропса: person (объект) и size (число):

export default function Profile() {
  return (
    <Avatar person={{ name: 'User Name 1', imageId: '12345' }} size={100} />
  );
}

Если двойные фигурные скобки после person= вас смущают, помните, что они являются просто объектом внутри фигурных скобок JSX. Теперь вы можете прочитать эти пропсы внутри компонента Avatar.

Шаг 2: Прочтите пропсы внутри дочернего компонента

Вы можете прочитать эти пропсы, указав их имена - person, size - разделенные запятыми внутри ({ и }) непосредственно после function Avatar. Это позволяет использовать их внутри кода Avatar, как если бы вы использовали переменную.

function Avatar({ person, size }) {
  // person и size можно здесь использовть
}

Добавьте немного логики в Avatar, которая использует пропсы person, size в отображении, и все готово. Теперь вы можете настроить Avatar для отображения разными способами с разными пропсы.

// utils.js

export function getImageUrl(person, size = 's') {
  return 'https://example.com/' + person.imageId + size + '.jpg';
}

// App.js

import { getImageUrl } from './utils.js';

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

export default function Profile() {
  return (
    <div>
      <Avatar
        size={100}
        person={{
          name: 'User Name 1',
          imageId: '12345',
        }}
      />
      <Avatar
        size={80}
        person={{
          name: 'User Name 2',
          imageId: '12346',
        }}
      />
      <Avatar
        size={50}
        person={{
          name: 'User Name 3',
          imageId: '12347',
        }}
      />
    </div>
  );
}

Пропсы позволяют вам думать о родительских и дочерних компонентах независимо друг от друга. Например, вы можете изменить пропсы person или size внутри Profile, не задумываясь о том, как Avatar их использует. Точно так же вы можете изменить то, как Avatar использует эти пропсы, не заглядывая в Profile. Вы можете думать о пропсах как о «ручках», которые вы можете регулировать. Они выполняют ту же роль, что и аргументы для функций — на самом деле пропсы являются единственным аргументом для вашего компонента. Функции компонента React принимают один аргумент, объект props:

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Обычно вам не нужен весь объект пропса, поэтому можно разбить его на отдельные пропсы. Не пропустите пару фигурных скобок { и } внутри ( и ) при объявлении пропсов:

function Avatar({ person, size }) {
  // ...
}

Этот синтаксис называется «деструктурированием» и эквивалентен чтению свойств из параметра функции:

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Как указать значения по умолчанию для пропса

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

function Avatar({ person, size = 100 }) {
  // ...
}

Теперь, если в <Avatar person={...} /> передан пропс size, размер будет установлен на 100. Значение по умолчанию используется только в том случае, если параметр size отсутствует или если вы передаете size={undefined}. Но если вы передадите size={null} или size={0}, значение по умолчанию не будет использоваться.

Перенаправление пропсов с синтаксисом распыления JSX

Иногда отправка пропсов повторяется:

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

В повторяющемся коде нет ничего плохого. Но иногда хочется сделать код короче. Некоторые компоненты передают все свои пропсы своим дочерним компонентам, например, как Profile делает с Avatar. Поскольку они не используют никакие свои пропсы напрямую, может иметь смысл использовать более краткий синтаксис распыления (spread):

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

Это пример перенаправления всех пропсов Profile в Avatar без перечисления каждого из их имен. Используйте расширенный синтаксис с ограничениями. Если вы используете его в каждом компоненте - значит что-то не так. Часто это указывает на то, что следует разделить компоненты и передать дочерние компоненты как JSX. Подробнее об этом далее.

Передача JSX в качестве дочернего компонента

Обычно встроенные теги браузера вкладывают друг в друга:

<div>
  <img />
</div>

Иногда вы захотите вложить свои собственные компоненты таким же образом:

<Card>
  <Avatar />
</Card>

Когда вы вкладываете контент в тег JSX, родительский компонент получит этот контент в просе, называемом children. Например, компонент Card ниже получит проп children, который является <Avatar />, и отобразит его в обертке div:

// App.js

import Avatar from './Avatar.js';

function Card({ children }) {
  return <div className="card">{children}</div>;
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{
          name: 'User Name',
          imageId: '12345',
        }}
      />
    </Card>
  );
}

// Avatar.jsx

import { getImageUrl } from './utils.js';

export default function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

// utils.js

export function getImageUrl(person, size = 's') {
  return 'https://example.com/' + person.imageId + size + '.jpg';
}

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

Как пропсы меняются со временем

Компонент Clock ниже получает два пропса от своего родительского компонента: color и time. (Код родительского компонента опущен, поскольку он использует состояние, в которое мы пока не будем углубляться.)

export default function Clock({ color, time }) {
  return <h1 style={{ color: color }}>{time}</h1>;
}

Этот пример иллюстрирует, что компонент может получать пропсы с течением времени. Проп не всегда статичен. Здесь проп time меняется каждую секунду, а проп color меняется, когда вы выбираете другой цвет. Пропсы отражают данные компонента в любой момент времени, а не только в начале. Пропсы иммутабельны — термин из информатики, означающий «неизменяемый». Когда компоненту необходимо изменить свои пропсы (например, в ответ на взаимодействие с пользователем или новые данные), ему придется «попросить» родительский компонент передать ему другие пропсы — новый объект. Затем его старые пропсы будут отброшены, и в конечном итоге движок JavaScript очистит занятую ими память. Не пытайтесь "изменить пропсы" напрямую. Когда вам нужно отреагировать на пользовательский ввод (например, изменить выбранный цвет), вам нужно будет "установить состояние", о котором вы можете узнать в разделе "Состояние - память компонента".

Резюме

Чтобы передать пропсы, добавьте их в JSX, как и в случае с атрибутами HTML.
Чтобы прочитать пропсы, используйте синтаксис деструктурирования function Avatar({ person, size }).
Вы можете указать значение по умолчанию, например size = 100, которое используется для отсутствующих и неопределенных пропсов.
Вы можете перенаправить все пропсы с помощью синтаксиса распыления JSX <Avatar {...props} />, но не злоупотребляйте им.
Вложенный JSX, такой как <Card><Avatar /></Card>, будет отображаться как проп children компонента Card.
Пропсы - доступны только для чтения. Это такой снимок компонента во времени: каждый рендер получает новую версию пропса.
Нельзя менять пропсы внутри компонента. Когда вам нужна интерактивность, вам нужно установить состояние.

Frontend React Туториал по React