feat: add useWillMount hook

README.md

@@ -120,6 +120,7 @@
   - [`usePromise`](./docs/usePromise.md) — resolves promise only while component is mounted.
   - [`useLogger`](./docs/useLogger.md) — logs in console as component goes through life-cycles.
   - [`useMount`](./docs/useMount.md) — calls `mount` callbacks.
+  - [`useWillMount`](./docs/useWillMount.md) — calls `willMount` callbacks.
   - [`useUnmount`](./docs/useUnmount.md) — calls `unmount` callbacks.
   - [`useUpdateEffect`](./docs/useUpdateEffect.md) — run an `effect` only on updates.
   - [`useIsomorphicLayoutEffect`](./docs/useIsomorphicLayoutEffect.md) — `useLayoutEffect` that that works on server.

docs/useWillMount.md

@@ -0,0 +1,20 @@
+# `useWillMount`
+
+React lifecycle hook that calls a function before the component is mounted.
+
+## Usage
+
+```jsx
+import {useWillMount} from 'react-use';
+
+const Demo = () => {
+  useWillMount(() => alert('WILL MOUNT'));
+  return null;
+};
+```
+
+## Reference
+
+```ts
+useWillMount(fn: () => void);
+```

src/index.ts

@@ -57,6 +57,7 @@ export { useMediatedState } from './useMediatedState';
 export { default as useMethods } from './useMethods';
 export { default as useMotion } from './useMotion';
 export { default as useMount } from './useMount';
+export { default as useWillMount } from './useWillMount';
 export { default as useMountedState } from './useMountedState';
 export { default as useMouse } from './useMouse';
 export { default as useMouseHovered } from './useMouseHovered';

src/useWillMount.ts

@@ -0,0 +1,9 @@
+import { useRef } from 'react';
+
+const useWillMount = (fn: () => void) => {
+  const willMount = useRef(true);
+  if (willMount.current) fn();
+  willMount.current = false;
+};
+
+export default useWillMount;

stories/useWillMount.story.tsx

@@ -0,0 +1,19 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import { useWillMount } from '../src';
+import ShowDocs from './util/ShowDocs';
+
+const Demo = () => {
+  useWillMount(() => alert('WILL MOUNT'));
+
+  return (
+    <div>
+      <code>useWillMount()</code> hook can be used to perform a side-effect when component will
+      mount.
+    </div>
+  );
+};
+
+storiesOf('Lifecycle/useWillMount', module)
+  .add('Docs', () => <ShowDocs md={require('../docs/useWillMount.md')} />)
+  .add('Demo', () => <Demo />);

tests/useWillMount.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { useWillMount } from '../src';
+import ReactDOMServer from 'react-dom/server';
+
+const mockCallback = jest.fn();
+
+afterEach(() => {
+  jest.resetAllMocks();
+});
+
+it('should call provided callback on will mount', () => {
+  const TestComponent = () => {
+    useWillMount(mockCallback);
+    return null;
+  };
+
+  const container = document.createElement('div');
+  const markup = ReactDOMServer.renderToString(<TestComponent />);
+  container.innerHTML = markup;
+
+  expect(mockCallback).toHaveBeenCalledTimes(1);
+});
+
+it('should not call provided callback on unmount', () => {
+  const { unmount } = renderHook(() => useWillMount(mockCallback));
+  expect(mockCallback).toHaveBeenCalledTimes(1);
+
+  unmount();
+
+  expect(mockCallback).toHaveBeenCalledTimes(1);
+});
+
+it('should not call provided callback on rerender', () => {
+  const { rerender } = renderHook(() => useWillMount(mockCallback));
+  expect(mockCallback).toHaveBeenCalledTimes(1);
+
+  rerender();
+
+  expect(mockCallback).toHaveBeenCalledTimes(1);
+});