Проверка кода React‑компонента App

Условие

Необходимо выполнить ревью React‑компонента. Оценить правильность вывода информации, корректность использования свойства key, порядок сортировки данных и возможные места для оптимизации.

import "./styles.css";
import { Person } from "./Person";
import { useEffect, useState } from "react";

const people = [
  {
    id: 2,
    name: "Виктор",
    lastName: "Вью",
    age: 26,
  },
  {
    id: 3,
    name: "Константин",
    lastName: "Ангулрин",
    age: 20,
  },
  {
    id: 1,
    name: "Илия",
    lastName: "Реактова",
    age: 23,
  },
];

export default function App() {
  const now = new Date().toLocaleTimeString();
  const [currentTime, setCurrentTime] = useState(now);

  const personsList = people.map(({ name, lastName, id }) => (
    <Person key={id} name={name} lastName={lastName} id={id} />
  ));

  useEffect(() => {
    setInterval(() => setCurrentTime(new Date().toLocaleTimeString()), 1000);
  }, []);

  console.log("render App");

  return (
    <div className="App">
      Time: {now}
      {personsList}
    </div>
  );
}

Ответ

Нужно выводить currentTime и очищать интервал в эффекте. Key={id} уже корректен; сортировки в примере нет, порядок соответствует исходному массиву.

const [currentTime, setCurrentTime] = useState(() => new Date().toLocaleTimeString());
useEffect(() => {
  const timer = setInterval(() => setCurrentTime(new Date().toLocaleTimeString()), 1000);
  return () => clearInterval(timer);
}, []);

В JSX замените now на currentTime. Если нужна сортировка по ID, используйте [...people].sort((a,b) => a.id-b.id). Чтобы часы не обновляли весь список, вынесите их в отдельный компонент; не добавляйте мемоизацию без нужды.