How to speed up rendering after changing input?

  • 0
    Hello everyone. My project slows down due to changes in inputs. I, as expected, hung up an event handler so that after every value change in input, dispatch is called and the new value is passed to state and then displayed. How is changing input fields usually optimized in React projects?

    A certain number of input fields are generated on my page. Due to the fact that I do not know how many inputs there will be, I do not 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 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 put most of the project in the sandbox.
    React Anonymous, Oct 6, 2019

  • 1 Answers
  • 0
    Take a look at the useMemo (), useCallback () and memo HOCs for optimizing renders. I advise you to use react-hook-select for forms, there, when editing inputs, there are no unnecessary renders and the library itself is very easy to learn.
    Adalyn Bowers

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!