Lifecycle Methods in React — refactoring patterns

React, as befits a JavaScript framework, evolves in the course of time. Starting with version 16.3, some of the lifecycle methods became deprecated and instead new methods were introduced.

React Lifecycle Methods Diagram since v16.4 (source)

Refactoring Legacy Lifecycle Methods

Changes in the API mean that the legacy code should be migrated and the new code should conform to the new rules. Recommended patterns for writing code have emerged and are described in the post published on the official React blog. Below code examples for eight typical use cases are presented:

• Initializing state
• Fetching external data
• Adding event listeners (or subscriptions)
• Updating state based on props
• Invoking external callbacks
• Side effects on props change
• Fetching external data when props change
• Reading DOM properties before an update

Initializing state

Fetching external data

Adding event listeners (or subscriptions)

Updating state based on props

Invoking external callbacks

Side effects on props change

Fetching external data when props change

Reading DOM properties before an update

Thanks for reading! 👏👏👏

kwiecien — Overview