React Functional Component: how to use componentDidMount()

Question

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?

Answer 1

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: https://reactjs.org/docs/hooks-intro.html

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

Answer 2

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:- https://reactjs.org/docs/hooks-effect.html

Answer 3

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

Answer 4

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: https://reactjs.org/docs/hooks-effect.html