JSX

• Declarative UI syntax inside JavaScript
• Compiles to React.createElement
• Supports expressions, components, loops, conditions
• Encourages component-driven UI composition

Components

• Reusable UI building blocks
• Prefer function components in modern React
• Receive inputs through props
• Can compose other components

Props

• One-way data flow from parent → child
• Immutable inside receiving component
• Used for configuration and composition
• Can pass values, callbacks, JSX, components

State

• Local mutable component data
• Updating state triggers re-render
• Usually managed with useState
• Keep minimal and derived when possible

Hooks

• Enable stateful logic in function components
• Replace most class component patterns
• Must follow Rules of Hooks
• Common hooks:
  • useState
    • Local state management
  • useEffect
    • Synchronize with external systems
    • Cleanup support
    • Not for derived state
  • useMemo
    • Memoize expensive computations
    • Optimization only
  • useCallback
    • Memoize function references
    • Useful with memoized children
  • useRef
    • Mutable container without re-render
    • DOM access
    • Persist values between renders
  • useContext
    • Consume shared context values
  • useReducer
    • Complex state transitions
    • Redux-like reducer pattern
  • useTransition
    • Mark updates as non-urgent
    • Improves UI responsiveness
  • useDeferredValue
    • Defer expensive rendering
  • useId
    • Stable unique IDs for accessibility
  • use
    • Read promises/resources directly
    • Common with Server Components and Suspense

Effects System

• Handles synchronization with external systems
• Examples:
  • API calls
  • Event listeners
  • Timers
  • Subscriptions
• Cleanup prevents leaks/race conditions
• Avoid unnecessary effects

Rendering Model

• UI is re-rendered from state/props changes
• React compares virtual trees efficiently
• DOM updates are batched and optimized

Virtual DOM

• Lightweight in-memory UI representation
• Diffing minimizes real DOM operations
• Improves performance and developer ergonomics

Reconciliation

• Algorithm deciding what changes in UI
• Uses element type and key
• Preserves or resets component state

Keys

• Stable identity for list items
• Critical for correct reconciliation
• Avoid array indexes when order changes

Conditional Rendering

• Render different UI based on conditions
• Uses JS operators:
  • ternary
  • &&
  • early return

List Rendering

• Render collections with .map()
• Requires stable key

Event Handling

• Synthetic event system
• Cross-browser consistency
• Uses camelCase handlers like onClick

Controlled Components

• Form state controlled by React state
• Predictable form behavior
• Common for validation and dynamic forms

Context API

• Share state without prop drilling
• Good for theme/auth/settings
• Avoid overusing for frequently changing data

Component Composition

• Prefer composition over inheritance
• Build flexible UIs from smaller parts
• Common patterns:
  • children
  • render props
  • slots-like APIs

Memoization

• Reduce unnecessary renders/computations
• Tools:
  • React.memo
  • useMemo
  • useCallback
• Use only when profiling shows benefit

Suspense

• Declarative loading boundaries
• Coordinates async rendering
• Works with lazy loading and async data
• Enables streaming architectures

Lazy Loading

• Split bundles dynamically
• React.lazy() + Suspense
• Improves initial load performance

Error Boundaries

• Catch rendering errors in subtree
• Prevent whole app crashes
• Still class-based currently

Concurrent Rendering

• Interruptible rendering model
• Enables smoother UX
• Prioritizes urgent updates
• Foundation for modern React features

Automatic Batching

• Multiple state updates merged automatically
• Fewer renders
• Better performance

Server Components

• Run on server only
• Reduce client bundle size
• Direct server-side data access
• Cannot use client-only hooks/events
• Usually paired with frameworks like Next.js

Client Components

• Interactive browser-side components
• Use hooks/events/browser APIs
• In frameworks, often marked with 'use client'

Hydration

• Attaches React behavior to server-rendered HTML
• Enables SSR + interactivity

Streaming SSR

• Stream HTML progressively
• Faster perceived performance
• Works well with Suspense

Portals

• Render outside parent DOM hierarchy
• Useful for:
  • modals
  • tooltips
  • overlays

Strict Mode

• Development-only diagnostics
• Detects unsafe patterns
• Double-invokes some logic intentionally

Custom Hooks

• Reusable stateful logic abstraction
• Share behavior without HOCs/render props
• Compose hooks together cleanly

Refs

• Imperative escape hatch
• Access DOM or mutable values
• Avoid overusing imperative patterns

Fragment

• Group elements without extra DOM nodes
• Syntax:
  • <Fragment>
  • <>...</>

Profiler

• Measure rendering performance
• Identify expensive re-renders

Developer Experience

• Strong ecosystem
• Excellent tooling
• Huge community
• Framework integrations:
  • Next.js
  • Remix
  • Expo

React Native

• Build native mobile apps with React concepts
• Shared mental model with web React
• Different renderer than DOM React