1. Clear the timer before the component is uninstalled
2. Use memo to ensure that the data of the child component is not updated with the status of the parent component if it has not been updated. You can pass in a second argument to customize the comparison logic.
3. Use lazy loading of components to reduce the bundle size and optimize the first-screen loading speed.
Lazy route loading:
The conditional component loads lazily:
4. Use Fragment placeholders or empty tokens.
After using the inline function, the render method will create an instance of the function every time it runs. As a result, when React makes Virtual DOM comparison, the comparison between the old and new functions is not equal, and then new instances are bound to the element again, and the old function instance is handed over to the garbage collection mechanism. Instead: Define functions separately within the component and bind them to the element’s events.
6. Avoid using inline style properties
Optimize condition rendering to reduce component unmount and unmount times
8. Establish error boundaries for components
9. Rely on optimization
