Как декомпозировать логику формы React?

Question

[JavaSscriptNoob]

Всем привет , у меня есть форма которая содержит инпуты , всё управление состоянием находится в этой форме , поэтому на ввод в любом инпуте будет ре-рендерится вся форма . Хотелось бы узнать как можно переписать ( декомпозировать логику ) работы компонентов что бы на ввод в одном инпуте ре-рендерился он и только он . Был вариант вынести изм. состояния инпутов в компонент <InputItem/> но тогда родительская форма не будет знать какие данные там находятся . Знаю вариант с исп. Context.API но как то не хочется к нему прибегать . Может есть другие варианты ? Спасибо .

const RegistrationForm = () => {
  const [password, setPass] = useState("");
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [surName, setSurName] = useState("");
  const dispatch = useDispatch();
  const navigator = useNavigate();
  const columns = [
    {
      value: email,
      onChangeEvent: setEmail,
      type: "text",
      className: "form-control",
      id: "floatingInput",
      placeholder: "[e-mail]",
      label: "enter your e-mail",
    },
    {
      value: name,
      onChangeEvent: setName,
      type: "text",
      className: "form-control",
      id: "floatingInput",
      placeholder: "your first name",
      label: "your first name",
    },
    {
      value: surName,
      onChangeEvent: setSurName,
      type: "text",
      className: "form-control",
      id: "floatingInput",
      placeholder: "your last name",
      label: "your last name",
    },
    {
      onChangeEvent: setPass,
      value: password,
      type: "password",
      className: "form-control",
      id: "floatingPassword",
      placeholder: "Password",
      label: "Password",
    },
  ];
  return (
    <main className='form-signin text-center d-flex justify-content-center'>
      <form className='col-6'>
        <h1 className='h3 mb-3 fw-normal'>Please sign up</h1>
        {columns.map((column) => {
          return (
            <InputItem
              onChangeEvent={column.onChangeEvent}
              value={column.value}
              type={column.type}
              className={column.className}
              id={column.id}
              placeholder={column.placeholder}
              label={column.label}
            />
          );
        })}
        <button
          className='w-100 btn btn-lg btn-primary'
          type='submit'
          onClick={(e) => {
            e.preventDefault();
            dispatch(userRegistation({ email, password, name, surName }));
            setPass("");
            setEmail("");
            setName("");
            setSurName("");
            navigator("/login");
          }}>
          Sign up
        </button>
      </form>
    </main>
  );
};
export default RegistrationForm;

Answer 1

[insighter]

Можно вручную работать с инпутом.

const inputRef = useRef();

useEffect(()={
  const inputEl = inputRef.current;
  inputEl.value = "initial value";
  ...
  inputEl.addEventListenter("change", handleChange)
  return () => inputEl.removeEventListenter("change", handleChange);
});

return (
  ...
  <input ref={inputRef} ...
);

Это набросок, его надо адаптировать под вашу задачу

Comments

[JavaSscriptNoob]

понял , спасибо . получается если будет 5 инпутов то нужно будет создавать 5 рефов на них ?

[insighter]

JavaSscriptNoob, не обязательно, лучше даже создать реф на форму и доступ к инпутам получать через селекторы

[JavaSscriptNoob]

insighter, понял спасибо . через часик отмечу решённым :)

[Kataev]

Перед этим я бы посоветовал почитать когда нужно использовать рефы https://ru.reactjs.org/docs/refs-and-the-dom.html

[insighter]

JavaSscriptNoob, вот код на JS который реагирует на изменение любого инпута на родителе

function handleChange(e){
  console.log("here" + e.target.value);
}

const div = document.getElementById("root");
div.addEventListener("change", handleChange);

httml:

<div id="root">
  <input>   <input>   <input> 
</div>

[insighter]

Kataev, а конкретнее можно, что не так?

[Kataev]

insighter, можно.




В данном случае ref будет использоваться не как контейнер для хранения не мутируемого состояния, а как обращение к DOM дереву, что влияет на производительность куда больше, чем отсутствие или присутствие мемоизации - которая применяется именно для таких случаев.

[insighter]

JavaSscriptNoob, я подправил ответ, внутри хука лучше сначала сохранять ссылку на элемент, чтобы она же была доступна при вызове функции removeEventListener
Это рекомендация линтера

[insighter]

Kataev,
1. для меня инпуты стоят отдельно от других элементов
2. последний пункт, что вы процитровали противоречит природе инпута, который рендерится при каждом изменении значения
3. https://ru.reactjs.org/docs/uncontrolled-component...

[Kataev]

insighter, не противоречит, просто управление их состоянием поднято выше, на уровень формы, потому, когда инпут меняет свое состояние - он перерендерится. А т.к. состояние находится на уровне формы, то при использовании setState формы - все дочерние компоненты формы перерисовываются, для возможности оптимизации такого поведения - разработчики добавили возможность мемоизации, например, useMemo, т.к. инпут меняя именно свой пропс - перерендерится, но не заставит это делать "соседа".

[Kataev]

insighter, Пример НЕ управляемого компонента:

const InputElement = (props) => <input value='' onChange={props.setState} />

т.к. значение атрибута value - не управляется никаким состоянием.

[insighter]

Kataev, давайте так, ваш вариант рабочий и может даже ближе к тому как рекомендуют разработчики Реакта.
Мне не нравится реализация onChange у самого Реакта, событие при котором на каждом нажатии клавиши идет повторный рендер всего компонента. При таком поведении обворачивать каждый инпут в useMemo ну как то не очень идея.

[Kataev]

insighter, давайте)

Answer 2

[Kataev]

Мемоизировать компоненты формы с помощью React.memo. Тогда они будут ререндериться только если изменятся именно их пропсы.
https://ru.reactjs.org/docs/react-api.html#reactmemo

Comments

[JavaSscriptNoob]

других вариантов нету ? и стоит ли юзать React.memo ради таких вроде как не сильно портящих произв. операций ? слышал React.memo сам по себе требует не мало ресурсов.

[Kataev]

JavaSscriptNoob, Все зависит от формы, если это гарантировано 2 инпута - то, вероятно, в этом нет необходимости. Но, как правило, один компонент InputElement используется в большинстве форм приложения, потому его мемоизируют, т.к. формы могут быть и большими еще и с разной валидацией форм.

[JavaSscriptNoob]

Kataev, понял спасибо . через часик отмечу решённым :)