correct coding structure in React.js?

Question

I'm new to react and I'm still using the life cycle methods, so my question is since componentDidMount() acts like a constructor I'm planning to initialize everything there:

render() { return ( <div className="done-container" style={this.style().taskContainer}> <span style={this.style().title}>Done</span> { this.props.done.map((d) => ( <div className={`done ${this.state.isActive ? 'active' : ''}`} id={this.props.done.id} onClick={(e) => { this.props.setTaskID(d.id); this.setToActive(e); //3.Call <----- this.props.arrowStyleToDone(); }}> </div> )) } </div> ) } setToActive //1.Declare <---- componentDidMount() { //2.Initialize <----- this.setToActive = (e) => { if(!e.target.classList.contains('active')) { e.currentTarget.classList.add('active'); e.currentTarget.classList.add('border-done') this.props.closeAllTasks(); this.props.closeAllDoing(); } else { e.currentTarget.classList.remove('active'); e.currentTarget.classList.remove('border-done') this.props.disableArrowButton(); } } } } 

My idea is that if I declare everything inside the class which looks very ugly in my opinion, but then initializing everything on componentDidMount() my web app will be faster because it won't need to declare and initialize everything every render.

Is this correct? and should I put the declaring and initialization on top of render()? but the componenDidMount() is called after the initial render.

Answer 1

Lifecycle hooks are functions that are invoked at different stages of a component. Here constructor() and componentDidMount() works different. From my point of view, state variables are initialized inside constructor() and api calls are done in componentDidMount() hook. we are not supposed to define function definitions inside lifecycle hooks. Your above component can be converted to

class Demo extends React.Component { constructor(props) { super(props); this.state = { isActive: false }; } setToActive = (e, id) => { const { setTaskID, arrowStyleToDone, closeAllTasks, closeAllDoing, disableArrowButton } = this.props; setTaskID(id); arrowStyleToDone(); if (!e.target.classList.contains("active")) { e.currentTarget.classList.add("active"); e.currentTarget.classList.add("border-done"); closeAllTasks(); closeAllDoing(); } else { e.currentTarget.classList.remove("active"); e.currentTarget.classList.remove("border-done"); disableArrowButton(); } }; componentDidMount() {} // no need for this lifecycle since we are not making any initial function call, like fetch from api etc. render() { const { done } = this.props; const { isActive } = this.state; return ( <div className="done-container" style={this.style().taskContainer}> <span style={this.style().title}>Done</span> {done && done.map(item => ( <div className={`done ${isActive ? "active" : ""}`} key={item.id} onClick={e => this.setToActive(e, item.id)} ></div> ))} </div> ); } } 

Basic structure of React component is

Class component

class Class_Name extends Component{ constructor(){ this.state = {} // state variable this.toggleTab = this.toggleTab.bind(this); } // other functions toggleTab = ()=>{} // these are example functions. // life cycle hooks if you are using any render(){ return ( ) } }