feat: change default example to use the lifecycle helpers

example/src/App.js

@@ -1,13 +1,68 @@
-import React, { Component } from 'react'
-
-import ExampleComponent from 'react-use-lifecycle-methods'
-
-export default class App extends Component {
-  render () {
-    return (
-      <div>
-        <ExampleComponent text='Modern React component module' />
-      </div>
-    )
-  }
+import React, { useState } from 'react'
+import useLifecycleMethods from 'react-use-lifecycle-helpers'
+
+import ChildComponent from "./ChildComponent";
+
+const App = (props) => {
+  const [state, setState] = useState({ count: 0, bool: false });
+
+  const {
+    useDidMount,
+    useDepsDidChange,
+    useDidUpdate,
+
+  } = useLifecycleMethods(state, props);
+
+  useDidMount(() => {
+    console.log("useDidMount");
+  });
+
+  useDidUpdate((prevState, prevProps) => {
+    console.log("useDidUpdate", prevState, state, prevProps, props);
+  });
+
+  useDepsDidChange(
+    prevState => {
+      console.log("useDepsDidChange Count", state.count, prevState.count);
+    },
+    ["count"]
+  );
+
+  useDepsDidChange(
+    prevState => {
+      console.log("useDepsDidChange Bool", state.bool, prevState.bool);
+    },
+    ["bool"]
+  );
+
+  useDepsDidChange(
+    prevState => {
+      console.log("useDepsDidChange Count", state.count, prevState.count);
+      console.log("useDepsDidChange Bool", state.bool, prevState.bool);
+    },
+    ["bool", "count"]
+  );
+
+  return (
+    <div>
+      <button
+        onClick={() => {
+          setState({ ...state, count: state.count + 1 });
+        }}
+      >
+        Increment
+      </button>
+      <p>{state.count}</p>
+      <button
+        onClick={() => {
+          setState({ ...state, bool: !state.bool });
+        }}
+      >
+        Toggle ChildComponent {state.bool.toString()}
+      </button>
+      {state.bool && <ChildComponent />}
+    </div>
+  );
 }
+
+export default App;

example/src/ChildComponent.js

@@ -0,0 +1,14 @@
+import React from "react";
+import useLifecycleMethods from 'react-use-lifecycle-helpers'
+
+const ChildComponent = () => {
+  const { useWillUnmount } = useLifecycleMethods();
+
+  useWillUnmount(() => {
+    console.log("useWillUnmount: ChildComponent");
+  });
+
+  return <div>ChildComponent Content</div>;
+};
+
+export default ChildComponent;