Как правильно изменять checkbox react?

Question

[miliko mikoyan]

Как лучше изменить checkbox.

вариант 1

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [x, setX] = useState(false);

  const soldCheckbox = ({ target: { checked } }) => {
    console.log(x, checked);
    setX(checked);
  };
  return (
    <div>
      <input type="checkbox" checked={x} onChange={soldCheckbox} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

вариант 2

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [x, setX] = useState(false);
  console.log(x);
  return (
    <div>
      <input type="checkbox" checked={x} onChange={() => setX(!x)} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

в принципе я не вижу разницы но просто хотел услышать другое мнение. Может что-нибудь я не знаю

Answer 1

[Алексей Николаев]

Самый лучший вариант - не использовать стейт. Вообще. Зачем он для чекбоксов? Это настолько раздуто и избыточно в 99% случаев, что хочется рвать волосенки на голове каждый раз, когда кто-то это использует. К счастью, React предоставляет uncontrolled inputs, чем я вам и рекомендую воспользоваться. Поскольку каждый раз, когда для таких компонентов используется стейт, означает, что данные сохраняются для последующей обработки, а последующая обработка в 99% случаев - отправка формы или иные ее события.

Но конечно, если при щелчку на чекбокс надлежит вызвать какое-то событие, без коллбэка не обойтись.

Answer 2

[Антон Спирин]

Первый вариант будет лучше если у вас форма и компонентов много. Можно обрабатывать все одним хандлером:

const handler = (e) => {
  const { target } = e;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const { name } = target;

  setForm( f => ({ ...f, [name]: value }));
};

Второй, если checkbox один и приложение должно как-то реагировать на его изменение. Но хандлер для лучшей читаемости, лучше вынести в переменную. Если это built-in компонент вроде input:

const handler = () => {
  setX(!x);
};

И если это кастомный компонент, то необходимо использовать useCallback, чтобы предотвратить лишние перерисовки:

const handler = useCallback(() => {
  setX(!x);
}, []);

Ну и неконтролируемые компоненты, упомянутые Алексей Николаев, в ряде кейсов могут быть очень удобны.