react componentwillupdate code example
Example 1: lifecycle method react
INITIALIZATION= setup props and state
MOUNTING= constructor->componentWillMount->render->componentDidMount//Birth
UPDATE= shouldComponentUpdate->componentWillUpdate->render
->componentDidUpdate //Growth
UNMOUNTING= componentWillUnmount //Death
Example 2: componentwillreceiveprops hooks
SomeComponent (props) => {
useEffect( () => {
console.log('someProp updated');
}, [props.someProp])
return <div>Hi {props.someProp}</div>
}
Example 3: component did mmount
componentDidMount()
Example 4: component did mmount
componentDidUpdate(prevProps, prevState, snapshot)
Example 5: componentwillreceiveprops hooks
const { useState, useEffect, useMemo } = React;
function App() {
const [count, setCount] = useState(50);
useEffect(() => {
setTimeout(() => {
setCount(150);
}, 2000);
}, []);
return <DisplayCount count={count} />;
}
function DisplayCount(props) {
const count = useMemo(() => props.count > 100 ? 100 : props.count, [props.count]);
return <div> {count} </div>;
}
ReactDOM.render(<App />, document.getElementById("root"));