life cycle in react code example
Example 1: lifecycle methods react
Every component in React goes through a lifecycle of events. I like to think of them as going through a cycle of birth, growth, and death.
Mounting – Birth of your component
Update – Growth of your component
Unmount – Death of your component
Example 2: react lifecycle example
class Test extends React.Component {
constructor() {
console.log('Constructor')
super();
this.state = {
count: 0
};
}
componentDidMount() {
console.log("component did mount");
}
componentDidUpdate() {
console.log("component did update");
}
onClick = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
console.log("render");
return (
Hello Test
{this.state.count}
);
}
}
//--for first time
//Constructor
//render
//component did mount
//--for any update
//render
//component did update
Example 3: lifecycle method react
INITIALIZATION= setup props and state
MOUNTING= constructor->componentWillMount->render->componentDidMount//Birth
UPDATE= shouldComponentUpdate->componentWillUpdate->render
->componentDidUpdate //Growth
UNMOUNTING= componentWillUnmount //Death
Example 4: lifecycles if reactjs
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() { }
componentWillUnmount() { }
render() {
return (
Hello, world!
It is {this.state.date.toLocaleTimeString()}.
);
}
}
Example 5: component did mmount
componentDidUpdate(prevProps, prevState, snapshot)
Example 6: react lifecycle
constructor(props) {
super(props);
// Don't call this.setState() here!
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}