This article describes how to provide high performance for your application. Refer to the React guidelines for more information on performance optimization.
React Controls do not change data passed through a state and use memoization and React.PureComponents. A React.PureComponent performs a shallow equality check to compare old and new state values. In this case, if you update a state object field, React does not update the component because it compares two references to the same object. Use immutable data structures to create a new state instance each time a state changes.
Implement Control’s state management plugins as separate components and update their properties independently to optimize performance. This allows the Control to avoid rendering unchanged UI elements.
In this case, you can use a state management library like Redux to work with independent components’ states.
The following demo shows how the React Grid works with immutable data using Redux, react-redux and seamless-immutable libraries:
Do not declare functions and variables inside render methods. Otherwise, these functions and variables are declared each time a component is updated. The following example demonstrates how to override a default appointment template in the React Scheduler control:
Use a management library like Redux to access the parent component's state. If you do not use such libraries in your application, we recommend that you use the connectProps function available in the @devexpress/dx-react-core package.
In the following example, React Chart uses the connectionProps's update method to update a legend label's style when the parent serie's hover state changes.