tessl/npm-react

React is a JavaScript library for building user interfaces through a declarative, component-based approach.

—

Pending

Overview

Eval results

Files

Component Composition

Name: tessl/npm-react
Author: tessl

Optimize components with memo (skip re-renders) and lazy (code splitting). Use memo only when profiling shows performance issues.

memo

Prevent re-renders with shallow prop comparison. Only use when component is expensive to render.

function memo<P>(
  Component: ComponentType<P>,
  propsAreEqual?: (prevProps: P, nextProps: P) => boolean
): ComponentType<P>;

const ExpensiveComponent = memo(({ data }) => {
  return <div>{data.map(item => <Item key={item.id} {...item} />)}</div>;
});

// Custom comparison (advanced)
const User = memo(({ user, theme }) => <div style={{color: theme}}>{user.name}</div>,
  (prev, next) => prev.user.id === next.user.id  // Only re-render if user.id changes
);

// ⚠️ Common mistakes
// - Passing inline objects/arrays as props defeats memo (use useMemo)
// - Don't wrap every component - adds overhead without benefit
// - Profile first, then optimize

lazy

Code splitting.

function lazy<P>(factory: () => Promise<{ default: ComponentType<P> }>): ComponentType<P>;

const LazyComponent = lazy(() => import('./Component'));

function App() {
  return (
    <Suspense fallback={<Loader />}>
      <LazyComponent />
    </Suspense>
  );
}

// Named exports
const MyComponent = lazy(() =>
  import('./Components').then(m => ({ default: m.MyComponent }))
);

// Error handling: wrap in ErrorBoundary
<ErrorBoundary fallback={<ErrorUI />}>
  <Suspense fallback={<Loader />}>
    <LazyComponent />
  </Suspense>
</ErrorBoundary>

Install with Tessl CLI