react functional components componentdidmount code example
Example 1: how to use componentdidmount in functional component
useEffect(() => {
if(!props.fetched) {
props.fetchRules();
}
console.log('mount it!');
}, []);
useEffect({
your code here
})
useEffect(() => {
}, [yourDependency]);
useEffect(() => {
return () => {
}
}, [yourDependency]);
Example 2: useeffect react
useEffect(() => {
window.addEventListener('mousemove', () => {});
return () => {
window.removeEventListener('mousemove', () => {})
}
}, [])
Example 3: react useEffect
import React, { useEffect } from 'react';
export const App: React.FC = () => {
useEffect(() => {
}, [])
return (
<div>Use Effect!</div>
);
}
Example 4: how to use useeffect
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Example 5: useeffect componentdidmount
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
);
}
Example 6: component did update hooks
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
},[count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}