0xD34F

const date = new Date(str.replace(/\S+/, m => m.split('.').reverse().join('-')));

или

const date = new Date(str.replace(/(\d+)\.(\d+)\.(\d+)/, '$3-$2-$1'));

или

const [ day, month, year, hours, minutes, seconds ] = str.split(/\D/);
const date = new Date(year, month - 1, day, hours, minutes, seconds);

или (day.js):

const date = dayjs(str, 'DD.MM.YYYY HH:mm:ss').toDate();

function sort([...arr]) {
  const max = arr.reduce((max, n) => max?.population > n.population ? max : n, null);
  return arr.sort((a, b) => a === max ? -1 : b === max ? 1 : a.city.localeCompare(b.city));
}

О каком классе идёт речь: const className = 'model';

Как получить элементы:

const elements = document.querySelectorAll(`.${className}`);
// или
const elements = document.getElementsByClassName(className);

Как извлечь из элемента его текст:

const getText = el => el.textContent;
// или
const getText = el => el.innerText;
// или (т.к. вложенных элементов нет, это тоже сработает как надо)
const getText = el => el.innerHTML;

Перебираем элементы, достаём тексты, склеиваем:

const result = Array.from(elements, getText).join(', ');

// или

const result = ''.concat(...[...elements].flatMap((n, i) => (
  n = getText(n),
  i ? [ ', ', n ] : n
)));

// или

const result = Array.prototype.reduce.call(
  elements,
  (acc, n, i) => acc + (i ? ', ' : '') + getText(n),
  ''
);

Вот reduce:

const { x: countX = 0, o: countO = 0 } = Array
  .from(str.toLowerCase())
  .reduce((acc, n) => (acc[n] = (acc[n] ?? 0) + 1, acc), {});

А вот ещё короче без reduce'а:

const [ countX, countO ] = [ /x/i, /o/i ].map(n => ~-str.split(n).length);

почему-то в данные изменение попадает только после nextTick'а (т.е. когда что-то побуждает родительский компонент перерисоваться)

Да ну? А как вы это проверяли? По внешнему виду компонента? Вдруг обновление данных всё-таки происходит, а вот связанный с ним (обновлением) последующий рендеринг компонента - нет? Такое бывает.

$ids = array_unique(array_column($arr, 'user_id'));
$result = array_filter($arr2, fn($n) => !in_array($n['users_id'], $ids));

options: {
  interaction: {
    mode: 'index',
    position: 'nearest',
  },
},

https://jsfiddle.net/umj0r6fk/

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

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

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 obj = arr.flat().reduce((max, n) => max?.age > n.age ? max : n, null);

Второе:

const val = Math.max(...arr.flat().map(n => n.age));

Кстати, а что если максимум представлен в нескольких экземплярах? Можно получить все такие объекты:

const objs = arr.reduce((acc, n) => (
  n.forEach(m => (
    m.age > acc[0] && (acc = [ m.age, [] ]),
    m.age === acc[0] && acc[1].push(m)
  )),
  acc
), [ -Infinity, [] ])[1];

Собираем ключ-значение, выдёргиваем значения:

[...new Map(arr.map(n => [ n.value, n ])).values()]

// или

Object.values(arr.reduce((acc, n) => (acc[n.value] ??= n, acc), {}))

Фильтрация, запоминаем кого встретили, первый раз пропускаем, остальные нет:

arr.filter(function(n) {
  return !(this[n.value] = this.hasOwnProperty(n.value));
}.bind({}))

// или

arr.filter(function({ value }) {
  return !this.set(value, this.has(value)).get(value);
}, new Map)

// или

arr.filter(((picked, { value: n }) => !picked.has(n) && picked.add(n)).bind(null, new Set))

Фильтрация, ищем элемент похожий на текущий, его же и нашли - окей:

arr.filter((n, i, a) => n === a.find(m => m.value === n.value))

// или

arr.filter((n, i, a) => i === a.findIndex(m => Object.is(m.value, n.value)))

Ну и чего-нибудь странного ещё добавим:

Array.from(
  new Set(arr.map(n => n.value)),
  n => arr.find(m => m.value === n)
)

// или

arr
  .slice()
  .sort((a, b) => a.value.localeCompare(b.value))
  .filter((n, i, a) => n.value !== a[i - 1]?.value)

Собрать новый массив:

