=> {
setState({
...state,
[e.currentTarget.name]: e.currentTarget.value
});
};const onType = e => {
setState({
...state,
[e.currentTarget.name]: e.currentTarget.value
});
};
есть банальный хендлер на он чейндж
const [state, setState] = React.useState<State>({
originLabel: !!route ? route.origin.label : '',
originAdress: '',
originCoords: null,
destinationLabel: !!route ? route.origin.label : '',
destinationAdress: '',
destiantionCoords: null
});
есть банальный стейт формы
<input
disabled={!!route}
ref={originEl}
name="originAdress"
placeholder="Address"
type="text"
onChange={React.useCallback(onType, [state.originAdress])}
/>
есть банальный инпут в котором я говорю
onChange={React.useCallback(onType, [state.originLabel])}
```и у меня один хуй когда я ввожу чето в одно из полей формы, перерендеривается все…
хотя сверху обмазал React.memo
че я делаю не так?
как добится того, типа я ввожу что то в форму и перерендериваеца только одна. а не все
Для начало очень и очень плохо инлайнить вызов useCallback, если у вас будет conditional отображение компонентов, то могут нарушиться Rules of Hooks
Не видно value свойства что-то у input, у вас controlled или uncontrolled инпут в итоге?
Видеть бы больше кода, а так не понятно что Все у вас перерендеревивается
вроде onChange={React.useCallback(onType, [state.originAdress])} вообще не законно. Все хуки должны быть объевлены в начале
Обсуждают сегодня