Functional Component Lifecycle

Code Example - Functional Component Lifecycle

                
                        Functional Component Lifecycle Diagram for React:

https://wavez.github.io/react-hooks-lifecycle/
                    
                
 

how to use componentdidmount in functional component

                        
                                // passing an empty array as second argument triggers the callback in useEffect
// only after the initial render thus replicating `componentDidMount` lifecycle behaviour
useEffect(() => {
  if(!props.fetched) {
 	 props.fetchRules();
  }
  console.log('mount it!');
}, []);

// componentDidUpdate
useEffect({
	your code here
}) 

// For componentDidUpdate
useEffect(() => {
  // Your code here
}, [yourDependency]);

// For componentWillUnmount
useEffect(() => {
  // componentWillUnmount
  return () => {
     // Your code here
  }
}, [yourDependency]);