reactjs: how to define componentDidMount inside ES6 const?

Question

I have this react component that is not an ES6 class. It's a const like :

import React from 'react';
import Dashboard from './components/Dashboard';

const Home = (props) => {

    const componentDidMount = () => {
        console.log('component mounted'); // not working
    }


    return <Dashboard />;
}

Inside this const how do i define the componentDidMount function like i would do in a normal ES6 class? this is how i did it before.

import React from 'react';
import Dashboard from './components/Dashboard';

class Dashboard extends React.Component {

    componentDidMount() {
        console.log('component mounted');
    }

    render() {
        return <Dashboard />;
    }

}

score 9 · Accepted Answer · answered Dec 01 '16 at 07:40

9

Stateless functional components don't support the lifecycle methods.

You can either convert it to a stateful component or wrap it in a stateful container.

Good example of wrapping to get the lifecycle methods:

https://egghead.io/lessons/javascript-redux-fetching-data-on-route-change

answered Dec 01 '16 at 07:40

Mark Williams

2,268
1
11
14

i didn't knew that terminology(stateless). thanks, that clears up things – bazi Dec 01 '16 at 07:48

score 6 · Answer 2 · answered Jan 24 '22 at 11:51

To anyone else learning React and stumbling upon this in the future like me, the accepted answer here is out of date. Please see this question: componentDidMount equivalent on a React function/Hooks component?

If using React 16.8.0+ you can create the effect of componentDidMount by using the hook useEffect:

useEffect(() => {
  // Your code here
}, []);

reactjs: how to define componentDidMount inside ES6 const?

2 Answers2