React: How to optimize React performance?

1import { useMemo, useCallback, memo } from "react";
2
3// Memoize expensive computations
4const sortedItems = useMemo(() => {
5  return items.sort((a, b) => a.name.localeCompare(b.name));
6}, [items]);
7
8// Memoize callbacks passed to memoized children
9const handleClick = useCallback((id: string) => {
10  setSelected(id);
11}, []);
12
13// Memoize components to skip re-renders
14const MemoizedChild = React.memo(Child);

1import { lazy, Suspense } from "react";
2
3const Dashboard = lazy(() => import("./Dashboard"));
4const Settings = lazy(() => import("./Settings"));
5
6function App() {
7  return (
8    <Suspense fallback={<div>Loading...</div>}>
9      <Routes>
10        <Route path="/dashboard" element={<Dashboard />} />
11        <Route path="/settings" element={<Settings />} />
12      </Routes>
13    </Suspense>
14  );
15}

1import { useVirtualizer } from "@tanstack/react-virtual";
2import { useRef } from "react";
3
4function VirtualList({ items }: { items: string[] }) {
5  const parentRef = useRef<HTMLDivElement>(null);
6
7  const virtualizer = useVirtualizer({
8    count: items.length,
9    getScrollElement: () => parentRef.current,
10    estimateSize: () => 50,
11    overscan: 5,
12  });
13
14  return (
15    <div ref={parentRef} style={{ height: "500px", overflow: "auto" }}>
16      <div style={{ height: `${virtualizer.getTotalSize()}px`, position: "relative" }}>
17        {virtualizer.getVirtualItems().map(virtualRow => (
18          <div
19            key={virtualRow.index}
20            style={{
21              position: "absolute",
22              top: 0,
23              left: 0,
24              width: "100%",
25              height: `${virtualRow.size}px`,
26              transform: `translateY(${virtualRow.start}px)`,
27            }}
28          >
29            {items[virtualRow.index]}
30          </div>
31        ))}
32      </div>
33    </div>
34  );
35}

1// BAD: filter state at top causes ALL children to re-render
2function App() {
3  const [filter, setFilter] = useState("");
4  return (
5    <>
6      <SearchInput value={filter} onChange={setFilter} />
7      <ExpensiveList filter={filter} />
8    </>
9  );
10}
11
12// GOOD: move state to where it matters
13function SearchableList() {
14  const [filter, setFilter] = useState("");
15  return (
16    <>
17      <SearchInput value={filter} onChange={setFilter} />
18      <ExpensiveList filter={filter} />
19    </>
20  );
21}

1// BAD: new object every render = child always re-renders
2<Child style={{ color: "red" }} />
3
4// GOOD: constant object
5const STYLE = { color: "red" };
6<Child style={STYLE} />
7
8// GOOD: or memoize it
9const style = useMemo(() => ({ color: active ? "blue" : "red" }), [active]);
10<Child style={style} />