Обнаружить и исправить баги в React‑компоненте

Условие

В этом задании представлен React‑компонент, содержащий ряд синтаксических и логических ошибок. Требуется выявить их и предложить корректный вариант кода.

 import React from 'react';

const PleaseRevIewMe = () -> {
    const [count, setCount] = React.useState(1);
    const [items, setItems] = React.useState([{ id: 1 }]);

    React.useLayoutEffect(() -> {
    document.addEventListener('click', () => {
    setInterval(() => console.log(count), 1000);
    });
    }

    const click = React.useCallback(() => {
    setCountCount + 1);
    setItems([...items, { id: count + 1 }]);
    });

    return (
    <React.Fragment>
    Current count: {count}
    <ul>
    {items.map((item) => {
    <li>{{item.id}</li>
    });
    </ul>
    <button onClick={() => click()}>add one</button>
    </React.Fragment>
});

export default PleaseRevIewMe;

Ответ

Нужно исправить синтаксис стрелок и JSX, возврат элементов map, обновление state и очистку подписки с таймером. Исходник создаёт интервалы без удаления.

Ниже первый клик запускает один логирующий интервал, последующие не создают дополнительные:

function PleaseReviewMe() {
  const [items, setItems] = React.useState([{ id: 1 }]);
  const nextId = React.useRef(2);
  const count = items.length;
  const latest = React.useRef(count);
  React.useEffect(() => { latest.current = count; }, [count]);
  React.useEffect(() => {
    let timer;
    const start = () => {
      if (timer === undefined) timer = setInterval(() => console.log(latest.current), 1000);
    };
    document.addEventListener('click', start);
    return () => { document.removeEventListener('click', start); clearInterval(timer); };
  }, []);
  function add() {
    const item = { id: nextId.current++ };
    setItems(current => [...current, item]);
  }
  return <>Current count: {count}
    <ul>{items.map(item => <li key={item.id}>{item.id}</li>)}</ul>
    <button onClick={add}>add one</button>
  </>;
}

Count выведен из списка. Если нужна другая семантика логирования, её следует уточнить; размножение таймеров сохранять не нужно.