Как меняется порядок элементов списка в React после клика по кнопке

Условие

Нужно понять, как будет изменён порядок отрисованных элементов в DOM после того, как пользователь нажмёт кнопку, учитывая работу хука useState и применение метода reverse к массиву.

import React, { useState } from 'react';

function SimpleList(props) {
  const [list, setList] = useState(props.list || ['a', 'b']);
  const rotateList = () => {
    setList([...list.reverse()]);
  };

  return (
    <div>
      {list.map((txt, id) => {
        return <div key={id}>{txt}</div>;
      })}
      <button onClick={rotateList}>rotate</button>
    </div>
  );
}

Ответ

При исходном ['a','b'] после клика отображение станет ['b','a']. Но reverse сначала мутирует исходный state, и только затем spread создаёт новый массив.

Исправьте на setList(current => [...current].reverse()). Если state был инициализирован props.list, исходная мутация могла затронуть и массив родителя. Индексные key сохраняют идентичность по позиции, а не по элементу; для записей используйте устойчивые ID. Для двух уникальных строк допустим key={txt}.