How can you optimize performance in a React application?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import { lazy, Suspense, memo, useMemo } from 'react';

const HeavyChart = lazy(() => import('./HeavyChart'));   // 1. code splitting

const Row = memo(function Row({ item }) {               // 2. skip unchanged rows
  return <li>{item.label}</li>;
});

export default function List({ items, filter }) {
  const visible = useMemo(                          // 3. cache expensive work
    () => items.filter(i => i.label.includes(filter)),
    [items, filter]
  );

  return (
    <Suspense fallback={<p>Loading chart…</p>}>
      <HeavyChart />
      <ul>{visible.map(i => <Row key={i.id} item={i} />)}</ul>
    </Suspense>
  );
}