React Functional Component: how to use componentDidMount()

March 11, 2022

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?

>Solution :

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