---
title: "React 18 Lifecycle Patterns - Air Market"
description: "You have older class components and React keeps warning about the lifecycle methods they use. This gives you the before-and-after version of each rewrite, plus decision trees for the choices that are…"
canonical: "https://airmarket.ai/app/react18-lifecycle-patterns"
---

[Air Market](/) / [Developer Tools](/category/devtools) / React 18 Lifecycle Patterns

Skill by [GitHub](/@github)

# React 18 Lifecycle Patterns

Move old class components off the lifecycle methods React now warns about

## What this does

You have older class components and React keeps warning about the lifecycle methods they use. This gives you the before-and-after version of each rewrite, plus decision trees for the choices that are easy to get wrong. Reach for it before you start editing, rather than working the pattern out from memory.

### Top 3 things it does for you

- Rewrite componentWillMount, componentWillReceiveProps and componentWillUpdate
- Decide between getDerivedStateFromProps and componentDidUpdate
- Clear UNSAFE_ lifecycle warnings from React 18

## Information

**React 18 Lifecycle Patterns at a glance**

|  |  |
| --- | --- |
| Kind | Skill |
| Publisher | [GitHub](/@github) |
| Category | [Developer Tools](/category/devtools) |
| Works with | Agent Skills - an open standard supported by 40+ agents |
| Size | 17 KB |
| Licence | MIT |
| Repository | [github/awesome-copilot](https://github.com/github/awesome-copilot/tree/90921cc46f4e452ea379e70884d60ec25263f16a/skills/react18-lifecycle-patterns) |
| GitHub stars | 38,187 (as of Nov 2026) |
| Installs | 745, counted by skills.sh (Nov 2026) |

## Security report

**Verified.** AIR scanned this exact version of React 18 Lifecycle Patterns and flagged nothing. AIR's verdict: **safe**.

**What React 18 Lifecycle Patterns's check was run against**

|  |  |
| --- | --- |
| Commit | 90921cc46f4e452ea379e70884d60ec25263f16a |
| Content hash | 8673380ecc7e4342658c79b9416cb42c2860cc1962b5713a21aa4d73ba77e926 |
| Files read | [Browse the files at this exact commit](https://github.com/github/awesome-copilot/blob/90921cc46f4e452ea379e70884d60ec25263f16a/skills/react18-lifecycle-patterns/SKILL.md) |

A scan is named by the exact content it read, not by a version number. A different version is a different artifact, and nothing here applies to a version AIR has not scanned.

[Read the full security report for React 18 Lifecycle Patterns](/security/react18-lifecycle-patterns)

## About React 18 Lifecycle Patterns

Three class component lifecycle methods are no longer safe in React: componentWillMount, componentWillReceiveProps and componentWillUpdate. This covers the migration for each of them, targeting React 18.3.1, with the exact before and after form of the change.

It also covers the decisions that come with the rewrite: whether a given case belongs in getDerivedStateFromProps or componentDidUpdate, and when getSnapshotBeforeUpdate is what you need. The decision trees exist because those are the choices where migrations most often go wrong.

Use it when a class component needs its lifecycle methods migrated, or when you are chasing UNSAFE_ warnings, and read it before writing the migration code rather than after.

## What's inside

- SKILL.md - instructions
- references/componentWillMount.md - reference
- references/componentWillReceiveProps.md - reference
- references/componentWillUpdate.md - reference

## Questions

### Is React 18 Lifecycle Patterns safe to install?

AIR scanned this exact version of React 18 Lifecycle Patterns and flagged nothing. AIR's verdict: safe. The verdict is named by the content that was read, at commit 90921cc46f4e, so it cannot drift onto a version nobody scanned. The full report is at https://airmarket.ai/security/react18-lifecycle-patterns.

### How do I install React 18 Lifecycle Patterns?

Open https://airmarket.ai/app/react18-lifecycle-patterns on Air Market and use the install action: Air Market hands Claude a prompt naming this exact skill, and Claude sets it up. Source, pinned to the exact commit this listing describes: https://github.com/github/awesome-copilot/tree/90921cc46f4e452ea379e70884d60ec25263f16a/skills/react18-lifecycle-patterns. Install from that link, not the branch.

## Related on Air Market

- [More Developer Tools listings](/category/devtools)
- [Everything by GitHub](/@github)

---

Canonical URL: <https://airmarket.ai/app/react18-lifecycle-patterns>