React Function Component - Lifecycle


lifecycle rendering in functional component are managed through effect

  • A mount run the body of the effect function (equivalent to a mount)
  • A unmount (called also cleanup) runs the function returned by the effect ejection (equivalent to an unmount)
  • An update runs the mount and unmount (cleanup) code - Why ? As effects run for every render and not just once, React also cleans up effects from the previous render before running the effects next time. You can still skip this for perf reason.

For a class component, see class lifecycle method



  • A component with useEffect (that shows the mapping with the class lifecycle functions componentWillUnmount and componentDidMount).
function LifeCycle(props) {

    const [updateCount, setUpdateCount]= React.useState(0);
    React.useEffect(() => {
       console.log("Effect function has run         - same life-cycle as componentDidMount and componentDidUpdate");
        // Specify how to clean up after this effect:
          return function cleanup() {
             console.log("Cleanup Effect function has run - same life-cycle as componentWillUnmount");
    function handleClick(e) {
    return (
        <h2>LifceCycle Component</h2>
        <p>The lifecycle Component sees {props.count} clicks and {updateCount} update count.</p>

        <p>An update mounts and unmounts (cleanup). Try it by clicking below</p>
       <button type="button" onClick={handleClick}>Update the component</button>
  • The App to mount and unmount the previous lifecycle component and triggers the effect and its return cleanup function
function App() {

   const [toggle, setToggle]=React.useState(false);
   const [count, setCount]=React.useState(0);
   function handleClick(e) {
     setToggle(toggle ? false : true);
  let cycle = null;
  if (toggle) {
    cycle = <LifeCycle count={count}/>;
  return (
        <h1>Mount/Unmount/Update Demo</h1>
        <button type="button" onClick={handleClick}>{toggle ? 'Unmount the lifecycle component' : 'Mount the lifecycle component'}</button>
  • The classic Render to start the rendering. When <Lifecycle /> is passed to ReactDOM.render(), React calls the constructor of the Clock component, then calls the Clock component's render() method.
  <App />,
<div id="root">
<!-- called the "root" DOM node because everything inside it will be managed by React DOM -->

Discover More
React Render Element Splittsing
React - (Component) Updating

updating is a lifecycle render step that updates a component. An update is triggered by a change of state. See See React DOM compares the new element and its children to the previous one,...
React - Function Component

This page is the writing of a component with the functional syntax In Jsx A UD DOM component defining the Welcome tag A React element using this DOM tag Rendering The standard mandatory...
React - Rendering (Lifecycle)

This page is rendering in React (ie update of the DOM) To make the UI interactive, you need to be able to trigger changes to your underlying data model. The root element is the element passed to...
React Class Component - Rendering (Mounting/Unmounting)

for a class component In a class component, mounting and unmounting are methods: componentDidMount: Runs after the component output has been rendered to the DOM componentWillUnmount componentDidUpdate...
React Hook Side Effect Doc Title
React Function Component - (Side) Effect (useEffect Hook)

Effect Hook is a hook that lets you perform side effects in functional components, and is similar to lifecycle methods in classes. An effect is also known as a side-effect Example of effect: Data...
What is the useState Hook and how to use it? Local State in a React Function Component

This page is the local state (known as the state in react) in a React Functional Component. In this context, the state is managed by the useState hook. The local state in React is managed with the...

Share this page:
Follow us:
Task Runner