Всем привет. У меня притормаживает проект из-за изменения input'ов. Я, как полагается, повесил обработчик событий, чтобы после каждого изменения value в input, вызывался dispatch и новое value передавалось в state, а затем отображалось. Как обычно оптимизируется изменение полей ввода в React-проектах?
У меня на странице генерируется некоторое число полей ввода. Из-за того, что я не знаю, сколько будет input'ов, я не использую useRef(). На сколько вообще важно использовать хук useRef() для полей ввода?
Нужно ли использовать метод bind(), при передаче dispatch через props?
И вообще, адекватно ли я реализовал схему изменения value в input или это говнокод?
Redux решил не использовать, так как проект не очень большой.
App.js:
const initialState = { text: [] } // это написано вне App.js.
const reducer = (textarea, action) => {
let arr = textarea.text // массив text содержит объекты типа: { id: 0, string: 'string' }
let index = 0
switch (action.type) {
case 'change':
index = arr.findIndex(n => n.id === action.id)
arr[index].string = action.value
return { text: arr }
default:
console.log('Error')
}
}
const App = () => {
const [textarea, dispatch] = useReducer(reducer, initialState)
}
{textarea.text.map(data =>
<Textarea key={data.id} string={data.string} id={data.id} dispatch={dispatch} />
)}
Textarea.js:
const change = ({ value, id }) => {
props.dispatch({ type: 'change', id: Number(id), value: value })
}
<textarea id={props.id} value={props.string} onChange={(e) => change(e.target)} />
Выложил только самую важную часть кода. Если этого будет недостаточно, то могу выложить бОльшую часть проекта в песочницу.
Простой