Understanding React Component Simple Guide

Imagine a component as an actor in a play. It has different stages in its "life" on the stage, just like the actor has different stages in the play. In React, these stages are called the component lifecycle. Understanding these stages is crucial for building dynamic and efficient React applications.

React 18 introduces a new approach to managing the lifecycle compared to previous versions. While traditional lifecycle methods are still available, the recommended approach is using hooks like useEffect. This article will explain both approaches in simple terms with examples.

The three main stages of a component's lifecycle are:

1. Mounting: This is like the actor entering the stage for the first time. The component is inserted into the DOM (Document Object Model), and any necessary setup is done here. This includes things like fetching data, setting up subscriptions, or initializing state.

Example:

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty dependency array ensures this effect runs only once on mount

  return (
    <div>
      <h1>My Component</h1>
      {data.map(item => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}        

1. Updating: This is like the actor reacting to events or changes in the play. The component updates its state or performs actions based on changes in props, user interactions, or other events.

Example:

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}        

1. Unmounting: This is like the actor leaving the stage at the end of the play. The component is removed from the DOM, and any cleanup tasks are performed, such as removing subscriptions or clearing timers.

Example:

function MySubscription() {
  const [message, setMessage] = useState(null);

  useEffect(() => {
    const subscription = someService.subscribe(message => setMessage(message));
    return () => subscription.unsubscribe(); // Cleanup function for unmount
  }, []);

  return (
    <div>
      <p>Received message: {message}</p>
    </div>
  );
}        

While understanding traditional lifecycle methods can be helpful, focusing on using useEffect them for most scenarios is recommended in React 18. It provides a cleaner and more declarative way to manage component behavior throughout its lifecycle.

Remember:

• The component lifecycle helps you manage the different stages of a component's existence.
• useEffect is the preferred approach for handling most lifecycle needs in React 18.
• Each stage (mounting, updating, unmounting) has specific purposes and allows you to perform necessary actions.

By understanding the component lifecycle, you can build more robust and efficient React applications!

Follow me on GitHub

https://github.com/kedarvijaykulkarni/