I have a function which is technically a React Functional Component:

export default function Daw() { return ( <> <div>Hello world.</div> </> ); } 

Of course, my ordinary function cannot have the ReactJS method of componentDidMount(). Since it is not a class which extends React.PureComponent.

I'm using this function inside a ReactJS web app.

export default function Daw() { componentDidMount() { // ** Cannot use this ReactJS method!? } return ( <> <div>Hello world.</div> </> ); } 

Question

How can I possibly call componentDidMount() method of ReactJS inside my ordinary function? Is there a way to do it, without converting my function to a class which extends React.PureComponent? Is it possible?

4 Answers

First import useEffect from react

import { useEffect } from "react";

Then use useEffect with an empty dependency array,it is same as componentDidMount()

useEffect(() => { console.log("Mounted"); },[]);

Refer react official documentation for learning all lifecycle methods using useEffect hook:-

You're going to need React Hooks! All life-cycle methods we were doing in class components are available in functional components too via React Hooks, even in a better way. Read more about React hooks here:

And in this case, the equivalent of componentDidMount is this:

import { useEffect } from 'react' export default function Daw() { useEffect(() => { // Code here will run just like componentDidMount }, []) return ( <> <div>Hello world.</div> </> ) } 

You can also learn about Effects in React by reading my article: A Beginner’s Guide to Effects in React

You cannot use componentDidMount() (class lifecycle methods) in React functional components. Instead you can use useEffect hook to perform the same operation. Like this:

useEffect(() => { }, []); 

Check here for more info - Similar Question

yes, you can use useEffect hook. useEffect has the following abilities of class methods .i.e. componentDidMount, componentDidUpdate and componentWillUnmoun.

refer following info from official doc: