07 — React Performance

import { memo, useMemo, useCallback } from 'react';
 
const MemoizedComponent = memo(({ data }) => {
  return <div>{data}</div>;
});
 
function Expensive({ items }) {
  const computed = useMemo(() => expensiveCalc(items), [items]);
  const callback = useCallback(() => doSomething(), []);
  return <MemoizedComponent data={computed} onClick={callback} />;
}

const LazyComponent = React.lazy(() => import('./LazyComponent'));
 
function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

// Dynamic import
import('module').then(module => {
  // Use module
});
 
// React.lazy + Suspense
const OtherComponent = lazy(() => import('./OtherComponent'));