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:
