DEV Community

Cover image for πŸ”„ Class Components vs Functional Components: A Lifecycle Journey in React πŸ”„
MAYANK TYAGI
MAYANK TYAGI

Posted on

πŸ”„ Class Components vs Functional Components: A Lifecycle Journey in React πŸ”„

If you're starting with React in 2024, you'll likely notice that most tutorials and blogs prefer using functional components over class components. The reason is that functional components, especially with the useEffect hook, offer simpler code organization.

However, it's essential to know about class components too. In the real world, many projects still use class components, gradually shifting towards functional components. To become a solid React developer, you should understand both.

This article will walk you through the different lifecycle methods in class components and show their equivalent usage with the useEffect hook in functional components. Learning both approaches will make you more versatile and ready for various React projects.

Lifecycle Methods in Class Components:

1. componentDidMount:

   componentDidMount() {
     // Executes after the component is inserted into the DOM
     // Ideal for initial data fetching or subscriptions
   }
Enter fullscreen mode Exit fullscreen mode

2. componentDidUpdate:

   componentDidUpdate(prevProps, prevState) {
     // Executes after a component's update causes a re-render
     // Good for reacting to prop or state changes
   }
Enter fullscreen mode Exit fullscreen mode

3. componentWillUnmount:

   componentWillUnmount() {
     // Executes just before the component is removed from the DOM
     // Useful for cleaning up resources like subscriptions
   }
Enter fullscreen mode Exit fullscreen mode

Lifecycle Methods in Functional Components with useEffect:

1. useEffect with Empty Dependency Array:

   useEffect(() => {
     // Similar to componentDidMount
   }, []);
Enter fullscreen mode Exit fullscreen mode

2. useEffect with Dependency Array:

   useEffect(() => {
     // Similar to componentDidUpdate
   }, [dependency]);
Enter fullscreen mode Exit fullscreen mode

3. Cleanup with useEffect:

   useEffect(() => {
     return () => {
       // Similar to componentWillUnmount
     };
   }, []);

   // Or, using the same effect with dependency:
   useEffect(() => {
     // Effect code

     return () => {
       // Cleanup code
     };
   }, [dependency]);
Enter fullscreen mode Exit fullscreen mode

Why Does This Matter?

  • Clear and Simple:

    • Functional components with hooks make managing lifecycles straightforward and easy to understand.
  • Easy Organization:

    • Lifecycles are neatly spread across different useEffect hooks, making your code organized and readable.
  • No More this:

    • You don't need to deal with this in functional components, making your code less prone to bugs and more concise.
  • Consistent Approach:

    • useEffect handles various lifecycle scenarios consistently, offering a reliable way to manage side effects in functional components.

In a Nutshell:

As React grows, the shift from class components to functional components with hooks becomes more evident. This transition provides a simpler and more expressive way to handle component lifecycles. So, jump into the world of hooks, and enjoy writing cleaner and more maintainable React code! πŸš€πŸ§Ή #React #Hooks #FunctionalComponents #WebDevelopment #JavaScript

Thanks for reading.

β€œDon’t miss out” Follow my Social handlesπŸ‘‰

Subscribe to my YouTube channel😊

Instagram 😊 || Twitter 😊

If you find this helpful and want to supportπŸ’² Buy Me Coffee β˜•

Top comments (0)