Component Lifecycle

Mounting
- Render
- Commit
Updating
- Cleanup
- Render
- Commit
Unmounting
- Cleanup

Lifecycle

      import React, 
  { render, useState, useEffect } from "react";

function getCount() {
    return document.querySelector("p")?.innerText;
}

const LifecycleDemo = () => {
  const [count, setCount] = useState(0);

  // Runs during rendering
  console.log("Rendering: " + getCount())

  // Runs only once when the component is mounted
  useEffect(() => {
    console.log("Mounted: " + getCount());

    // Cleanup: Runs when the component unmounts
    return () => {
      console.log("Unmounted");
    };
  }, []); // Dependency array is empty, 
          // so it runs only on mount and unmount.

  // Runs every time 'count' changes
  useEffect(() => {
    console.log(`Updated to "${getCount()}"`);

    // Cleanup: Runs before the next effect or on unmount
    return () => {
      console.log(`Cleanup count changes or unmount: ${count}`);
    };
  }, [count]); // Dependency array has 'count', 
               // so it runs when 'count' changes.

  return (
    <div>
      <h1>React Lifecycle with useEffect</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
};

function App() {
  const [show, setShow] = useState(true);
  return (
    <>
      {show && <LifecycleDemo />}
      <button onClick={() => setShow(!show)}>Toggle</button>
    </>
  )
}

render(<App />)

      body { 
    padding: 16px;  
    font-size: 24px;
}

p, h1 {
    margin: 2px 0px;
}

h1 {
    font-size: 32px;
}

Let's consider a simple component that renders a count value and a button that changes the count value. Note that the count value is rendered in the p element.

We can show or hide this component by clicking the Toggle button.

We also create a helper function getCount, that returns the value rendered in the p element, or null, if the p element does not exist.

Now, we see several logs in the console. The first message shows that the component is rendering, and the p element showing the count value does not exist. This is correct, as during this phase, the rendering is done in React's VDOM, and nothing has been committed or rendered in the browser.

We will now use useEffect hook to render a message when this component initially renders into your browser.

Particularly, note that the second message in the console shows that the component has been mounted and that the value in the p element shows the correct value! At this stage everything is rendered in the dom.

The useEffect comes equipped with a dependency array and executes only variables provided in this dependency array change. Since nothing is provided to this array, the useEffect only executes once when the component is mounted and unmounted.

We also have another useEffect hook that tracks changes in the count variable and executes only when the count changes. You can see the message in the console with the value of the count variable.

Note the use of the count variable in the dependency array of this hook.

Now, take a look at what happens when we click on the Increment button. First, we see that the component started to render, and the p element still shows the old value.

Then, we clean up after a previous update. The cleanup function is returned from the useEffect hook and executes prior to next commit or unmount. This time, we only logged a message that the cleanup is performed.

Then, the react changes are committed, and a new count value is displayed to the user.

Last, we hide the component by clicking on the Toggle button. Similarly, to clean up after the update of the count state variable, we return the cleanup function from the useEffect with no dependencies.

Last, we also see that the cleanup of the last update is performed.

Lifecycle /

Example

      import { render, useState, useEffect } from "react";

// Custom Hook: Fetches data from an API
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let isCancelled = false;

    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(
            `HTTP error! Status: ${response.status}`
          );
        }
        const result = await response.json();
        if (!isCancelled) {
          setData(result);
        }
      } catch (err) {
        if (!isCancelled) {
          setError(err.message);
        }
      } finally {
        if (!isCancelled) {
          setLoading(false);
        }
      }
    };

    fetchData();

    // Cleanup function to cancel updates if the component unmounts
    return () => {
      isCancelled = true;
    };
  }, [url]); // Re-run when the URL changes

  return { data, loading, error };
};

const App = () => {
  const { data, loading, error } = useFetch(
    "https://jsonplaceholder.typicode.com/posts"
  );

  return (
    <div>
      <h1>Data Fetch Hook Example</h1>
      {loading && <p>Loading...</p>}
      {error && <p style={{ color: "red" }}>Error: {error}</p>}
      {data && (
        <ul>
          {data.slice(0, 5).map((post) => (
            <li key={post.id}>
              <strong>{post.title}</strong>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

render(<App />)

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}