react18-lifecycle-patterns
Offers migration patterns for unsafe lifecycle methods in React 18 class components. It helps choose between alternative methods.
What it does
Helps update old 'lifecycle' methods in React code to newer versions. It shows how to move code parts to the correct places so they work well with recent React versions.
When to use it
- ✓When you have old React code using lifecycle methods that are no longer recommended.
- ✓When deciding whether to use 'getDerivedStateFromProps' or 'componentDidUpdate'.
- ✓When you need to add 'getSnapshotBeforeUpdate' to handle updates.
Example of what to ask your AI
“How do I migrate the 'componentWillMount' method that sets initial state in my React component?”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
This guide compares what an old method does to the new ways of doing the same thing in React 18. It directs you to specific examples based on the old method's function.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add github/awesome-copilot --skill react18-lifecycle-patternsOr download just the file:
curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/react18-lifecycle-patterns/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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.
FAQ
What are 'lifecycle methods'?
These are special functions in React components that run code at specific times, like when the component is created, updated, or removed.
Why can't I just use the old methods like 'UNSAFE_componentWillMount'?
Using the 'UNSAFE_' prefix just hides a warning but doesn't fix compatibility issues with newer React versions. It's a temporary fix, not a permanent solution.
Where can I find the code examples for migration?
Detailed examples are in separate reference files like 'componentWillMount.md', 'componentWillReceiveProps.md', and 'componentWillUpdate.md', which the guide points to.
Details
Original description by the author
Provides exact before/after migration patterns for the three unsafe class component lifecycle methods - componentWillMount, componentWillReceiveProps, and componentWillUpdate - targeting React 18.3.1. Use this skill whenever a class component needs its lifecycle methods migrated, when deciding between getDerivedStateFromProps vs componentDidUpdate, when adding getSnapshotBeforeUpdate, or when fixi
repo: github/awesome-copilot
Popularity
- GitHub stars
- 40k
- Ranking position
- #5330
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
acquire-codebase-knowledge
Helps your agent understand and document an existing code project. It's useful for onboarding new people or getting an overview of the architecture.
github/awesome-copilot
acreadiness-assess
Enables your agent to assess a project's readiness for AI and generate a report. It's useful for understanding how well a project is prepared to use AI tools.
github/awesome-copilot
acreadiness-generate-instructions
Helps your agent create instructions for AI tools based on an assessment. It's useful for improving how AI interacts with code and closing identified gaps.
github/awesome-copilot
acreadiness-policy
Enables your agent to help define or apply policies for AI project assessment. It's useful for standardizing how projects are evaluated and ensuring compliance.
github/awesome-copilot
Similar skills
angular-developer
Helps your agent create Angular code and give project structure advice. Useful for starting new projects, creating code parts, or improving performance and accessibility.
affaan-m/ECC
frontend-a11y
Helps your agent make web interfaces accessible to everyone. It ensures websites and apps work well with screen readers and keyboard navigation.
affaan-m/ECC
frontend-patterns
Has your agent apply modern patterns in frontend development. It optimizes performance, manages state, and follows best practices in React and Next.js.
affaan-m/ECC