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?

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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