React js Life cycle

Mount
Update
unmount

Function component

Mount:
useEffect(() => {...}, []): The useEffect hook with an empty dependency array runs only once after the initial render, similar to componentDidMount.

Update:
useEffect(() => {...}, [dependencies]): When you pass dependencies to useEffect, it will run whenever one of the dependencies (state or props) changes, similar to componentDidUpdate.
useState(): This hook updates the state, triggering a re-render.
useMemo() and useCallback(): These hooks help in optimizing performance during updates by memoizing values and functions.

Unmount:
useEffect(() => {... return () => {...}}): You can return a cleanup function from useEffect to run when the component unmounts, similar to componentWillUnmount.

Class component

Mount:
constructor()
Initializes the component, sets up state, and binds methods.

getDrivedStateFromProps()
Syncs state with props before rendering. Not often used.

render()
Describes what to render (UI) and returns JSX.

componentDidMount()
Called after the component is mounted (useful for fetching data, setting
up subscriptions).

Update:
getDrivedStateFromProps()
Syncs state with props before rendering (also called during updates).

shouldComponentUpdate()
Decides if a re-render is needed (used for performance optimizations)

render()
Re-renders the component when state or props change.

getSnapshotBeforeUpdate()
Captures information (like scroll position) before the DOM changes

componentDidUpdate()
Called after the component has re-rendered (useful for interacting with
DOM or network requests).

Unmount:
componentWillUnmount()
Called before the component is removed from the DOM (used for cleanup,
such as removing subscriptions)

Error Handling
componentDidCatch()
Catches errors in child components and allows error handling (React
16 ).

The above is the detailed content of React js Life cycle. For more information, please follow other related articles on the PHP Chinese website!