-
Notifications
You must be signed in to change notification settings - Fork 0
/
LifecycleHooks.js
55 lines (43 loc) · 1.27 KB
/
LifecycleHooks.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import React, { useEffect, useState, useRef, memo } from 'react'
// Example from https://dev.to/bunlong/react-component-lifecycle-hooks-cheatsheet-1p6
const LifecycleHookComponent = props => {
const [desc, setDesc] = useState('user')
const [prevCount, setPrevCount] = useState(null)
console.log('Initialize')
const mounted = useRef()
useEffect(() => {
console.log('componentDidMount')
return () => {
console.log('componentDidUmnount')
}
}, [])
useEffect(() => {
if(!mounted.current) {
console.log('mount componentDidUpdate')
mounted.current = true
} else {
console.log('componentDidUpdate')
}
}, [props.count])
if(prevCount !== props.count) {
setDesc(LifecycleHooks.getDerivedStateFromProps(props, desc))
setPrevCount(props.count)
}
return (
<>
{props.count} {desc}
</>
)
}
const shouldComponentUpdate = (prevProps, nextProps) => {
console.log('shouldComponentUpdate')
}
const LifecycleHooks = memo(LifecycleHookComponent, shouldComponentUpdate)
LifecycleHooks.getDerivedStateFromProps = (nextProps, prevState) => {
console.log('getDerivedStateFromProps')
if(!nextProps.count || Math.abs(nextProps.count) !== 1) {
return 'users'
}
return 'user'
}
export default LifecycleHooks