react-components

OverviewHistoryStatsSecurity

npx skills add ...

Documentation

SKILL.md

Modern React component patterns with hooks and TypeScript

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

Documentation

SKILL.mdView source

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

Custom Hooks

Extract reusable logic into custom hooks:

Component Composition

Use composition over prop drilling:

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

Documentation

SKILL.md

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>