docs(Add example for useDeepCompareEffect): Added missing example for…

… useDeepCompareEffect (#964)

Added missing example for useDeepCompareEffect.

fix #582

src/useDeepCompareEffect/__docs__/example.stories.tsx

@@ -1,15 +1,34 @@
+/* eslint-disable no-console */
 import * as React from 'react';
-import { useDeepCompareEffect } from '../..';
+import { useEffect } from 'react';
+import { useDeepCompareEffect } from '../useDeepCompareEffect';
+import { useRerender } from '../../useRerender/useRerender';
 
 export const Example: React.FC = () => {
-  useDeepCompareEffect(() => {}, []);
+  const rerender = useRerender();
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const newOnEveryRender = {
+    name: 'Foo',
+  };
+
+  useEffect(() => {
+    console.log('I do get logged on every render.');
+  }, [newOnEveryRender]);
+
+  useDeepCompareEffect(() => {
+    console.log('I do not get logged on every render.');
+  }, [newOnEveryRender]);
 
   return (
-    <div>
+    <>
+      <p>Open you browser console and the code for this example.</p>
       <p>
-        We don&apos;t have an example for useDeepCompareEffect yet. Want to{' '}
-        <a href="https://github.com/react-hookz/web/issues/582">contribute one</a>?
+        Repeatedly press the button below. Notice, how the useEffect gets run on every render, but
+        useDeepCompareEffect does not. This is because useDeepCompareEffect determines dependency
+        changes by deep comparison instead of by reference like useEffect.
       </p>
-    </div>
+      <button onClick={rerender}>Rerender</button>
+    </>
   );
 };