ReactJS lifecycle method inside a function Component

Understanding how components behave throughout their existence is fundamental to building robust and efficient React applications. While class components offered a clear, albeit sometimes verbose, set of lifecycle methods like componentDidMount or componentDidUpdate, the paradigm shifted significantly with the introduction of Hooks. For developers working with modern React, grasping the ReactJS lifecycle method inside a function Component is crucial for managing side effects, data fetching, and subscriptions effectively. This evolution has simplified component logic and improved code reusability, but it requires a fresh perspective on how traditional lifecycle phases are mapped to the Hook-based approach. This guide will demystify these concepts, providing a clear roadmap for leveraging the power of functional components.

Embracing the Functional Component Paradigm Shift

The transition from class components to functional components, especially with the advent of Hooks in React 16.8, marked a significant turning point in how developers approach component logic. Before Hooks, managing a ReactJS lifecycle method inside a function Component was not directly possible; functional components were stateless and couldn’t handle side effects or state. This meant complex logic often necessitated class components, leading to issues like wrapper hell, prop drilling, and difficulty in reusing stateful logic across different components. Hooks, particularly useState and useEffect, changed everything, empowering functional components with capabilities previously exclusive to classes.

This paradigm shift has led to more concise, readable, and testable code. Functional components, when combined with Hooks, allow developers to encapsulate stateful logic and side effects directly within the component function. This eliminates the need for this binding and simplifies the overall component structure, making it easier to reason about the flow of data and actions. As a result, the community has largely moved towards functional components as the preferred way to write React applications, focusing on composability and reusability.

The core idea behind this shift is to decouple concerns. Instead of a single class component handling state, rendering, and various lifecycle events, functional components with Hooks allow you to “hook into” React’s features. This modularity means you can extract and reuse logic without restructuring your component hierarchy, leading to a more maintainable codebase. For a deeper dive into the foundations of React Hooks, explore the official React documentation on Hooks.

The useEffect Hook: Your Lifecycle Workhorse

Functional components in React manage side effects and mimic lifecycle behaviors primarily through the useEffect hook. This hook allows you to perform data fetching, subscriptions, manual DOM manipulations, and other side effects after the component renders, providing a unified API for actions traditionally handled by componentDidMount, componentDidUpdate, and componentWillUnmount. It’s the most powerful tool for implementing a ReactJS lifecycle method inside a function Component.

The useEffect hook accepts two arguments: a function containing the side effect code and an optional dependency array. If the dependency array is omitted, the effect runs after every render, mimicking componentDidMount and componentDidUpdate combined. If an empty array [] is provided, the effect runs only once after the initial render, similar to componentDidMount. When dependencies are included in the array, the effect re-runs only if any of those dependencies have changed between renders, providing fine-grained control over when side effects execute.

Furthermore, useEffect can return a “cleanup” function. This cleanup function is executed before the component unmounts, or before the effect re-runs due to a dependency change. This mechanism is crucial for preventing memory leaks and ensuring resources are properly released, effectively replacing componentWillUnmount. Examples include unsubscribing from event listeners, clearing timers, or canceling network requests. This integrated approach simplifies managing the entire lifecycle of a side effect within a single hook call, making your code cleaner and less error-prone.

Understanding useEffect’s Dependency Array

The dependency array is a critical aspect of useEffect’s behavior. It dictates when the effect function should re-run. Misunderstanding or misusing it can lead to bugs, performance issues, or infinite loops. React performs a shallow comparison of values in the dependency array. If any value changes, the effect re-runs. If the values remain the same, the effect is skipped, optimizing performance.

• Empty Array ([]): The effect runs only once after the initial render. Ideal for setup logic that doesn’t depend on props or state, like event listeners or data fetching that doesn’t need to re-fetch.
• No Array (omitted): The effect runs after every render. Useful for effects that need to constantly synchronize with the DOM or component state, though often a sign that dependencies might be missing.
• Array with Dependencies ([prop1, state2]): The effect re-runs only when any of the specified dependencies change. This is the most common and powerful use case, allowing precise control over when side effects execute.

It’s important to include all values from the component’s scope (props, state, functions) that the effect relies on in the dependency array. Failing to do so can lead to stale closures, where the effect “sees” outdated values from a previous render. Linting tools like eslint-plugin-react-hooks can help enforce this rule, guiding you towards correct usage.

Common Use Cases and Patterns with useEffect

