React

React

> Based on React 19 with TypeScript. Always use functional components with Hooks.

Preferences

• Prefer TypeScript over JavaScript
• Prefer functional components over class components
• Prefer composition over inheritance
• Use useMemo and useCallback judiciously for performance optimization
• Avoid prop drilling with Context or composition

Core

| Topic | Description | Reference | |-------|-------------|-----------| | Hooks | useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer, useId, useTransition, useDeferredValue, useSyncExternalStore | [hooks](references/hooks.md) | | Component Patterns | Function components, props, children, composition, render props, forwardRef, memo | [components-patterns](references/components-patterns.md) |

Features

| Topic | Description | Reference | |-------|-------------|-----------| | Advanced Features | Suspense, Error Boundary, Lazy loading, Context, Refs, Portals | [advanced-features](references/advanced-features.md) |

Quick Reference

Function Component with TypeScript

import { useState, useEffect, useCallback, useMemo } from 'react'

interface Props {
  title: string
  count?: number
  onUpdate: (value: string) => void
}

export function MyComponent({ title, count = 0, onUpdate }: Props) {
  const [value, setValue] = useState('')

  const doubled = useMemo(() => count * 2, [count])

  const handleClick = useCallback(() => {
    onUpdate(value)
  }, [onUpdate, value])

  useEffect(() => {
    console.log('Component mounted or count changed:', count)
    return () => console.log('Cleanup')
  }, [count])

  return (
    
      {title} - {doubled}
      Click
    
  )
}

Key Imports

// State & Refs
import { useState, useRef, useReducer, useId } from 'react'

// Effects & Lifecycle
import { useEffect, useLayoutEffect, useInsertionEffect } from 'react'

// Performance
import { useMemo, useCallback, useTransition, useDeferredValue } from 'react'

// Context & Refs
import { useContext, useRef, forwardRef, useImperativeHandle, useSyncExternalStore } from 'react'

// Components
import { memo, useDeferredValue, Suspense, lazy, createContext, createRef } from 'react'

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: belos-street
• Source: belos-street/skill-kit
• License: MIT

Install and usage instructions live in the source repository linked above.