How to speed up rendering after changing input?

Question

React

Hello. My project is slowing down due to changing inputs. I, as expected, hung up an event handler so that after each change in value in input, dispatch was called and the new value was transferred to state, and then displayed. How is changing input fields usually optimized in React projects?

I have a number of input fields generated on the page. Because I don't know how many inputs there will be, I don't use useRef(). How important is it to use the useRef() hook for input fields?

Do I need to use the bind() method when passing dispatch via props?

And in general, did I adequately implement the scheme for changing the value in the input, or is it shit code?
I decided not to use Redux, since the project is not very large.
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)} />

I posted only the most important part of the code. If this is not enough, then I can lay out most of the project in the sandbox.

Answer 1

Look into useMemo() , useCallback() , and the HOC of the memo component for rendering optimizations. I advise you to use react-hook-select for forms, there are no extra renders when editing inputs, and the library itself is very easy to learn.