1
- import React , { Component } from 'react'
2
-
3
- import ExampleComponent from 'react-use-lifecycle-methods'
4
-
5
- export default class App extends Component {
6
- render ( ) {
7
- return (
8
- < div >
9
- < ExampleComponent text = 'Modern React component module' />
10
- </ div >
11
- )
12
- }
1
+ import React , { useState } from 'react'
2
+ import useLifecycleMethods from 'react-use-lifecycle-helpers'
3
+
4
+ import ChildComponent from "./ChildComponent" ;
5
+
6
+ const App = ( props ) => {
7
+ const [ state , setState ] = useState ( { count : 0 , bool : false } ) ;
8
+
9
+ const {
10
+ useDidMount,
11
+ useDepsDidChange,
12
+ useDidUpdate,
13
+
14
+ } = useLifecycleMethods ( state , props ) ;
15
+
16
+ useDidMount ( ( ) => {
17
+ console . log ( "useDidMount" ) ;
18
+ } ) ;
19
+
20
+ useDidUpdate ( ( prevState , prevProps ) => {
21
+ console . log ( "useDidUpdate" , prevState , state , prevProps , props ) ;
22
+ } ) ;
23
+
24
+ useDepsDidChange (
25
+ prevState => {
26
+ console . log ( "useDepsDidChange Count" , state . count , prevState . count ) ;
27
+ } ,
28
+ [ "count" ]
29
+ ) ;
30
+
31
+ useDepsDidChange (
32
+ prevState => {
33
+ console . log ( "useDepsDidChange Bool" , state . bool , prevState . bool ) ;
34
+ } ,
35
+ [ "bool" ]
36
+ ) ;
37
+
38
+ useDepsDidChange (
39
+ prevState => {
40
+ console . log ( "useDepsDidChange Count" , state . count , prevState . count ) ;
41
+ console . log ( "useDepsDidChange Bool" , state . bool , prevState . bool ) ;
42
+ } ,
43
+ [ "bool" , "count" ]
44
+ ) ;
45
+
46
+ return (
47
+ < div >
48
+ < button
49
+ onClick = { ( ) => {
50
+ setState ( { ...state , count : state . count + 1 } ) ;
51
+ } }
52
+ >
53
+ Increment
54
+ </ button >
55
+ < p > { state . count } </ p >
56
+ < button
57
+ onClick = { ( ) => {
58
+ setState ( { ...state , bool : ! state . bool } ) ;
59
+ } }
60
+ >
61
+ Toggle ChildComponent { state . bool . toString ( ) }
62
+ </ button >
63
+ { state . bool && < ChildComponent /> }
64
+ </ div >
65
+ ) ;
13
66
}
67
+
68
+ export default App ;
0 commit comments