The versatility of useEffect makes it suitable for a wide range of scenarios where a ReactJS lifecycle method inside a function Component would typically be needed. Here are some common patterns:

1. Data Fetching

One of the most frequent uses of useEffect is for fetching data when a component mounts or when certain dependencies change. This pattern effectively replaces componentDidMount and componentDidUpdate for data retrieval.

import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchUser = async () => { setLoading(true); setError(null); try { const response = await fetch(https://api.example.com/users/${userId}); if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); } const data = await response.json(); setUser(data); } catch (e) { setError(e); } finally { setLoading(false); } }; fetchUser(); // Cleanup function for aborting fetch on unmount or dependency change return () => { // Potentially abort ongoing fetch operations if using AbortController // For simplicity, not implemented here, but important for real apps. }; }, [userId]); // Re-fetch when userId changes if (loading) return <p>Loading user profile...</p>; if (error) return <p>Error: {error.message}</p>; if (!user) return <p&gt
<b>Question & Answer : </b><br></br><p>Instead of writing my components inside a class, I'd like to use the function syntax.</p> <p>How do I override componentDidMount, componentWillMount inside function components?<br></br> Is it even possible?</p> const grid = (props) => { console.log(props); let {skuRules} = props; const componentDidMount = () => { if(!props.fetched) { props.fetchRules(); } console.log('mount it!'); }; return( <Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}> <Box title="Sku Promotion"> <ActionButtons buttons={actionButtons} /> <SkuRuleGrid data={skuRules.payload} fetch={props.fetchSkuRules} /> </Box> </Content> ) } 
<br></br><p><strong>Edit:</strong> With the introduction of <a href="https://reactjs.org/docs/hooks-intro.html" rel="noreferrer">Hooks</a> it is possible to implement a lifecycle kind of behavior as well as the state in the functional Components. Currently </p> <blockquote> <p>Hooks are a new feature proposal that lets you use state and other React features without writing a class. They are released in React as a part of <strong>v16.8.0</strong></p> </blockquote> <p>useEffect hook can be used to replicate lifecycle behavior, and useState can be used to store state in a function component.</p> <p>Basic syntax: </p> useEffect(callbackFunction, [dependentProps]) => cleanupFunction  <p>You can implement your use case in hooks like</p> const grid = (props) => { console.log(props); let {skuRules} = props; useEffect(() => { if(!props.fetched) { props.fetchRules(); } console.log('mount it!'); }, []); // passing an empty array as second argument triggers the callback in useEffect only after the initial render thus replicating `componentDidMount` lifecycle behaviour return( <Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}> <Box title="Sku Promotion"> <ActionButtons buttons={actionButtons} /> <SkuRuleGrid data={skuRules.payload} fetch={props.fetchSkuRules} /> </Box> </Content> ) }  <p>useEffect can also return a function that will be run when the component is unmounted. This can be used to unsubscribe to listeners, replicating the behavior of componentWillUnmount:</p> <p><strong>Eg: componentWillUnmount</strong></p> useEffect(() => { window.addEventListener('unhandledRejection', handler); return () => { window.removeEventListener('unhandledRejection', handler); } }, [])  <p>To make useEffect conditional on specific events, you may provide it with an array of values to check for changes:</p> <p><strong>Eg: componentDidUpdate</strong></p> componentDidUpdate(prevProps, prevState) { const { counter } = this.props; if (this.props.counter !== prevState.counter) { // some action here } }  <p>Hooks Equivalent</p> useEffect(() => { // action here }, [props.counter]); // checks for changes in the values in this array  <p>If you include this array, make sure to include all values from the component scope that change over time (props, state), or you may end up referencing values from previous renders.</p> <p>There are some subtleties to using useEffect; check out the API <a href="https://reactjs.org/docs/hooks-reference.html#useeffect" rel="noreferrer">Here</a>.</p> <hr></hr> <p><strong>Before v16.7.0</strong></p> <p>The property of function components is that they don't have access to Reacts lifecycle functions or the this keyword. You need to extend the React.Component class if you want to use the lifecycle function.</p> class Grid extends React.Component { constructor(props) { super(props) } componentDidMount () { if(!this.props.fetched) { this.props.fetchRules(); } console.log('mount it!'); } render() { return( <Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}> <Box title="Sku Promotion"> <ActionButtons buttons={actionButtons} /> <SkuRuleGrid data={skuRules.payload} fetch={props.fetchSkuRules} /> </Box> </Content> ) } }  <p>Function components are useful when you only want to render your Component without the need of extra logic.</p>