feat: add useAbortableEffect

docs/src/pages/_meta.json

@@ -38,6 +38,7 @@
     "type": "separator",
     "title": "Hooks"
   },
+  "use-abortable-effect": {},
   "use-clipboard": {},
   "use-composition-input": {},
   "use-debounced-state": {},

docs/src/pages/best-practice.mdx

@@ -47,7 +47,7 @@ export {
   useSidebarActive, useSetSidebarActive
 };
 ```
-  
+
 ```tsx filename="src/App.tsx" copy
 import { useIntersection } from 'foxact/use-intersection';
 
@@ -124,7 +124,8 @@ const ExampleComponent = ({ dataKey }: ExampleComponentProps) => {
 
 Here, although the request for `data1` happened before `data2`, the response for `data2` is received before `data1`. And `useIsMountedRef` doesn't help with that.
 
-To properly avoid `setData(data1)` from being called, the correct pattern is:
+To properly avoid `setData(data1)` from being called, the correct pattern is described below.
+You can also use [`useAbortableEffect`](./use-abortable-effect) instead.
 
 ```tsx
 interface ExampleComponentProps {
@@ -155,5 +156,3 @@ const ExampleComponent = ({ dataKey }: ExampleComponentProps) => {
                         │ Request data 2 ────► data2 response (setData(data2)) │
                         | isCancelled: false                                   | isCancelled: false, setData(data2)
 ```
-
-

docs/src/pages/use-abortable-effect.mdx

@@ -0,0 +1,67 @@
+---
+title: useAbortableEffect
+---
+
+# useAbortableEffect
+
+`useEffect` that gives you an [AbortSignal](https://mdn.io/AbortSignal).
+
+## Usage
+
+```js
+import { useAbortableEffect } from 'foxact/use-use-abortable-effect';
+
+function Component() {
+  useAbortableEffect(signal => {
+    item.addEventListener('event', () => {
+      // ...
+    }, { signal })
+  }, [item]);
+}
+```
+
+```js
+// before
+useEffect(() => {
+  let isCancelled = false;
+  someAsyncStuff().then(data => {
+    if (!isCancelled) {
+      setData(data);
+    }
+  });
+
+  return () => {
+    isCancelled = true;
+  };
+}, [dataKey]);
+
+// after
+useAbortableEffect((signal) => {
+  someAsyncStuff().then(data => {
+    if (!signal.aborted) return
+    setData(data);
+  });
+}, [dataKey]);
+```
+
+Note that [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) requires extra configuration in order to check dependency array for third-party hooks:
+
+```json filename=".eslintrc.json" copy
+{
+  "rules": {
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        "additionalHooks": "useAbortableEffect"
+      }
+    ]
+  }
+}
+```
+
+But if you do not want to configure it, `foxact/use-abortable-effect` also provides another named export `useEffect` as an alias of `useAbortableEffect`:
+
+```diff
+- import { useEffect } from 'react';
++ import { useEffect } from 'foxact/use-abortable-effect';
+```

src/use-abortable-effect/index.ts

@@ -0,0 +1,15 @@
+import 'client-only';
+import { type EffectCallback, useEffect as useEffectFromReact, type DependencyList } from 'react';
+
+export const useAbortableEffect = (callback: (signal: AbortSignal) => ReturnType<EffectCallback>, deps: DependencyList) => {
+  useEffectFromReact(() => {
+    const controller = new AbortController();
+    const signal = controller.signal;
+    const f = callback(signal);
+    return () => {
+      controller.abort();
+      f?.();
+    };
+  }, deps);
+};
+export const useEffect = useAbortableEffect;