Skip to content

Commit ea5bf63

Browse files
feat: change default example to use the lifecycle helpers
1 parent 8dcebb9 commit ea5bf63

File tree

2 files changed

+81
-12
lines changed

2 files changed

+81
-12
lines changed

example/src/App.js

Lines changed: 67 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,68 @@
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+
);
1366
}
67+
68+
export default App;

example/src/ChildComponent.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from "react";
2+
import useLifecycleMethods from 'react-use-lifecycle-helpers'
3+
4+
const ChildComponent = () => {
5+
const { useWillUnmount } = useLifecycleMethods();
6+
7+
useWillUnmount(() => {
8+
console.log("useWillUnmount: ChildComponent");
9+
});
10+
11+
return <div>ChildComponent Content</div>;
12+
};
13+
14+
export default ChildComponent;

0 commit comments

Comments
 (0)