feat: new hook useSafeState (#31)

* feat: new hook `useSafeState`

* fix: some typos

.editorconfig

@@ -10,6 +10,7 @@ max_line_length = 100
 tab_width = 2
 trim_trailing_whitespace = true
 
-[*.md]
+[*.{md,mdx}]
 trim_trailing_whitespace = false
 indent_size = unset
+max_line_length = 100

.eslintrc.js

@@ -125,6 +125,18 @@ module.exports = {
           jsx: true,
         },
       },
+      rules: {
+        'prettier/prettier': [
+          'error',
+          {
+            PRINT_WIDTH,
+            singleQuote: true,
+            jsxBracketSameLine: true,
+            trailingComma: 'es5',
+            endOfLine: 'lf',
+          },
+        ],
+      },
     },
   ],
 };

README.md

@@ -22,10 +22,11 @@ npm i @react-hookz/web
 yarn add @react-hookz/web
 ```
 
-As hooks was introduced to the world in React 16.8, `@react-hookz/web` requires - you gessed
-it - `react` and `react-dom` 16.8+.  
-Also, as React does not support IE, `@react-hookz/web` does not do so either. You'll have to
-transpile your `node-modules` in order to run in IE.
+As hooks was introduced to the world in React 16.8, `@react-hookz/web` requires - you gessed it
+
+- `react` and `react-dom` 16.8+.  
+  Also, as React does not support IE, `@react-hookz/web` does not do so either. You'll have to
+  transpile your `node-modules` in order to run in IE.
 
 ## Usage
 
@@ -71,3 +72,5 @@ import { useMountEffect } from "@react-hookz/web/esnext";
     — Like `useState`, but can only become `true` or `false`.
   - [`usePrevious`](https://react-hookz.github.io/web/?path=/docs/lifecycle-useprevious)
     — Returns the value passed to the hook on previous render.
+  - [`useSafeState`](https://react-hookz.github.io/web/?path=/docs/lifecycle-usesafestate)
+    — Like `useState` but its state setter is guarded against sets on unmounted component.

src/index.ts

@@ -8,3 +8,4 @@ export { usePrevious } from './usePrevious';
 export { useIsMounted } from './useIsMounted';
 export { useConditionalEffect } from './useConditionalEffect';
 export { useConditionalUpdateEffect } from './useConditionalUpdateEffect';
+export { useSafeState } from './useSafeState';

src/useSafeState.ts

@@ -0,0 +1,25 @@
+import { Dispatch, SetStateAction, useCallback, useState } from 'react';
+import { useIsMounted } from './useIsMounted';
+
+/**
+ * Like `useState` but its state setter is guarded against sets on unmounted component.
+ *
+ * @param initialState
+ */
+export function useSafeState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
+export function useSafeState<S = undefined>(): [
+  S | undefined,
+  Dispatch<SetStateAction<S | undefined>>
+];
+export function useSafeState<S>(initialState?: S | (() => S)): [S, Dispatch<SetStateAction<S>>] {
+  const [state, setState] = useState(initialState);
+  const isMounted = useIsMounted();
+
+  return [
+    state,
+    useCallback((value) => {
+      if (isMounted()) setState(value);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []) as Dispatch<SetStateAction<S>>,
+  ];
+}

stories/Introduction.story.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Home" />
 
@@ -44,9 +44,9 @@ So, if you need the `useMountEffect` hook, depending on your needs, you can impo
 
 ```ts
 // in case you need cjs modules
-import { useMountEffect } from "@react-hookz/web";
+import { useMountEffect } from '@react-hookz/web';
 // in case you need esm modules
-import { useMountEffect } from "@react-hookz/web/esm";
+import { useMountEffect } from '@react-hookz/web/esm';
 // in case you want all the recent ES features
