0xD34F

<Swiper>
  {children.map(n => <SwiperSlide>{n}</SwiperSlide>)}
</Swiper>

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

А может, всё-таки рендерится? Значение link не обновляется при изменении props.link, так что эффект не срабатывает - отсюда отсутствие внешних изменений при повторных рендерингах.

Уберите link, он вам тут не нужен, используйте в эффекте сразу props.link:

React.useEffect(() => {
  fetch(props.link)
    .then(r => r.json())
    .then(setItems);
}, [ props.link ]);

const [ sort, setSort ] = useState(false);

const sorted = useMemo(() => {
  return [...data].sort((a, b) => {
    return a.name.localeCompare(b.name) * (sort ? -1 : 1);
  });
}, [ sort ]);

<button onClick={() => setSort(sort => !sort)}>Сортировать</button>

Отфильтровать данные с использованием введённой пользователем строки:

const filteredPeople = people.filter(n => n.name.includes(searchFilter));

Использовать для рендеринга результат фильтрации вместо полных данных:

<ul className="list-group">
  {filteredPeople.map(n => (
    ...

Всё как обычно. Container принимает className и добавляет его элементу.

Храните значения, отвечающие за цвет текста, в родительском компоненте, можно вместе с остальными данными:

const [ items, setItems ] = useState([
  { id: ..., text: '...', active: false },
  { id: ..., text: '...', active: false },
  ...
]);

Тогда сброс этих значений оказывается делом тривиальным:

const reset = () => setItems(items.map(n => ({ ...n, active: false })));

<button onClick={reset}>reset</button>

Ну а переключение значений изнутри экземпляров компонента Text придётся переписать. Сделаем функцию, которая принимает id, и изменяет соответствующий элемент:

const toggle = id => setItems(items.map(n => n.id === id ? { ...n, active: !n.active } : n));

Передадим эту функцию в экземпляры компонента Text:

{items.map(n => <Text key={n.id} {...n} toggle={toggle} />)}

Назначим её в качестве обработчика клика:

const Text = ({ id, text, active, toggle }) => (
  <p
    className={active ? 'active' : ''}
    onClick={() => toggle(id)}
  >
    {text}
  </p>
);

Всё.

Самый простой способ - перенести вызов setIsDeleted из finally в catch.

Понимаю, что это как-то связано с преждевременным размонтированием компонента перед завершением api запроса.

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

смотрел документацию к компоненту, но...

плохо смотрели

Select в качестве value принимает объект, массив объектов или null, а вы ему строку пытаетесь подсовывать (свойство value элемента массива options). Храните в качестве выбранных значений объекты, в обработчике события onChange не надо выдёргивать value из первого параметра, сохраняйте его целиком; или внутри CustomSelect выполняйте поиск нужного option'а по его value и передавайте найденное (или null, если поиск результатов не дал) в Select вместо строкового значения, получаемого из родительского компонента.

https://stackblitz.com/edit/react-ujjfee?file=src%...

айдишник удаляемой строки это сугубо системная информация, никак не влияющая на отображение

Почему же, запросто может влиять:

const [ delId, setDelId ] = useState(null);

<button onClick={() => setDelId(row.id)}>Delete

<Modal isVisible={!!delId}>

<button onClick={() => setDelId(null)}>Close

Ну а вообще, useRef вам в помощь:

The useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class.

Описываете варианты сортировки - имя свойства плюс его тип:

const sortOptions = [
  { key: '...', type: '...' },
  { key: '...', type: '...' },
  ...
];

Делаете функции сортировки, кладёте их в объект, ключами будут имена типов данных (значения свойства type из массива sortOptions):

const sortFunctions = {
  type1: (a, b) => ...,
  type2: (a, b) => ...,
  ...
};

На основе массива с вариантами сортировки собираете select:

const [ sortIndex, setSortIndex ] = useState(0);
const onSortChange = e => setSortIndex(+e.target.value);

<select value={sortIndex} onChange={onSortChange}>
  {sortOptions.map((n, i) => <option value={i}>{n.key}</option>)}
</select>

Сортируете свои данные:

const sortedItems = useMemo(() => {
  const { key, type } = sortOptions[sortIndex];
  const f = sortFunctions[type];
  return [...items].sort((a, b) => f(a[key], b[key]));
}, [ items, sortIndex, sortFunctions ]);

https://jsfiddle.net/gfer4p1y/

Изучаю React по видеокурсу на YouTube

Изучение принято начинать с документации.

написал код символ в символ, как на видео, перепроверил с примером в репозитории учителя, но у меня не работает анимация

Этому видео два с половиной года. Как думаете, могли ли за это время случиться какие-то изменения в используемой библиотеке? Такие, что клиентский код, ранее бывший рабочим, стал делать что-то не то. Я лично думаю, что могли.

The prop `timeout` is marked as required in `CSSTransition`, but its value is `undefined`

Что тут непонятного? Отсутствует, должен быть - ну так добавьте.

И, конечно, никакой TransitionGroup для того, что вы пытаетесь сделать, не нужен. Вместо

<TransitionGroup>
  {isLogoVisible && (
    <CSSTransition classNames="option">
      ...

пусть будет

<CSSTransition in={isLogoVisible} unmountOnExit timeout={2000} classNames="option">
  ...

function Switch({ options, value, onChange }) {
  const highlight = useRef();

  useEffect(() => {
    const activeButton = highlight.current.closest('.c-switch').querySelector('.is-active');
    highlight.current.style.width = `${activeButton?.offsetWidth ?? 0}px`;
    highlight.current.style.transform = `translateX(${activeButton?.offsetLeft ?? 0}px)`;
  }, [ value ]);

  return (
    <div className="c-switch">
      <div className="c-switch__highlight" ref={highlight}></div>
      {options.map(n => (
        <button
          key={n.value}
          className={n.value === value ? 'is-active' : ''}
          onClick={() => onChange(n.value)}
        >{n.text}</button>
      ))}
    </div>
  );
}

https://jsfiddle.net/4hbkm9e8/

Интересно, а что имеет сказать документация по поводу функции обновления состояния? Да вот что:

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

Ничего оборачивать не надо.

На время загрузки данных вы уничтожаете компонент пагинации, соответственно, при каждом изменении страницы он создаётся заново - поэтому его внутреннее значение текущей страницы постоянно оказывается дефолтным.

Явно указывайте компоненту пагинации, какую страницу считать текущей (forcePage={currentPage}).

Уберите +1 из обработчика выбора страницы, добавляйте единицу при запросе (проще подправлять значение текущей страницы в одном месте, чем в двух - так бы пришлось ещё и -1 делать при указании страницы компоненту пагинации).

И в чём проблема? Компонент пагинации, в котором доступна текущая страница и метод её изменения у вас уже есть. Осталось нарисовать две кнопки, которые будут вызывать onPageChange с page - 1 и page + 1.

Дичь какая-то - зачем вам хранить количество минут и часов? Достаточно секунд (да, их будет не 0-59, а сколько угодно), минуты и часы вычисляются, если нужны.

сбрасывается на 0 и начинает отсчет с предыдущего состояния

Что неудивительно - метод run работает с "несброшенными" данными. Чтобы иметь доступ к актуальному состоянию, используйте функциональное обновление.

При поиске надо получить данные пользователя - оттуда достаёте количество репозиториев (свойство public_repos), вычисляете количество страниц.

Добавляете эффект на изменение настроек пагинации - там выполняете загрузку информации о репозиториях.

https://codesandbox.io/s/for-httpsqnahabrcomq99469...