playbooks

home / skills / eyadsibai / ltk / react

react skill

/plugins/ltk-engineering/skills/javascript/react

This skill helps you understand React concepts, patterns, and best practices to build maintainable components and robust frontends.

npx playbooks add skill eyadsibai/ltk --skill react

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
5.1 KB
---
name: React
description: This skill should be used when the user asks about "React", "React components", "React hooks", "useState", "useEffect", "JSX", "React patterns", "React best practices", or mentions React development.
version: 1.0.0
---

# React Development

Guidance for building React applications with modern patterns.

---

## Hooks Reference

### Built-in Hooks

| Hook | Purpose | When to Use |
|------|---------|-------------|
| **useState** | Local state | Simple values, toggles, form inputs |
| **useReducer** | Complex state | Multiple sub-values, state machines |
| **useEffect** | Side effects | Data fetching, subscriptions, DOM manipulation |
| **useContext** | Consume context | Theme, auth, global state |
| **useRef** | Mutable reference | DOM access, persist values across renders |
| **useMemo** | Memoize value | Expensive calculations |
| **useCallback** | Memoize function | Stable callbacks for child components |
| **useLayoutEffect** | Sync DOM effects | Measure DOM before paint |
| **useId** | Unique IDs | Accessibility, form labels |

### Hook Rules

| Rule | Why |
|------|-----|
| Only call at top level | Hooks rely on call order |
| Only call from React functions | Components or custom hooks |
| Name custom hooks with "use" | Convention for linting |

---

## Component Patterns

| Pattern | Use Case | Key Concept |
|---------|----------|-------------|
| **Presentational** | Pure UI, no logic | Props in, JSX out |
| **Container** | Data fetching, state | Wraps presentational |
| **Compound Components** | Related components sharing state | Parent provides context |
| **Render Props** | Share behavior | Function as child |
| **Custom Hooks** | Reusable stateful logic | Extract from components |
| **HOC** | Legacy pattern | Prefer hooks instead |

---

## State Management Decision

| Solution | Best For | Trade-offs |
|----------|----------|------------|
| **useState** | Component-local | Simplest, prop drilling for sharing |
| **useReducer** | Complex local state | More boilerplate, predictable |
| **Context** | Theme, auth, i18n | Re-renders all consumers |
| **Zustand** | Simple global | Minimal API, good devtools |
| **Redux Toolkit** | Complex global | Powerful, more boilerplate |
| **React Query/TanStack** | Server state | Caching, background refresh |
| **Jotai/Recoil** | Atomic state | Fine-grained updates |

**Key concept**: Server state (API data) and client state (UI state) should be managed differently. Use React Query for server state.

---

## useEffect Patterns

| Pattern | Dependency Array | Purpose |
|---------|------------------|---------|
| Run once | `[]` | Initial fetch, setup |
| Run on change | `[dep1, dep2]` | React to specific changes |
| Run every render | (omit) | Rarely needed |
| Cleanup | Return function | Subscriptions, timers |

### Common Pitfalls

| Pitfall | Solution |
|---------|----------|
| Infinite loops | Include all dependencies, use useCallback |
| Stale closures | Use refs or functional updates |
| Race conditions | Cleanup flag or AbortController |
| Missing deps | Trust the linter, refactor if needed |

---

## Performance Optimization

| Technique | When to Use | Cost |
|-----------|-------------|------|
| **React.memo** | Expensive child, frequent parent renders | Shallow comparison |
| **useMemo** | Expensive calculation | Memory for cached value |
| **useCallback** | Callback passed to memoized child | Memory for function |
| **Lazy loading** | Large components, routes | Initial load vs waterfall |
| **Virtualization** | Long lists (100+ items) | Complexity |

**Key concept**: Don't optimize prematurely. Measure first with React DevTools Profiler.

---

## Conditional Rendering

| Pattern | Use Case |
|---------|----------|
| **&&** | Show/hide single element |
| **Ternary** | Two alternatives |
| **Early return** | Multiple conditions, cleaner |
| **Switch/object map** | Many alternatives |

---

## Form Handling

| Approach | Use Case |
|----------|----------|
| **Controlled** | Need validation, formatting |
| **Uncontrolled (refs)** | Simple forms, performance |
| **React Hook Form** | Complex forms, validation |
| **Formik** | Legacy, full-featured |

**Key concept**: Controlled components store value in React state. Uncontrolled use DOM as source of truth.

---

## Project Structure

| Directory | Purpose |
|-----------|---------|
| **components/ui/** | Generic, reusable (Button, Card) |
| **components/features/** | Feature-specific compositions |
| **hooks/** | Custom hooks |
| **contexts/** | React contexts + providers |
| **pages/** or **routes/** | Route components |
| **services/** or **api/** | API calls, data fetching |
| **types/** | TypeScript types |
| **utils/** | Pure helper functions |

---

## Best Practices

| Practice | Why |
|----------|-----|
| Keep components small (<100 lines) | Readable, testable |
| Colocate related code | Easier to maintain |
| Lift state only when needed | Avoid unnecessary complexity |
| Use TypeScript for props | Catch errors, better DX |
| Prefer composition over inheritance | React's design philosophy |
| Extract custom hooks | Reusable logic, testable |

## Resources

- React Docs: <https://react.dev/>
- Patterns: <https://patterns.dev/>

Overview

This skill provides concise, practical guidance for building React applications with modern hooks, component patterns, state management choices, and performance techniques. It focuses on actionable recommendations developers can apply to everyday React work, from simple components to complex data-driven UIs.

How this skill works

The skill outlines when to use core built-in hooks (useState, useEffect, useReducer, etc.), component patterns (presentational, container, compound), and state management options (Context, Redux Toolkit, Zustand, React Query). It summarizes common pitfalls, dependency rules for effects, and practical performance optimizations to help structure, debug, and scale React apps.

When to use it

  • Explaining hook usage and rules for components or custom hooks
  • Choosing a state management approach for local, global, or server state
  • Designing component architecture and deciding where to colocate code
  • Diagnosing useEffect dependency issues, race conditions, or stale closures
  • Improving performance with memoization, lazy loading, or virtualization

Best practices

  • Call hooks only at the top level and from React functions or custom hooks
  • Keep components small and focused; prefer composition over inheritance
  • Manage server state with React Query and client state with useState/useReducer or a lightweight store
  • Measure before optimizing; use React DevTools Profiler to find hotspots
  • Colocate components, hooks, contexts, and related types for easier maintenance

Example use cases

  • Convert a class-based feature into a functional component using custom hooks
  • Use useReducer for a complex form state that requires multiple sub-values
  • Implement data fetching with React Query and handle caching and background refetch
  • Optimize a frequently re-rendering list with React.memo and virtualization
  • Create compound components that share state via context for a reusable UI primitive

FAQ

When should I use useState vs useReducer?

Use useState for simple, isolated values and toggles. Use useReducer when state has multiple related fields, complex updates, or when you want a predictable reducer pattern.

How do I avoid infinite loops in useEffect?

Include all required dependencies in the dependency array, memoize callbacks with useCallback, and use refs or functional updates to avoid stale closures. For async effects, use AbortController or a mounted flag for cleanup.