mcpField
R
react-components

react-components

github.com/langchain-aiDevelopment12085 installsUpdated 13w ago
Repository

About react-components

A skill that guides developers in building maintainable React components with functional components, hooks, and composition patterns.

Key features

  1. 01Functional components with hooks
  2. 02Reusable custom hooks
  3. 03Composition over prop drilling

Use cases

  1. 01Structuring a React component around hooks
  2. 02Extracting asynchronous logic into a custom hook
  3. 03Composing components to avoid prop drilling

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/langchain-ai/skills-benchmarks --skill react-components

After installing, type/react-componentsin Claude Code to confirm it loaded.

Details

From the project README

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) => void;
}

export function UserProfile({ userId, onUpdate }: UserProps) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser(userId).then(setUser).finally(() => setLoading(false));
  }, [userId]);

  const handleSave = useCallback(async (data: UserData) => {
    const updated = await updateUser(userId, data);
    setUser(updated);
    onUpdate?.(updated);
  }, [userId, onUpdate]);

  if (loading) return <Skeleton />;
  if (!user) return <NotFound />;

  return <UserForm user={user} onSave={handleSave} />;
}

Custom Hooks

Extract reusable logic into custom hooks:

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;
}

Component Composition

Use composition over prop drilling:

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

Comments

Markdown supported