Function Recreation: Utilizing the useCallback hook is crucial as it allows you to memorize a function. Whenever a component is re-rendered, all functions within the component are unnecessarily recreated, adversely impacting app performance. To mitigate this, a simple solution is to enclose the function with the useCallback hook, preventing recreation when no dependencies have changed.
Sibling Rerender: If a re-render caused by a state change doesn’t affect all the children in a component, it results in unnecessary re-rendering of other components. To address this, you can either make the state-dependent child components impure or move the state logic within the child. This is the simpler and less costly approach. The other approach is to wrap the child components with the ‘memo’ component, providing similar results at the expense of extra computation for React to check for prop changes.
Single Responsibility: A component should have a single responsibility, such as rendering data, while other operations should be delegated to custom hooks, stores, or subcomponents. This practice significantly improves code readability.
React Fragments: In React, it is a requirement that all children components be enclosed within a parent component. Often, to meet this requirement, we use the div element unnecessarily, introducing an extra element with no purpose on the page. This redundancy can be eliminated by opting for React fragments, represented by <></> as dummy elements.
Lazy Loading: Lazy loading is the optimal method for loading modules on demand. If the usage of a particular module depends on conditions, such as access rights or navigation, these modules need not be loaded during the initial page load. Lazy loading components facilitate this behavior, improving application load time.
