Sunday, 8 November 2026

Lifecycle methods and equivalent React Hooks

 



Class lifecycle method

Functional component equivalent

constructor()

useState() / initialization

componentDidMount()

useEffect(() => {}, [])

componentDidUpdate()

useEffect() with dependencies

componentWillUnmount()

Cleanup function in useEffect()

shouldComponentUpdate()

React.memo, useMemo, useCallback

getDerivedStateFromProps()

Usually calculate during render; sometimes useState

getSnapshotBeforeUpdate()

useLayoutEffect() for layout-related work

componentDidCatch()

No direct Hook equivalent; use Error Boundary

getDerivedStateFromError()

No direct Hook equivalent; use Error Boundary

Important: Hooks are not exact one-to-one replacements for every lifecycle method. They provide similar functionality through different mechanisms.

Lifecycle methods and equivalent React Hooks

  Class lifecycle method Functional component equivalent constructor() useState() / initialization componentDidMount() useEffect(() =...