Optimalizace výkonu React aplikací

Výkon React aplikací je kritickým faktorem uživatelské zkušenosti. Podíváme se na praktické techniky, které vám pomohou vytvářet rychlejší aplikace.

Memoizace

Prevence zbytečných překreslení komponent pomocí React.memo a hooks

Code Splitting

Rozdělení kódu na menší části pro rychlejší načítání

Virtualizace

Efektivní renderování velkých seznamů dat

Bundle Optimization

Minimalizace velikosti JavaScript bundle

Memoizace komponent

React.memo je výkonný nástroj pro optimalizaci renderování komponent. Použijte ho pro komponenty, které se často překreslují se stejnými props.

components/ExpensiveComponent.tsx
const ExpensiveComponent = React.memo(({ data }) => {
  // Náročné výpočty nebo komplexní renderování
  const processedData = useMemo(() => {
    return data.map(item => complexCalculation(item))
  }, [data])

  return (
    <div>
      {processedData.map(item => (
        <ListItem key={item.id} {...item} />
      ))}
    </div>
  )
})

💡 Kdy použít memo?

Pro komponenty v dlouhých seznamech
Pro komponenty s náročnými výpočty
Pro komponenty, které dostávají stejné props

Optimalizace s useMemo a useCallback

Hooks useMemo a useCallback pomáhají optimalizovat výkon cachováním hodnot a funkcí mezi rendery.

components/DataGrid.tsx
function DataGrid({ data, onSort }) {
  // Cachování náročného výpočtu
  const sortedData = useMemo(() => {
    return [...data].sort((a, b) => b.value - a.value)
  }, [data])

  // Stabilní reference na callback
  const handleSort = useCallback((column) => {
    onSort(column, sortedData)
  }, [onSort, sortedData])

  return (
    <div>
      {sortedData.map(item => (
        <Row key={item.id} data={item} onSort={handleSort} />
      ))}
    </div>
  )
}

Virtualizace seznamů

Pro dlouhé seznamy použijte virtualizaci s react-window nebo react-virtualized:

components/DataGrid.tsx
import { FixedSizeList } from 'react-window'

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
)

const List = () => (
  <FixedSizeList
    height={400}
    width={600}
    itemCount={1000}
    itemSize={35}
  >
    {Row}
  </FixedSizeList>
)

Code Splitting

Rozdělte váš kód na menší chunks pomocí React.lazy a Suspense:

components/HeavyComponent.tsx
const HeavyComponent = React.lazy(() => 
  import('./HeavyComponent')
)

Měření výkonu

Používejte React DevTools Profiler pro měření výkonu vašich optimalizací:

Sledujte počet renderování
Měřte čas renderování
Identifikujte zbytečná překreslení

Závěr

Optimalizace výkonu je kontinuální proces. Začněte měřením, identifikujte problematická místa a aplikujte vhodné optimalizace. Nezapomeňte, že předčasná optimalizace může vést ke složitějšímu kódu.

Sledujte počet renderování
Měřte čas renderování
Identifikujte zbytečná překreslení

Optimalizace výkonu React aplikací