feat: implement useLifecycleEffect hook (#652)

* Adding useLogger and useEffectOnce, components, test and storybook.

* Adding documentation

* Removing the useEffectOnce hook as it is an alias.
Fixing Linting issues.

* Adding dependencies array, updating documentation

* Changing useLogger to useLifecycleLogger

* Updating docs for useLifecycleEffect

* Fixing for comments.

README.md

@@ -100,6 +100,8 @@ Coming from `react-use`? Check out our
     — Run effect only when component unmounted.
   - [**`useUpdateEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-useupdateeffect--example)
     — Effect hook that ignores the first render (not invoked on mount).
+  - [**`useLifecycleLogger`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-uselifecycleLogger--example)
+    — This hook provides a console log when the component mounts, updates and unmounts.
 
 - #### State
 

src/__docs__/migrating-from-react-use.story.mdx

@@ -509,7 +509,7 @@ Not implemented yet
 
 #### useLogger
 
-Not implemented yet
+Implemented as [useLifecycleLogger](/docs/lifecycle-useLifecycleLogger--example)
 
 #### useMount
 

src/index.ts

@@ -22,6 +22,7 @@ export { useRerender } from './useRerender/useRerender';
 export { useThrottledEffect } from './useThrottledEffect/useThrottledEffect';
 export { useUnmountEffect } from './useUnmountEffect/useUnmountEffect';
 export { useUpdateEffect } from './useUpdateEffect/useUpdateEffect';
+export { useLifecycleLogger } from './useLifecycleLogger/useLifecycleLogger';
 
 // State
 export { useDebouncedState } from './useDebouncedState/useDebouncedState';

src/useLifecycleLogger/__docs__/example.stories.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useRerender } from '../..';
+import { useLifecycleLogger } from '../useLifecycleLogger';
+
+export const Example: React.FC = () => {
+  const rerender = useRerender();
+  const dependency = 'test';
+  useLifecycleLogger('Demo', [dependency]);
+
+  return (
+    <div>
+      <div>Check your console for useLifecycleLogger logs</div>
+      <button
+        onClick={() => {
+          rerender();
+        }}>
+        Rerender component
+      </button>
+    </div>
+  );
+};

src/useLifecycleLogger/__docs__/story.mdx

@@ -0,0 +1,30 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Example } from './example.stories';
+import { ImportPath } from '../../storybookUtil/ImportPath';
+
+<Meta title="Lifecycle/useLifecycleLogger" component={Example} />
+
+# useLifecycleLogger
+
+React lifecycle hook that console logs parameters as component transitions through lifecycles.
+
+#### Example
+
+<Canvas>
+  <Story story={Example} inline />
+</Canvas>
+
+## Reference
+
+```ts
+function useLifecycleLogger(componentName: string, deps: []): void;
+```
+
+#### Importing
+
+<ImportPath />
+
+#### Arguments
+
+- _**componentName**_ _`ComponentName`_ - String value to log the components name when logging the lifecycle.
+- **deps** _`DependencyList`_ - Dependencies list that will be passed to underlying `useEffect`.

src/useLifecycleLogger/__tests__/dom.ts

@@ -0,0 +1,29 @@
+import { renderHook } from '@testing-library/react-hooks/dom';
+import { useLifecycleLogger } from '../useLifecycleLogger';
+
+describe('useLifecycleLogger', () => {
+  const originalLog = console.log; // save original console.log function
+  beforeEach(() => {
+    console.log = jest.fn(); // create a new mock function for each test
+  });
+  afterAll(() => {
+    console.log = originalLog; // restore original console.log after all tests
+  });
+  it('should return TestComponent mounted on first render', () => {
+    const dep = 'test';
+    renderHook(() => useLifecycleLogger('TestComponent', [dep]));
+    expect(console.log).toBeCalledWith('TestComponent mounted', { '0': 'test' });
+  });
+
+  it('should return `TestComponent updated` on second and next renders', () => {
+    const { rerender } = renderHook(() => useLifecycleLogger('TestComponent'));
+
+    expect(console.log).toBeCalledWith('TestComponent mounted', {});
+
+    rerender();
+    expect(console.log).toBeCalledWith('TestComponent updated', {});
+
+    rerender();
+    expect(console.log).toBeCalledWith('TestComponent updated', {});
+  });
+});

src/useLifecycleLogger/__tests__/ssr.ts

@@ -0,0 +1,12 @@
+import { renderHook } from '@testing-library/react-hooks/server';
+import { useLifecycleLogger } from '../useLifecycleLogger';
+
+describe('useLifecycleLogger', () => {
+  it('should be defined', () => {
+    expect(useLifecycleLogger).toBeDefined();
+  });
+  it('should render', () => {
+    const { result } = renderHook(() => useLifecycleLogger('TestComponent', []));
+    expect(result.error).toBeUndefined();
+  });
+});

src/useLifecycleLogger/useLifecycleLogger.ts

@@ -0,0 +1,19 @@
+import { DependencyList } from 'react';
+import { useUpdateEffect, useMountEffect } from '..';
+
+/**
+ * This hook provides a console log when the component mounts, updates and unmounts.
+ *
+ * @param componentName Provides the name of the component in which the life cycle is being logged
+ * @param deps Dependencies list, as for `useEffect` hook
+ */
+export function useLifecycleLogger(componentName: string, deps?: DependencyList): void {
+  useMountEffect(() => {
+    console.log(`${componentName} mounted`, { ...deps });
+    return () => console.log(`${componentName} unmounted`);
+  });
+
+  useUpdateEffect(() => {
+    console.log(`${componentName} updated`, { ...deps });
+  }, deps);
+}