react hook componentDidmount code example
Example 1: use effect like component did mount
useEffect(() => {
console.log('I am the new componentDidMount')
}, [])
Example 2: componentdidmount hooks
For componentDidMount
useEffect(() => {
}, []);
For componentDidUpdate
useEffect(() => {
}, [yourDependency]);
For componentWillUnmount
useEffect(() => {
return () => {
}
}, [yourDependency]);
Example 3: react hooks componentdidmount
useEffect(() => {
}, []);
Example 4: useeffect
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
longResolve().then(() => {
alert(count);
});
}, []);
return (
<div>
<button
onClick={() => {
setCount(count + 1);
}}
>
Count: {count}
</button>
</div>
);
}
Example 5: useeffect react
useEffect(() => {
window.addEventListener('mousemove', () => {});
return () => {
window.removeEventListener('mousemove', () => {})
}
}, [])
Example 6: react useEffect
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
function LifecycleDemo() {
useEffect(() => {
console.log('render!');
return () => console.log('unmounting...');
}, [
return "I'm a lifecycle demo";
}
function App() {
const [random, setRandom] = useState(Math.random());
const [mounted, setMounted] = useState(true);
const reRender = () => setRandom(Math.random());
const toggle = () => setMounted(!mounted);
return (
<>
<button onClick={reRender}>Re-render</button>
<button onClick={toggle}>Show/Hide LifecycleDemo</button>
{mounted && <LifecycleDemo/>}
</>
);
}
ReactDOM.render(<App/>, document.querySelector('#root'));