const newArr = Array
  .from(arr.reduce((acc, n) => acc.set(n, (acc.get(n) ?? 0) + 1), new Map))
  .filter(n => n[1] === 1)
  .map(n => n[0]);

Обновить существующий:

arr.splice(0, arr.length, ...Array
  .from(arr.reduce((acc, n) => acc.set(n, acc.has(n)), new Map))
  .reduce((acc, n) => (n[1] || acc.push(n[0]), acc), [])
);

Знаю, что можно сделать с помощью split и прочими способами,...

Если знаете - почему не показали? Никакой split не нужен:

str.slice(0, -3).replace(',', '')

Конечно, если очень хочется, то нет проблем его использовать:

str.split(':', 2).join(':').split(',').join('')

...но нужно элегантное решение

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

str.replace(/,|.{3}$/g, '')

Но вообще, регулярные выражения - это не синоним элегантного решения:

str.replace(/(\d+.\d+.\d+)..(\d+.\d+).*/, '$1 $2')

Math.max(0, ...arr.reduce((acc, n, i, a) => (
  n !== a[i - 1] && acc.push(0),
  acc[acc.length - 1]++,
  acc
), []))

или

arr.reduce((acc, n, i, a) => (
  n !== a[~-i] && (acc[1] = 0),
  acc[0] = acc[+(++acc[1] > acc[0])],
  acc
), [ 0, 0 ])[0]

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

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/

Собрать новый массив:

const newArr = arr.filter((n, i, a) => !i || a[i - 1] !== n);

Удалить из существующего массива:

let numDeleted = 0;

for (let i = 0, prev = !arr[0]; i < arr.length; prev = arr[i++]) {
  arr[i - numDeleted] = arr[i];
  numDeleted += arr[i] === prev;
}

arr.length -= numDeleted;

или

for (let i = arr.length; --i > 0;) {
  if (arr[i] === arr[i - 1]) {
    arr.splice(i, 1);
  }
}

или

arr.reduceRight((_, n, i, a) => i && n === a[i - 1] && a.splice(i, 1), null);

или

arr.splice(0, arr.length, ...arr.filter((n, i, a) => !i || a[i - 1] !== n));

Object.values(arr.reduce((acc, { category, ...n }) => (
  (acc[category.id] ??= { ...category, tanks: [] }).tanks.push(n),
  acc
), {}))

Сортируем существующий массив:

function sort(arr, order, key = n => n) {
  const positions = new Map(order.map((n, i) => [ n, i ]));
  const getPosition = n => positions.get(key(n)) ?? Number.MAX_SAFE_INTEGER;

  return arr.sort((a, b) => getPosition(a) - getPosition(b));
}

Собираем отсортированный новый:

function sorted(arr, order, key = n => n) {
  const ordered = new Map(order.map(n => [ n, [] ]));
  const unordered = [];

  arr.forEach(n => (ordered.get(key(n)) ?? unordered).push(n));

  return [].concat(...ordered.values(), unordered);
}

Примеры использования:

a1 = [ '999', '290', '999', '222', '333', '987', '309', '666', '999' ];
a2 = [ '999', '222', '666' ];
sorted(a1, a2) // [ '999', '999', '999', '222', '666', '290', '333', '987', '309' ]


a1 = [ 12, 34, 6, 2, 55, 523, 23, 333, 16, 51 ];
a2 = [ 3, 5, 2 ];
sorted(a1, a2, n => +`${n}`[0]) // [ 34, 333, 55, 523, 51, 2, 23, 12, 6, 16 ]


a1 = [ 666, 'xxx', () => [], true, 1, () => null, false, 'aaa', [0] ];
a2 = [ 'boolean', 'string', 'function' ];
sort(a1, a2, n => typeof n);
a1 // [ true, false, 'xxx', 'aaa', () => [], () => null, 666, 1, [ 0 ] ]

.active {
  background: red;
}

document.querySelector('table').addEventListener('change', ({ target: t }) => {
  t.closest('tr').classList.toggle('active', t.checked);
});

// или

document.querySelectorAll('table tr').forEach(function(n) {
  n.addEventListener('change', this);
}, e => e.currentTarget.classList.toggle('active', e.target.checked));

UPD. Наконец-то дождались, js теперь тут не нужен:

tr:has(.form-check-input:checked) {
  background: red;
}