Typing becomes very slow once the Redux store node holds a lot of data

(Ben Carp) #1

For the purpose of learning I’ve build Next, which is a notification app. It was build with Redux, and initially worked very well. I started using it for myself, and I found out that once it holds a lot of information typing becomes very slow, to the extent that the app is not usable. Obviously all of the text fields are controlled. When connecting with a new account (the notifications store node is empty) typing is immediate.
Visit App, Visit code

(Ben Carp) #2

According to https://github.com/reactjs/redux/issues/1244 this seems to be a React rendering issue.
I have a similar problem. And it seems to be a rendering issue as well. However, isn’t React, especially when used with Redux, supposed to solve this kind of rendering issue - by not calling the render function when the state doesn’t change and by using the virtual dom?

(Allain Lalonde) #3

Having a look at your reducers there’s some room for some optimizing.

It appears you’re cloning the state in the notifications reducer unnecessarily:

   const store = {...state.store}
   const toDisplay = [...state.toDisplay]

is run every single action, even if:

  1. The action doesn’t apply to this particular reducer
  2. The action doesn’t change them

There are other cases where you are cloning store twice too (marking a task as completed for example).

If you really wanted to reduce the amount of work done on mutation, I’d recommend investigating one of the immutable libraries out there. Changing a single property on a large object is a use case they are normally designed to perform efficiently.

(Ben Carp) #4

Thank you very much for your reply!
I agree. Indeed, I would build this reducer differently in a second look. The reason I did it this way is for the beauty of the return statements later on.
However, it is not the cause for the problem I described. I managed to solve it by changing the structure of the tabble and row components, and adding a connected component between the table component and the row component.
I don’t understand what you mean by reducing the amount of work done on mutation.