ReactJS lifecycle method inside a function Component

ghz 6months ago ⋅ 333 views

Instead of writing my components inside a class, I'd like to use the function syntax.

How do I override componentDidMount, componentWillMount inside function components? Is it even possible?

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>  
    )
}

Answers

In function components, you cannot directly replicate lifecycle methods like componentDidMount or componentWillMount as you do in class components. However, you can achieve similar behavior using the useEffect hook in React.

Here's how you can achieve similar functionality in your function component:

import React, { useEffect } from 'react';

const Grid = (props) => {
    useEffect(() => {
        if (!props.fetched) {
            props.fetchRules();
        }
        console.log('mount it!');
    }, []); // Empty dependency array to ensure this effect runs only once after the initial render

    const { skuRules } = props;
    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>  
    );
}

export default Grid;

In this modified code:

  • We use the useEffect hook to perform side effects in function components. The function passed to useEffect will be executed after every render by default, but we pass an empty dependency array [] as the second argument to ensure that the effect only runs once after the initial render, simulating the behavior of componentDidMount.
  • Inside the useEffect callback, we check if props.fetched is false, and if so, we call props.fetchRules() to fetch the rules.
  • The rest of the component remains the same as in your original code.

By using useEffect, you can achieve similar behavior to componentDidMount in function components. Similarly, you can use other lifecycle methods like componentDidUpdate by providing appropriate dependencies in the dependency array.

#javascript