React constructor(), componentDidmount with props variable

Question

Where I can call the constructor() and componentDidmount event with below code:

export const Home = props => (props.isAuthenticated ? (
  <DashBoard {...props} />
) : (<Marketing {...props} />));

What is the meaning of the above code and how it's work?

Its a functional component. You can't call constructor in there. Either use hooks or handle condition on those respected components(eg DashBoard or Marketing one) — Shubham Verma, Jan 06 '20 at 07:11
you may find your [answer here](https://stackoverflow.com/questions/36097965/when-to-use-es6-class-based-react-components-vs-functional-es6-react-components) — Jigar Shah, Jan 06 '20 at 07:13

score 2 · Answer 1 · answered Jan 06 '20 at 07:16

This is a functional component, correctly formatted is probably a little easier to read:

export const Home = props => (
  props.isAuthenticated ? ( 
    <DashBoard {...props} /> // if authenticated return and render Dashboard
  ) : (
    <Marketing {...props} /> // else return and render Marketing
  )
);

In functional components use the useEffect hook with an empty dependency array to achieve the equivalent of a class-based component's componentDidMount. Hooks are called on mount and whenever a variable in its dependency array are updated.

effect hook

export const Home = props => {
  useEffect(() => console.log("I just mounted!", []); // empty so called once when the component is mounted

  return (
    props.isAuthenticated ? ( 
      <DashBoard {...props} /> // is authenticated return and render Dashboard
    ) : (
      <Marketing {...props} /> // else return and render Marketing
    )
  );
};

score 0 · Answer 2 · answered Jan 06 '20 at 07:15

You cannot use react lifecycle hooks in a functional component. Refer to react documentation below for usage of lifecycle hooks, and to convert functional components to class components.

https://reactjs.org/docs/state-and-lifecycle.html

export default class Home extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {}

  render() {
    const { isAuthenticated } = this.props;
    return (
      <>
        {isAuthenticated ? <DashBoard {...this.props} /> : <Marketing {...this.props} />}
      </>
    );
  }
}

score 0 · Answer 3 · answered Jan 06 '20 at 07:21

export const Home = props => (props.isAuthenticated ? (
  <DashBoard {...props} />
) : (<Marketing {...props} />));

Details

So the above code is a functional component, currently functional components can handle all the lifecycle methods that we use in class based components

So prev, before 16.8 of reactjs we can have state and life cycle methods in a functional components, It was only used for rendering the elements like as a presentational components. So at a point for complex applications we need to convert the functional components to class based components to handle a single state change

So this made the evolution of hooks, you can read more on the official docs of react js

So comming to your case if you need to call the method in componentDidMount, you can call as shown below

useEffect(() => { // your logic same as componentDidMount in class based components }, [])

So the second argument is the dependencies for the useEffect to trigger

if you pass it as like this it will call every time

useEffect(() => {})

If you pass it as like this it will call whenever the passed variable changes from props or state

useEffect(() => {}, [data, userName])

I hope this will give a better understanding of the problem

React constructor(), componentDidmount with props variable

3 Answers3