React : lifecycle

In React, the term "lifecycle" refers to the series of methods that are invoked at different stages of a component's existence, from initialization to destruction. These lifecycle methods allow you to perform specific tasks or implement logic at certain points in a component's lifecycle.

React's lifecycle can be divided into three main phases:

1. Mounting: This phase occurs when a component is being created and inserted into the DOM.
   • constructor(): This method is called when a component is being initialized. It is used to set up the component's initial state and bind event handlers.
   • static getDerivedStateFromProps(): This static method is called right before rendering and allows you to update the component's state based on changes in props.
   • render(): This method is responsible for generating the JSX that represents the component's UI.
   • componentDidMount(): This method is invoked immediately after the component is mounted to the DOM. It is commonly used to initialize third-party libraries, fetch data from APIs, or set up subscriptions.
2. Updating: This phase occurs when a component's props or state are changed, triggering a re-render.
   • static getDerivedStateFromProps(): Similar to the mounting phase, this method is called before rendering to update the state based on prop changes.
   • shouldComponentUpdate(): This method allows you to control whether a component should re-render or not. By default, it returns true, but you can optimize performance by implementing custom logic to determine if a re-render is necessary.
   • render(): The render method is called to generate the updated UI representation of the component.
   • componentDidUpdate(): This method is invoked after the component's update has been applied to the DOM. It is commonly used for side effects, such as making additional API requests or updating the DOM based on prop or state changes.
3. Unmounting: This phase occurs when a component is being removed from the DOM.
   • componentWillUnmount(): This method is called just before the component is unmounted and destroyed. It is used for cleanup tasks, such as canceling timers, removing event listeners, or clearing subscriptions.

React has additional lifecycle methods that were used in earlier versions of React, but they have been deprecated or replaced with newer alternatives in recent versions. It's important to consult the React documentation for the specific version you are using to ensure you are using the correct lifecycle methods.

Note: With the introduction of React Hooks in React 16.8, functional components can also use lifecycle-like behavior using hooks such as useEffect() and useLayoutEffect(). These hooks allow you to perform side effects and manage state within functional components.

 

geeksforgeeks.org/reactjs-lifecycle-components/

https://ko.legacy.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React