ReactJS lifecycle method inside a function Component

Question

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

Answer 1

Edit: With the introduction of Hooks it is possible to implement a lifecycle kind of behavior as well as the state in the functional Components. Currently

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 v16.8.0

useEffect hook can be used to replicate lifecycle behavior, and useState can be used to store state in a function component.

Basic syntax:

useEffect(callbackFunction, [dependentProps]) => cleanupFunction 

You can implement your use case in hooks like

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

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:

Eg: componentWillUnmount

useEffect(() => {     window.addEventListener('unhandledRejection', handler);     return () => {        window.removeEventListener('unhandledRejection', handler);     } }, []) 

To make useEffect conditional on specific events, you may provide it with an array of values to check for changes:

Eg: componentDidUpdate

componentDidUpdate(prevProps, prevState) {      const { counter } = this.props;      if (this.props.counter !== prevState.counter) {       // some action here      } } 

Hooks Equivalent

useEffect(() => {      // action here }, [props.counter]); // checks for changes in the values in this array 

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.

There are some subtleties to using useEffect; check out the API Here.

---

Before v16.7.0

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.

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

Function components are useful when you only want to render your Component without the need of extra logic.