1. Using PureComponents: PureComponent in React does a shallow comparison in the shouldComponentUpdate lifecycle method. If your component’s render results do not depend on the new state or don’t depend on props, you can use PureComponent to enhance the performance.
1. Avoid Inline Function Declaration in Render: Functions declared inside the render method are recreated each time the component is re-rendered. This can reduce component performance, so avoid declaring functions in the render method.
1. Use React’s Profiler API: The Profiler measures how often a React application renders and what the “cost” of rendering is. Its purpose is to help identify parts of an application that are slow and may benefit from optimizations such as memoization.
1. Avoiding unnecessary re-renders with shouldComponentUpdate: shouldComponentUpdate is a lifecycle method that allows us to opt out of a potential state change or prop update if the new values are the same as the current values.
1. Reconciliation and keys in lists: When we render a list of elements, or whenever we move elements around the DOM, React uses a diffing algorithm to minimize the number of operations necessary to perform on the actual DOM. We must always define a key when we create a dynamic list of elements.
1. Using the production build version: The development build contains a lot of checks to help you catch common bugs, but it is slower and can keep references to components that should be garbage collected, while the production build doesn’t include these checks, resulting in a faster and smaller compiled code.
1. Use lazy loading and Suspense: Lazy loading helps you to code split your app into different bundles which can then be loaded on demand or in parallel. This can massively decrease the load time of your app and as a result, speed it up.
1. Use memo for functional components: React.memo is a higher order component that memoizes the result of a function component and renders the result from the cache if the props do not change.
1. Keep Components Small and focused: Breaking a component into smaller pieces can help in preventing unnecessary renders and is generally good for maintainability.
1. Debounce or throttle events: Events like onScroll or resize may fire too often and lead to a lot of unnecessary rendering work. You may get an improvement if such events are debounced or throttled.
