Performance issue with redux / redux-form

Question

We've been using redux-form and seeing a noticeable lag when user types in an input field. I'm not really sure if it's a problem with redux-form. This could probably be the way we've structured our components. So we have page which lists some data, say 25 rows and filters for it. On click of a button, we open a modal where we render a redux-form. Now if user types in any of the input field, all the list items in the underlying page also get re-rendered. We're using React.Component for list items. React devtool's "Highlight updates" option highlights list items but when I do a console.log in list item's render method, it's not printing!

Wonder if this is happening because the list item's parent component is also a (redux) connected component and when redux-form's Field updates the store, this also gets re-rendered? How do you use redux-form in such scenario? I don't think having multiple stores is a recommended way.

Why don't you create a modal in new component? You don't have to put modal and list in same component. Making new component for modal will resolve the problem in my opinion. — ahadortiz
Modal is actually a separate component having only the form. — Sriram
Did you connect form component with redux form? The list container should not be updated, because none of states or props are updated. I think you missed something — ahadortiz

Carwyn Stephen Carwyn Stephen · Accepted Answer · 2018-10-09T11:51:13

I'm guessing you have an event listener for when any of the inputs on the form changes, and then you do some fetching/filtering on the underlying list?

Running this when typing quickly could lead to a performance hit, depending on what your event listener does. You could try using something like lodash.debounce to only run your listener after the user has stopped typing for like 200ms?

Performance issue with redux / redux-form

1 Answers