kritsana.devpassing
runartifactsdocsworkhistorydispatch

© 2026 Kritsana Prasit — built from source on a self-hosted runner

resume.pdfrssdispatch

back to artifacts
category: reactdate: 05 Mar 2024read: 1 min readsource: posts/react-performance.mdx

React Performance Tips

Optimize your React applications with these proven performance tips and techniques.

React Performance Tips

Performance optimization is crucial for building smooth, responsive React applications. This guide covers essential techniques and best practices for optimizing your React applications.

We'll explore when and how to use React's built-in performance optimization hooks and components, including memo for component memoization, useMemo for expensive computations, and useCallback for stable callback references.

Understanding these concepts is key to building applications that scale well and provide an excellent user experience.

Using useMemo for Expensive Calculations

typescript
import { useMemo } from 'react';
 
function ExpensiveComponent({ data, filter }) {
    const filteredData = useMemo(() => {
        return data.filter(item =>
            item.name.toLowerCase().includes(filter.toLowerCase())
        );
    }, [data, filter]);
 
    return (
        <ul>
            {filteredData.map(item => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );
}

This example shows how to use useMemo to memoize expensive calculations. The filtered data will only be recalculated when data or filter changes.

comments