Почему onClick срабатывает два раза?

Question

[supkiler]

const Button = ({info,id}) =>{
    const btn = (id) =>{
      console.log(id)
        let newtodo = [...todo].map(item => {
          if(item[0] == id){
            item[6] = !item[6]
            console.log(item[6])
          }
          return item;
        })
        setTodo(newtodo)
    }
    // console.log(info,min , id ,sec)
    return (
      <button className={`icon ${info ? 'icon-play' : 'icon-pause'}`}
      onClick={ () =>{btn(id)}} ></button>
    )
}

info это значение true или false
при клике значение должно менятся
оно меняется , но почему то onClick срабатывает два раза

Answer 1

[Pasha]

В React 18 при использовании режима Strict Mode компонент монтируется дважды в development среде - это ожидаемое поведение для выявления потенциальных проблем.

Вот несколько решений:
Самое простое - убрать StrictMode в index.js:

ReactDOM.createRoot(document.getElementById('root')).render(
  <App />
);

Лучшее решение - оставить StrictMode и оптимизировать компонент с помощью useCallback:

const Button = ({info, id}) => {
  const btn = useCallback((id) => {
    setTodo(prevTodo => prevTodo.map(item => {
      if(item[0] === id) {
        return [...item.slice(0,6), !item[6], ...item.slice(7)];
      }
      return item;
    }));
  }, []);

  return (
    <button 
      className={`icon ${info ? 'icon-play' : 'icon-pause'}`}
      onClick={() => btn(id)}
    />
  );
}