component will mount hooks

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, []);

1  useMemo(() => { }
2    }, []);