React Can Be Fast
React is a powerful tool, but without proper optimization, applications can become slow. In this article, we will break down the most effective optimization techniques we use at Franya.
React.memo: When a Component Should Not Re-render
By default, React re-renders all child components when a parent's state changes. React.memo is a Higher-Order Component that remembers the render result and skips re-rendering if props have not changed.
useMemo and useCallback
useMemo caches a computed value between renders, and useCallback caches a function reference. This is critical when passing objects or functions as props to memoized components.
Code Splitting
One of the most effective ways to speed up initial loading is to split the bundle and load parts on demand through React.lazy and Suspense. In our projects, code splitting reduced the initial bundle by 40-60%.
Virtualizing Long Lists
Libraries like react-window or react-virtuoso render only visible elements, creating the illusion of a complete list.
Image Optimization
Use WebP/AVIF formats, lazy loading, responsive images, and CDN. Switching from JPEG to WebP reduces size by 25-35%, and AVIF by 40-50%.
Conclusion
React optimization is not one magic button — it is a comprehensive approach. Start by profiling with React DevTools and apply appropriate techniques.