Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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 fixing React 18 UNSAFE_ lifecycle warnings. Always use this skill before writing any lifecycle migration
.claude/skills/react18-lifecycle-patterns/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-11 | ✗→✓ | ▲ Improved | — | — |
| case-19 | ✗→✓ | ▲ Improved | — | — |
| case-13 | ✓→✓ | ＝ Same ✓ | — | — |
| case-09 | ✓→✓ | ＝ Same ✓ | — | — |
| case-10 | ✗→✗ | ＝ Same ✗ | — | — |
Reference for migrating the three unsafe class component lifecycle methods to React 18.3.1 compliant patterns.
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.
| 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 |
| 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 |
| 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 |
Never use UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, or UNSAFE_componentWillUpdate as a permanent fix.
Prefixing suppresses the React 18.3.1 warning but does NOT:
The UNSAFE_ prefix is only appropriate as a temporary hold while scheduling the real migration sprint. Mark any UNSAFE_ prefix additions with:
jsx// TODO: React 19 will remove this. Migrate before React 19 upgrade. // UNSAFE_ prefix added temporarily - replace with componentDidMount / getDerivedStateFromProps / etc.
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 pairingRead the relevant file before writing any migration code.
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-10 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-22 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-11 | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
case-18 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-13 | pass→pass | — | — | — | — | — | — | — | — | — | — | — | — |
case-03 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-21 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-05 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-20 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-02 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-16 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-19 | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
case-07 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-09 | pass→pass | — | — | — | — | — | — | — | — | — | — | — | — |
case-04 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-14 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-01 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-06 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-08 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-12 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-15 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-17 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +9 percentage points is the difference between those two pass rates over the 22 comparable cases.
The per-case answers from this run were removed by the retention sweep, so the case table below shows the verdicts without the text either arm produced. The counts above were recorded at the time and are unaffected. Answers are now kept for 180 days.
Other measured skills in the registry, with their headline benchmark lift.