node.js - React Context API, large array, and application speed

Question

Application is built on Node/React/Express.

I have a table component and then a sub component for each row in the table that is generated dynamically from an array (clients) which is collected from the db by a react context api call and stored in state. I then map over the array and create a row (Client component) for each client.

 <TableBody>
   {clients.map(client => (
    <Client
     key={client.id}
     client={client}
     handleSnackBar={this.props.handleSnackBar}
     handleSendMail={this.props.handleSendMail}
    />
   ))}
 </TableBody>

On each of these rows is a button that can activate or deactivate the client's account.... now that the array (client list) is up to 1000 records, it's taking a solid 3 seconds to activate or deactivate the account and reflect the changes.

I'm looking for a) any issues with doing it how I'm doing it, b) suggestions for speeding up this process and optimizing the code, c) is Redux a better option for this? Or, I guess, d) do I have unrealistic expectations and I should just add a loading spinner and call it good?

标签： node.jsreactjssequelize.jsloadingreact-context

Answer 1

1. Where is your code to activate and desactivate a client? In the Table component or in the Client component?
2. How did you update a client item? You update the whole array of clients or just the current item?
3. Did you use PureComponent for your Client component?

For 1. It is better to put activate/desactivate stuff in your Client component. So each Client component manage his state and that way when you activate/desactivate a client, it is not your whole table that is updated.

For 2. Like as said in 1. Better manage all stuff for each Client component. You can create a UncontrolledComponent, so the component is not update each time the state of the Table component changed. For that see the doc here https://reactjs.org/docs/uncontrolled-components.html

For 3. When you use a huge list of data, it is better to use a PureComponent because it manage better his state and boost the performance. See the doc for more informations https://reactjs.org/docs/react-api.html#reactpurecomponent