56 results available

react18-lifecycle-patterns

github

·

Last changed

Hardened

This skill has been hardened by Chainguard

Last changed

This version passed the hardening gate. Hardening applied 5 targeted changes and preserved all other text. Classified findings before hardening: 0. Classified findings closed: 0. Classified findings remaining: 0. Unclassified scanner findings remaining: 0. Review findings closed: 5. Review findings remaining: 3.

Open before hardening

None

Open after hardening

None

Expand	File	Group	Subtype	Severity	Status

No findings available

0 findings

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 does NOT:

Fix concurrent mode safety issues
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: Migrate.
// 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 code
references/componentWillReceiveProps.md - getDerivedStateFromProps trap warnings, full examples
references/componentWillUpdate.md - getSnapshotBeforeUpdate + componentDidUpdate pairing

Read the relevant file before writing any migration code.

Install

Install with chainctl


chainctl skill install public/github/react18-lifecycle-patterns:latest

Get started with chainctl

View source

Harden your own skills

Bring Chainguard's hardening pipeline to your first-party skills — custom rulesets, automated remediation, full audit trail.

Provenance

Upstream sourcehttps://github.com/github/awesome-copilot

Upstream commit2201a49dd6f972ac4f685d03361d58c9c9206690

OCI reference

skills.chainreg.biz/public/github.com/github/skills/react18-lifecycle-patterns:latest

License

MIT

Files

HARDENING.md

LICENSE

SKILL.md

references/componentWillMount.md

references/componentWillReceiveProps.md

references/componentWillUpdate.md

The trusted source for open source

Talk to an expert

Privacy

Terms

© 2026 Chainguard, Inc. All Rights Reserved.
Chainguard® and the Chainguard logo are registered trademarks of Chainguard, Inc. in the United States and/or other countries.
The other respective trademarks mentioned on this page are owned by the respective companies and use of them does not imply any affiliation or endorsement.