1// passing an empty array as second argument triggers the callback in useEffect
2// only after the initial render thus replicating `componentDidMount` lifecycle behaviour
3useEffect(() => {
4 if(!props.fetched) {
5 props.fetchRules();
6 }
7 console.log('mount it!');
8}, []);
9
10// componentDidUpdate
11useEffect({
12 your code here
13})
14
15// For componentDidUpdate
16useEffect(() => {
17 // Your code here
18}, [yourDependency]);
19
20// For componentWillUnmount
21useEffect(() => {
22 // componentWillUnmount
23 return () => {
24 // Your code here
25 }
26}, [yourDependency]);
27
1useEffect(() => {
2 //will be called on every load
3})
4
5useEffect(() => {
6 //will be called on component mount
7 window.addEventListener('mousemove', () => {});
8
9 // returned function will be called on component unmount
10 return () => {
11 window.removeEventListener('mousemove', () => {})
12 }
13}, []) // <---- empty array at end will cause to only run on first load
1For componentDidMount
2useEffect(() => {
3 // Your code here
4}, []);
5
6For componentDidUpdate
7useEffect(() => {
8 // Your code here
9}, [yourDependency]);
10
11For componentWillUnmount
12useEffect(() => {
13 // componentWillUnmount
14 return () => {
15 // Your code here
16 }
17}, [yourDependency]);
1useEffect(() => {
2 window.addEventListener('mousemove', () => {});
3
4 // returned function will be called on component unmount
5 return () => {
6 window.removeEventListener('mousemove', () => {})
7 }
8}, [])
1const useComponentWillMount = (func: (params?: any) => any) => useMemo(func, []);