React18 Lifecycle Patterns
GitHubOfficialFirst committed by SaravananRajaramanDistributed by GitHub
- Skill
- Guidelines
- Software development
- MIT
- No issues found
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
This skill provides a systematic decision-making framework for migrating unsafe React class component lifecycle methods (componentWillMount, componentWillReceiveProps, and componentWillUpdate) to modern, React 18-compliant alternatives. It emphasizes identifying the semantic purpose of legacy code—whether it involves state initialization, side effects, or prop-based state derivation—to ensure the correct migration pattern is applied. The skill explicitly warns against using the UNSAFE_ prefix as a permanent solution and provides clear before-and-after code examples for various migration scenarios.
What it does
- Routes legacy lifecycle methods to correct modern replacements based on semantic intent.
- Provides specific migration patterns for state initialization, side effects, and prop derivation.
- Offers guidance on handling asynchronous work and cleanup in componentDidUpdate.
- Explains the risks of using UNSAFE_ prefixes and provides a template for temporary code marking.
- Includes decision trees for choosing between getDerivedStateFromProps and componentDidUpdate.
- Demonstrates how to implement getSnapshotBeforeUpdate for DOM-related lifecycle tasks.
When to use it
- When refactoring class components to resolve React 18.3.1 lifecycle warnings.
- When preparing a codebase for future React 19 compatibility.
- When deciding between getDerivedStateFromProps and componentDidUpdate for prop-driven logic.
- When needing to safely move side effects out of deprecated lifecycle methods.
- When implementing DOM-read operations that require getSnapshotBeforeUpdate.
Advantages
- Prevents common migration errors by enforcing a semantic decision-making process.
- Ensures compatibility with React 18 concurrent mode by eliminating unsafe lifecycle usage.
- Provides clear, copy-pasteable code patterns for complex refactoring tasks.
- Reduces technical debt by discouraging the use of temporary UNSAFE_ prefixes.
Usage examples
- “How do I migrate a componentWillMount that fetches data?”
- The skill directs you to Case B in the componentWillMount reference, advising you to move the fetch logic into componentDidMount and handle cleanup in componentWillUnmount.
- “Should I use getDerivedStateFromProps for my API call?”
- The skill warns against this, explaining that getDerivedStateFromProps is for pure state derivation only, and guides you to use componentDidUpdate for asynchronous side effects.
Install
Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/github/react18-lifecycle-patterns/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip react18-lifecycle-patterns.zip -d .agents/skills
Documentation by SaravananRajaraman
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 |
componentWillReceiveProps - what does it do?
| What it does | Correct migration | Reference |
|---|---|---|
| Async side effect triggered by prop change (fetch, cancel) | componentDidUpdate | → componentWillReceiveProps.md |
| Pure state derivation from new props (no side effects) | getDerivedStateFromProps | → componentWillReceiveProps.md |
componentWillUpdate - what does it do?
| What it does | Correct migration | Reference |
|---|---|---|
| Reads the DOM before update (scroll, size, position) | getSnapshotBeforeUpdate | → componentWillUpdate.md |
| Cancels requests / runs effects before update | componentDidUpdate with prev comparison | → componentWillUpdate.md |
The UNSAFE_ Prefix Rule
Never use UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, or UNSAFE_componentWillUpdate as a permanent fix.
Prefixing suppresses the React 18.3.1 warning but does NOT:
Fix concurrent mode safety issues
Prepare the codebase for React 19 (where these are removed, with or without the prefix)
Fix the underlying semantic problem the migration is meant to address
The UNSAFE_ prefix is only appropriate as a temporary hold while scheduling the real migration sprint. Mark any UNSAFE_ prefix additions with:
// TODO: React 19 will remove this. Migrate before React 19 upgrade.
// UNSAFE_ prefix added temporarily - replace with componentDidMount / getDerivedStateFromProps / etc.Reference Files
Read the full reference file for the lifecycle method you are migrating:
references/componentWillMount.md- 3 cases with full before/after codereferences/componentWillReceiveProps.md- getDerivedStateFromProps trap warnings, full examplesreferences/componentWillUpdate.md- getSnapshotBeforeUpdate + componentDidUpdate pairing
Read the relevant file before writing any migration code.
Files
- ATTRIBUTION.mdAdded by AutoGineer905 B
- LICENSELicence file added by AutoGineer1.0 KiB
- SKILL.md3.6 KiB
- references/componentWillMount.md3.7 KiB
- references/componentWillReceiveProps.md5.0 KiB
- references/componentWillUpdate.md4.7 KiB
SKILL.md
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 |
componentWillReceiveProps - what does it do?
| What it does | Correct migration | Reference |
|---|---|---|
| Async side effect triggered by prop change (fetch, cancel) | componentDidUpdate | → componentWillReceiveProps.md |
| Pure state derivation from new props (no side effects) | getDerivedStateFromProps | → componentWillReceiveProps.md |
componentWillUpdate - what does it do?
| What it does | Correct migration | Reference |
|---|---|---|
| Reads the DOM before update (scroll, size, position) | getSnapshotBeforeUpdate | → componentWillUpdate.md |
| Cancels requests / runs effects before update | componentDidUpdate with prev comparison | → componentWillUpdate.md |
The UNSAFE_ Prefix Rule
Never use UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, or UNSAFE_componentWillUpdate as a permanent fix.
Prefixing suppresses the React 18.3.1 warning but does NOT:
Fix concurrent mode safety issues
Prepare the codebase for React 19 (where these are removed, with or without the prefix)
Fix the underlying semantic problem the migration is meant to address
The UNSAFE_ prefix is only appropriate as a temporary hold while scheduling the real migration sprint. Mark any UNSAFE_ prefix additions with:
// TODO: React 19 will remove this. Migrate before React 19 upgrade.
// UNSAFE_ prefix added temporarily - replace with componentDidMount / getDerivedStateFromProps / etc.Reference Files
Read the full reference file for the lifecycle method you are migrating:
references/componentWillMount.md- 3 cases with full before/after codereferences/componentWillReceiveProps.md- getDerivedStateFromProps trap warnings, full examplesreferences/componentWillUpdate.md- getSnapshotBeforeUpdate + componentDidUpdate pairing
Read the relevant file before writing any migration code.
Requirements and compatibility
Written for: GitHub Copilot
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Security
No issues found by our static scan· No issues found
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- First committed by
SaravananRajaraman
- Publisher
- GitHub (Official)
- Distributed by
- GitHub
- Source
- github/awesome-copilot · skills/react18-lifecycle-patterns · commit 797337f
- Licence
- MIT License (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
- Contributors
- SaravananRajaraman
AutoGineer is not affiliated with or endorsed by SaravananRajaraman or GitHub.
Related skills
Implement
Matt Pocock· Community
A structured workflow for implementing software tasks from specifications or tickets.
Software developmentClaude CodeClaude appsOpenAI Codex+14 moreMITGitHub stars of the source repository317.5k
Source Driven Development
Addy Osmani· Community
A rigorous process for grounding code implementation in official, version-specific documentation to ensure accuracy and avoid outdated patterns.
Software developmentClaude CodeClaude appsOpenAI Codex+14 moreMITGitHub stars of the source repository113.9k
Write Swift
Emil Kowalski· Community
A comprehensive guide to writing modern, safe, and performant Swift code following the language's latest idioms and concurrency models.
Software developmentClaude CodeClaude appsOpenAI Codex+14 moreMITGitHub stars of the source repository54.3k
Cardputer Buddy
AnthropicOfficial
Iterate on the Cardputer-Adv MicroPython app bundle (Claude Buddy, Snake, Hello) after the device is already provisioned via m5-onboard. Use when the user wants to add a new app, push a single changed .py without re-flashing, watch device serial logs, or run a one-shot REPL command. Trigger on "add an app", "push to the cardputer", "tail the device", "run on the device", or follow-up work after /maker-setup.
Software developmentClaude CodeClaude appsOpenAI Codex+14 moreApache-2.0GitHub stars of the source repository46.3k
Typescript Pro
Seth Hobson· Community
An expert TypeScript persona focused on advanced typing, enterprise architecture, and strict type safety.
Software developmentClaude CodeMITGitHub stars of the source repository42.3k
Scala Pro
Seth Hobson· Community
An expert Scala engineer persona specializing in functional programming, distributed systems, and enterprise-grade architecture.
Software developmentClaude CodeMITGitHub stars of the source repository42.3k
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download react18-lifecycle-patterns.zip