React Guidelines for SPFx Developers — Overview

React Guidelines for SPFx Developers — Overview

This is the pillar page linking to all React-in-SPFx articles covering hooks, state management, reusable components, performance, and professional patterns.

What’s inside

  • Hooks: useState, useEffect, useRef, useContext, useReducer
  • State: local, global, and external data patterns
  • Custom Hooks: list items, form state, debounce, cancelable fetch
  • Components: reusable functional components, container vs presentational, composition
  • Performance & Debugging: profiling, memoization, virtualization, caching
  • Bonus: migrating class → function components, complex forms, state anti‑patterns

Hooks — Essential building blocks

Core React hooks used in SPFx web parts and extensions. Learn when and how to apply them to manage state, side effects, refs, context, and reducers.

State — Local, global, external data

Approaches to handle local component state, shared app state, and server data in SPFx. Covers trade‑offs, patterns, and how to avoid prop‑drilling.

Custom hooks — Reusable logic

Reusable hooks that encapsulate SPFx‑specific data access and UI behavior. Use them to standardize list queries, form state, and cross‑cutting concerns.

Components — Patterns and composition

Guidance for building composable, testable React components in SPFx. Emphasizes container/presentational splits, composition, and migration from defaults.

Performance & Debugging — Tools and techniques

Practical techniques to keep SPFx solutions fast and observable. Includes profiling, memoization, virtualization, and caching patterns that actually help.

Bonus — Migrations and pitfalls

Extra topics that don’t fit neatly elsewhere but matter in projects. Migrations, advanced forms, and anti‑patterns to recognize and avoid.

How to use this guide

  • Start with Hooks and State to establish fundamentals.
  • Use Custom Hooks and Components to standardize reusable building blocks.
  • Apply Performance & Debugging techniques to keep web parts fast and observable.
  • The Bonus section covers common migrations and pitfalls.

Components vs Function Components

  • Prefer function components with hooks for new SPFx work; they simplify lifecycle, composition, and testing.
  • Keep class components primarily for Error Boundaries (or use a boundary library) and rare useLayoutEffect-style needs.
  • If your SPFx scaffold generated class components, migrate them using the patterns in the Bonus article.
  • Benefits: smaller components, clearer data flow, fewer re-render pitfalls.

Migrate SPFx defaults to hooks — From classes to functions

A pragmatic path to move scaffolded class components to modern function components. Map lifecycles to effects and simplify state with hooks.

  • Identify class components in your web part or extensions.
  • Map lifecycles to effects; replace instance state with useState/useReducer and fields with useRef.
  • Keep SPFx Context at the container layer; presentational components receive data via props.
  • See: /blog/reactspfx/90_bonus_01_migrating-class-to-hooks and Components series for practical templates.