https://osmarpetry.dev/tags/performance/Recent content in Performance on Osmar PetryHugoen-USWed, 15 Jan 2025 00:00:00 +0000https://osmarpetry.dev/blog/react-optimizing-with-memoization/Wed, 15 Jan 2025 00:00:00 +0000https://osmarpetry.dev/blog/react-optimizing-with-memoization/<h2 id="introduction">Introduction</h2> <p>It’s important to understand the component lifecycle and when to re-render. Some tips to optimize React include:</p> <ul> <li>Use useMemo or memo to memoize expensive calculations or component render.</li> <li>Use useCallback to memoize callback functions.</li> <li>Use React.PureComponent instead of React.Component for pure components.</li> <li>Use shouldComponentUpdate lifecycle method to avoid unnecessary re-renders.</li> <li>Avoid using the state for non-essential data that does not affect the render.</li> <li>Avoid using too many inline functions and use memoized callback functions instead. It is important to note that the most important aspect of optimization is to understand the performance bottlenecks in your application and address them accordingly.</li> </ul> <h2 id="usememo">useMemo</h2> <p>This is a hook that is used to memoize a component&rsquo;s expensive calculations. It helps to reduce the number of re-renders by only recalculating the value when one of its dependencies has changed. It takes two arguments, the first being a calculation function and the second being an array of dependencies. If the dependencies change, the calculation function will be re-executed, otherwise, the previously calculated value is returned, example:</p>