skills.rest
github
githubOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react18-lifecycle-patterns

Migrate unsafe React class component lifecycle methods to React 18.3.1 compliant patterns.

38.5k|4.9k|Updated Jun 11, 2025
Search Tags:#class components#Refactoring#reAct#Migration#Lifecycle#React 18#getderivedstatefromprops
One-click install
npx skills add https://github.com/github/awesome-copilot --skill react18-lifecycle-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react18-lifecycle-patterns
Source: https://github.com/github/awesome-copilot/tree/main/skills/react18-lifecycle-patterns
Command: npx skills add https://github.com/github/awesome-copilot --skill react18-lifecycle-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React 18 deprecates componentWillMount, componentWillReceiveProps, and componentWillUpdate, and guessing the wrong replacement pattern causes concurrent-mode bugs, stale DOM reads, and React 19 breakage. This Skill provides exact before/after migration patterns with decision trees so you never pick the wrong replacement.

Core Features & Use Cases

  • Decision Trees for Each Lifecycle Method: Route componentWillMount, componentWillReceiveProps, and componentWillUpdate logic to the correct replacement (constructor, componentDidMount, componentDidUpdate, getDerivedStateFromProps, or getSnapshotBeforeUpdate) based on what the code actually does.
  • Full Before/After Code References: Three reference files cover state initialization, side effects, prop-driven derivation, DOM snapshot reads, and request cancellation with complete code examples.
  • getDerivedStateFromProps Trap Warnings: Documents the every-render firing behavior, static method constraints, and purity requirements that cause the most common migration mistakes.
  • Use Case: When upgrading a legacy class component that fetches data in componentWillReceiveProps, the Skill directs you to componentDidUpdate with prevProps comparison and a request-ID cancellation pattern.

Quick Start

Ask the AI to migrate the unsafe lifecycle methods in your class component to React 18 compliant patterns using this skill.

Frequently Asked Questions about react18-lifecycle-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate componentWillReceiveProps in React 18?▼

Migrate componentWillReceiveProps based on what it does: async side effects like fetching go to componentDidUpdate with prevProps comparison, while pure synchronous state derivation goes to getDerivedStateFromProps. When in doubt, use componentDidUpdate since it is always safe.

What replaces componentWillMount in React 18?▼

Replace componentWillMount based on its purpose: state initialization moves to the constructor, side effects like fetches and subscriptions move to componentDidMount, and prop-derived initial state moves to the constructor reading props directly.

When should I use getDerivedStateFromProps vs componentDidUpdate?▼

Use getDerivedStateFromProps only for pure synchronous state derivation from props, and componentDidUpdate for anything involving async work or side effects. getDerivedStateFromProps fires on every render, cannot access this, and must remain pure.

Is the UNSAFE_ lifecycle prefix a valid fix for React 18 warnings?▼

The UNSAFE_ prefix only suppresses the React 18.3.1 warning temporarily. It does not fix concurrent mode safety issues and these methods are removed entirely in React 19, so it should only be a temporary hold with a TODO comment.

How do I read DOM scroll position before a React update?▼

Use getSnapshotBeforeUpdate to read DOM values like scrollHeight right before the DOM commits, then return them as a snapshot consumed by componentDidUpdate as its third argument. Always pair the two methods and check for null snapshots.

Related Skills

Explore More Software Engineering Skills→
vorynkavitaliyvorynkavitaliy

react-modernization

Automates React version upgrades, class-to-hook migrations, and concurrent feature adoption with codemods and TypeScript support.

Community
Advanced
netbox-communitynetbox-community
21.3k

run-tests

Run NetBox Django tests via manage.py with testing configuration.

Official
Intermediate
haxlyshaxlys

react-modernization

Automates React codebase modernization via codemods and class-to-hooks migration.

Community
Advanced
wigxelwigxel
3

convex-create-component

Design modular Convex components with isolated table namespaces and defined APIs.

Official
Advanced