React18 Lifecycle Patterns

If you're still maintaining React class components and hitting UNSAFE_ warnings in 18.3.1, this gives you exact migration patterns for the three deprecated lifecycle methods. The decision tables are the real value here: they route you to the right replacement based on what the code actually does, not just which method name you're replacing. componentWillReceiveProps doing a fetch goes to componentDidUpdate, pure state derivation goes to getDerivedStateFromProps, and the guide is explicit about which is which. Saves you from the classic mistake of reaching for getDerivedStateFromProps when you actually need componentDidUpdate with a prev prop comparison. The references include full before and after code blocks for each case.

skills.sh installs: 745
GitHub stars: 41K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add github/awesome-copilot --skill react18-lifecycle-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

React 18 Lifecycle Patterns

Reference for migrating the three unsafe class component lifecycle methods to React 18.3.1 compliant patterns.

Quick Decision Guide

Before migrating any lifecycle method, identify the semantic category of what the method does. Wrong category = wrong migration. The table below routes you to the correct reference file.

componentWillMount - what does it do?

What it does	Correct migration	Reference
Sets initial state (`this.setState(...)`)	Move to `constructor`	→ componentWillMount.md
Runs a side effect (fetch, subscription, DOM)	Move to `componentDidMount`	→ componentWillMount.md
Derives initial state from props	Move to `constructor` with props	→ componentWillMount.md