React input onChange lag
This might seem like a trivial response but — make sure your console is closed. There is a noticeable lag in controlled components when the console is open!
This is especially an issue for big forms when a change in one input triggers the whole component re-render and that too in redux, although redux does not seem to be interfering here.
If you want your inputs to be controlled and have the same exact behaviour then you can always do like this
<input
className="form-control"
type="text"
name="name"
value={form.name}
onBlur={onChangeHandler}
/>
This only triggers an event on blur and prevent re-render on each change. It's useful since when you click on any other button to process the data, it's guaranteed that you'll have the updated state. This will not be helpful if your logic requires instant validation/processing related to the input data.
Also, It's important I should mention that sometimes this fails to work with other components which are not native to HTML5 since they might prevent a re-render based on the value prop
Note: Please read the onBlur event here
setState
by itself is not slow, it is only when your renders get very expensive that it starts causing issues.
A few things to consider are:
- Your main component seems quite large and is being re-rendered on every keystroke so that might cause performance issues. Try breaking it down to smaller components.
- Ensure the child-components being rendered in the
render
method of your main component do not get unnecessarily re-rendered. React Developer Tools or why-did-you-render can point out those unnecessary rerenders. Switching toPureComponent
, stateless components or using shouldComponentUpdate can help. - While you can't avoid rerendering here (since your form inputs need to rerender with the new state values), by breaking into smaller components you can look to use shouldComponentUpdate to let React know if a component’s output is not affected by the current change in state or props and avoid unnecessarily rerendering.
- If you use functional components:
- Use useMemo to prevent recomputing expensive operations or components unless some dependency changed.
- Use useCallback to return a memoized version of a callback so that child components that rely on reference equality don't unnecessarily rerender
- Use React.memo if your functional component renders the same result given the same props to prevent it from unnecessarily rerendering. Use the second argument to
React.memo
to customize the behaviour of the memoization (similar toshouldComponentUpdate
)
- Switch to the production build to get better performance
- Switch to uncontrolled components and let the DOM handle the input components itself (this is the "normal web form" behaviour you described). When you need to access the form's values you can use
ref
's to get access to the underlying DOM nodes and read the values directly off that. This should eliminate the need to callsetState
and therefore rerender