Migrate usePromise from react-use

README.md

@@ -94,6 +94,8 @@ Coming from `react-use`? Check out our
     — Like `useLayoutEffect` but falls back to `useEffect` during SSR.
   - [**`useMountEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usemounteffect--example)
     — Run an effect only when a component mounts.
+  - [**`usePromise`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usepromise--example)
+    — Resolves promise only while component is mounted.
   - [**`useRafEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-useRafEffect--example)
     — Like `useEffect`, but the effect is only run within an animation frame.
   - [**`useRerender`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usererender--example)

src/index.ts

@@ -116,3 +116,5 @@ export { resolveHookState } from './util/resolveHookState';
 export * from './types';
 
 export { useDeepCompareMemo } from './useDeepCompareMemo/useDeepCompareMemo';
+
+export { usePromise } from './usePromise/usePromise';

src/usePromise/__docs__/example.stories.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import { usePromise } from '../..';
+
+export const Example: React.FC = () => {
+  const mounted = usePromise();
+  const [value, setValue] = useState<string>();
+
+  const myPromise = new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('foo');
+    }, 300);
+  });
+
+  useEffect(() => {
+    (async () => {
+      const res = await mounted(myPromise);
+
+      if (typeof res === 'string') {
+        // This line will not execute if this component gets unmounted.
+        setValue(res);
+      }
+    })();
+  });
+
+  return (
+    <div>
+      <button>{value}</button>
+    </div>
+  );
+};

src/usePromise/__docs__/story.mdx

@@ -0,0 +1,32 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Example } from './example.stories';
+import { ImportPath } from '../../storybookUtil/ImportPath';
+
+<Meta title="New Hook/usePromise" component={Example} />
+
+# usePromise
+
+React lifecycle hook that returns a helper function for wrapping promises. Promises wrapped with this function will resolve only if component is mounted.
+
+#### Example
+
+<Canvas>
+  <Story story={Example} inline />
+</Canvas>
+
+## Reference
+
+```ts
+usePromise =
+  () =>
+  <T>(promise: Promise<T>) =>
+    Promise<T>;
+```
+
+#### Importing
+
+<ImportPath />
+
+#### Return
+
+_`(promise: Promise<T>) => Promise<T>`_ — Function wrapper that for a promise.

src/usePromise/__tests__/dom.ts

@@ -0,0 +1,29 @@
+import { renderHook } from '@testing-library/react-hooks/dom';
+import { usePromise } from '../..';
+
+describe('usePromise', () => {
+  const thenFn = jest.fn();
+  const resolves = Promise.resolve(thenFn);
+  const rejects = Promise.reject(Error);
+
+  it('should be defined', () => {
+    expect(usePromise).toBeDefined();
+  });
+
+  it('should render', () => {
+    const { result } = renderHook(() => usePromise());
+    expect(result.error).toBeUndefined();
+  });
+
+  it('should return resolved value', async () => {
+    const { result } = renderHook(() => usePromise());
+
+    await expect(result.current(resolves)).resolves.toBe(thenFn);
+  });
+
+  it('should return rejection value', async () => {
+    const { result } = renderHook(() => usePromise());
+
+    await expect(result.current(rejects)).rejects.toBe(Error);
+  });
+});

src/usePromise/__tests__/ssr.ts

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

src/usePromise/usePromise.ts

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+import { useIsMounted } from '../useIsMounted/useIsMounted';
+
+export type UsePromise = () => <T>(promise: Promise<T>) => Promise<T>;
+
+export const usePromise: UsePromise = () => {
+  const isMounted = useIsMounted();
+
+  return useCallback(
+    <T>(promise: Promise<T>) =>
+      new Promise<T>((resolve, reject) => {
+        const onResolve = (resolution: T) => isMounted() && resolve(resolution);
+
+        const onReject = (rejection: unknown) => isMounted() && reject(rejection);
+
+        // eslint-disable-next-line promise/catch-or-return
+        promise.then(onResolve, onReject);
+      }),
+    [isMounted]
+  );
+};