Правильная ли реализация паттерна Switch event на хуках useState?

Question

[KIberWarriorJs]

Всем привет , совсем недавно познакомился с реакт паттерном "Event switch" , и написал его реализацию в моём понимании . В моём случае это обычная форма с инпутами , но при изм. текст в одном инпуте весь компонент ре-рендерится весь комп. BasicForm , хотелось бы узнать правильное ли это поведение и можно ли как нибудь это улучшить ?

export default function BasicForm({ type, fields }: IBasicFormProps) {
  const [inputState, setInputState] = useState({
    title: "",
    description: "",
  });
  const handleChange = (e: any) => {
    const type = e.target.name;
    switch (type) {
      case "title":
        return setInputState({
          ...inputState,
          [e.target.name]: e.target.value,
        });
      case "description":
        return setInputState({
          ...inputState,
          [e.target.name]: e.target.value,
        });
      default:
        return console.warn(`No case for event type "${type}"`);
    }
  };
  const renderBasicForm = (type: string): JSX.Element => {
    switch (type) {
      case CREATE_ITEM_FORM:
        return (
          <Box>
            {fields.map((inputField: any, i) => {
              return (
                <InputItem
                  type={inputField.type}
                  placeholder={inputField.description}
                  value={inputState}
                  onChangeEvent={handleChange}
                  label={inputField.label}
                  name={inputField.name}
                />
              );
            })}
          </Box>
        );
      default:
        <div>There is no data to display</div>;
    }
  };
  return <div>{renderBasicForm(type)}</div>;
}

Comments

[WbICHA]

Найди 10 отличий.

handleEvent({type}) {
  switch(type) {
    case "click":
      return require("./actions/doStuff")(/* action dates */)
    case "mouseenter":
      return this.setState({ hovered: true })
    case "mouseleave":
      return this.setState({ hovered: false })
    default:
      return console.warn(`No case for event type "${type}"`)
  }
}

[JavaSscriptNoob]

WbICHA, ну тут на классовых компонентах а у меня на хуках,поэтому и спрашиваю .. на хуках реализацию не нашёл к сожалению

[WbICHA]

JavaSscriptNoob, я, конечно, всё понимаю, но ты всерьёз кроме классовых компонентов (что вообще ни на что не влияет в данном случае) никаких отличий не увидел?
https://reactpatterns.com/#event-switch
Давай посмотрим что тут написано прямо над примером, который я привёл выше.

Consider writing a single event handler for your component and switching on event.type.

Осилишь перевести самостоятельно?

А теперь давай сравним, что ты передаёшь в свитч и что ты должен передавать.

[Alexandroppolus]

Замечу мимоходом, что ререндер всей формы никак не связан с "Event switch" и прочими изысками, а делается потому что у тебя форма - один компонент, и неважно, один там useState с объектом или несколько отдельных.

Самые простые способы избежать ререндера формы - либо использовать неуправляемые контролы и забирать с них данные например при отправке формы (это не совсем react-way), либо выносить контролы в отдельные компоненты и там самостоятельно взаимодействовать со стейт-манагером.

[JavaSscriptNoob]

WbICHA, нет я не понял . было бы супер если бы вы написали мне как тупому (таковым я и являюсь)