-import { useMountEffect } from "@react-hookz/web/esnext";
+import { useMountEffect } from '@react-hookz/web/esnext';
 ```

stories/useConditionalEffect.story.mdx

@@ -1,5 +1,5 @@
-import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
-import { Example } from "./useConditionalEffect.stories";
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Example } from './useConditionalEffect.stories';
 
 <Meta title="Lifecycle/useConditionalEffect" component={Example} />
 

stories/useConditionalUpdateEffect.story.mdx

@@ -1,5 +1,5 @@
-import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
-import { Example } from "./useConditionalUpdateEffect.stories";
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Example } from './useConditionalUpdateEffect.stories';
 
 <Meta title="Lifecycle/useConditionalUpdateEffect" component={Example} />
 

stories/useFirstMountState.story.mdx

@@ -1,5 +1,5 @@
-import { Canvas, Meta, Story, Typeset } from "@storybook/addon-docs/blocks";
-import { Example } from "./useFirstMountState.stories";
+import { Canvas, Meta, Story, Typeset } from '@storybook/addon-docs/blocks';
+import { Example } from './useFirstMountState.stories';
 
 <Meta title="Lifecycle/useFirstMountState" component={Example} />
 

stories/useIsMounted.story.mdx

@@ -1,5 +1,5 @@
-import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
-import { Example } from "./useIsMounted.stories";
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Example } from './useIsMounted.stories';
 
 <Meta title="Lifecycle/useIsMounted" component={Example} />
 

stories/useMountEffect.story.mdx

@@ -1,5 +1,5 @@
-import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
-import { Example } from "./useMountEffect.stories";
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Example } from './useMountEffect.stories';
 
 <Meta title="Lifecycle/useMountEffect" component={Example} />
 

stories/usePrevious.story.mdx

@@ -1,5 +1,5 @@
-import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
-import { Example } from "./usePrevious.stories";
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Example } from './usePrevious.stories';
 
 <Meta title="State/usePrevious" component={Example} />
 

stories/useRerender.story.mdx

@@ -1,5 +1,5 @@
-import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
-import { Example } from "./useRerender.stories";
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Example } from './useRerender.stories';
 
 <Meta title="Lifecycle/useRerender" component={Example} />
 

stories/useSafeState.story.mdx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="State/useSafeState" />
+
+# useSafeState
+
+Have you ever been caught on `Can't perform a React state update on an unmounted component.`? Of
+course you do, we're all been there😅  
+Async callback invoked, it tries to set state, but component is already unmounted, that annoying
+warning happens, and you have to track component mount state manually.
+
+`useSafeState` covers your back - it tracks component mount state and does not perform `setState`
+action if component is unmounted, otherwise it is the same hook as common `useState`.
+
+#### Example
+
+Sadly we can't provide an example since this documentation built in `production` mode and warning
+are only shown in `development` mode.
+
+## Reference
+
+Use it exactly the same as `useState`.

stories/useToggle.story.mdx

@@ -1,5 +1,5 @@
-import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
-import { Example } from "./useToggle.stories";
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Example } from './useToggle.stories';
 
 <Meta title="State/useToggle" component={Example} />
 

stories/useUnmountEffect.story.mdx

@@ -1,5 +1,5 @@
-import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
-import { Example } from "./useUnmountEffect.stories";
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Example } from './useUnmountEffect.stories';
 
 <Meta title="Lifecycle/useUnmountEffect" component={Example} />
 

stories/useUpdateEffect.story.mdx

@@ -1,5 +1,5 @@
-import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
-import { Example } from "./useUpdateEffect.stories";
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Example } from './useUpdateEffect.stories';
 
 <Meta title="Lifecycle/useUpdateEffect" component={Example} />
 

tests/dom/useSafeState.test.ts

@@ -0,0 +1,38 @@
+import { act, renderHook } from '@testing-library/react-hooks/dom';
+import { useSafeState } from '../../src';
+
+describe('useSafeState', () => {
+  it('should be defined', () => {
+    expect(useSafeState).toBeDefined();
+  });
+
+  it('should render', () => {
+    renderHook(() => useSafeState());
+  });
+
+  it('should not call ', () => {
+    const consoleSpy = jest.spyOn(console, 'error');
+    consoleSpy.mockImplementationOnce(() => {});
+
+    const { result, unmount } = renderHook(() => useSafeState(1));
+    expect(result.current[1]).toBeInstanceOf(Function);
+    expect(result.current[0]).toBe(1);
+
+    act(() => {
+      result.current[1](321);
+    });
+
+    expect(result.current[0]).toBe(321);
+
+    unmount();
+
+    act(() => {
+      result.current[1](123);
+    });
+
+    expect(consoleSpy).toHaveBeenCalledTimes(0);
+    expect(result.current[0]).toBe(321);
+
+    consoleSpy.mockRestore();
+  });
+});

tests/ssr/useSafeState.test.ts

@@ -0,0 +1,18 @@
+import { renderHook } from '@testing-library/react-hooks/server';
+import { useSafeState } from '../../src';
+
+describe('useSafeState', () => {
+  it('should be defined', () => {
+    expect(useSafeState).toBeDefined();
+  });
+
+  it('should render', () => {
+    renderHook(() => useSafeState());
+  });
+
+  it('should not call ', () => {
+    const { result } = renderHook(() => useSafeState(1));
+    expect(result.current[1]).toBeInstanceOf(Function);
+    expect(result.current[0]).toBe(1);
+  });
+});