React input onChange lag

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 to PureComponent, 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 to shouldComponentUpdate)
• 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 call setState and therefore rerender