react-components

Install

npx skills add langchain-ai/skills-benchmarks --skill react-components

Overview

Modern React component patterns with hooks and TypeScript

Documentation

React Component Patterns

Build maintainable React components using modern patterns.

Functional Components with Hooks

Always prefer functional components over class components:

import { useState, useEffect, useCallback } from 'react';
 
interface UserProps {
  userId: string;
  onUpdate?: (user: User

Custom Hooks

Extract reusable logic into custom hooks:

Component Composition

Use composition over prop drilling:

Install

npx skills add langchain-ai/skills-benchmarks --skill react-components

Overview

Documentation

react-components | SkillBundle

function useAsync<T>(asyncFn: () => Promise<T>, deps: any[]) {
  const [state, setState] = useState<AsyncState<T>>({
    loading: true,
    error: null,
    data: null,
  });
 
  useEffect(() => {
    setState(s => ({ ...s, loading: true }));
    asyncFn()
      .then(data => setState({ loading: false, error: null, data }))
      .catch(error => setState({ loading: false, error, data: null }));
  }, deps);
 
  return state;
}

<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body>{content}</Card.Body>
  <Card.Footer>
    <Button>Action</Button>
  </Card.Footer>
</Card>