redux: Slow Performance Observed When Updating State On Keyup

Hi all:

problem statement

On each keystroke trigger an action, reduce the state to compensate for the new character, but observe that re-rendering becomes laggy. You can watch the lag here.

background

• I use react-router, and have a simple component structure (I’d snap a shot of the component DOM, but electron react-dev tools is currently out-of-operation). It’s a few layers deep:

Provider >
App >
Dashboard  >
Home {connected, but passes no state/props through children. why? to dispatch an auth middleware event on load} >
ProjectDashboard >
ProjectController {connected, passes a single object of state, ~small} >
Project {dumb}

a third component is connected, but is not rendered. its a layout component for login, and I don’t believe to be associated with the issue at hand.

I’ve profiled while punching keys into the field. It’s the name field shown. It looks like a ton of time is being spent in validate and doing deepEquals in shouldComponentUpdate.

discussion

• it’s been noted to move components down lower in the structure if perf is an issue, so I’ve done that. i only have a few components, and they pass the minimal amount of state via connect
• my reducers and state updating is waaay down the list of processing % time. it seems to correspond to actual react re-rendering time in some components, perhaps performing frivolous checks?

Would love some tips! Thanks!