feat: add useComponentWillReceiveUpdate

docs/src/pages/use-component-will-receive-update.mdx

@@ -0,0 +1,61 @@
+---
+title: useComponentWillReceiveUpdate
+---
+
+# useComponentWillReceiveUpdate
+
+import ExportMetaInfo from '../components/export-meta-info';
+
+<ExportMetaInfo />
+
+Change states based on changed props during a re-render. The name of the hook comes from [`UNSAFE_componentWillReceiveProps` method of class components](https://react.dev/reference/react/Component#unsafe_componentwillreceiveprops).
+
+## Usage
+
+```js
+import { useComponentWillReceiveUpdate } from 'foxact/use-abortable-effect';
+
+function Component(props) {
+  const [a, setA] = useState('')
+  const [b, setB] = useState('')
+  // when props.x changed, only reset a, not b
+  useComponentWillReceiveUpdate(() => {
+    setA('')
+  }, [props.x]);
+}
+```
+
+If you're using useEffect like this:
+
+```js
+  const [state, setState] = useState(false)
+  useEffect(() => setState(false), [props.someProp])
+```
+
+Don't do it. See [Adjusting some state when a prop changes](https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes) or [Storing information from previous renders](https://react.dev/reference/react/useState#storing-information-from-previous-renders)
+It should be like this:
+```js
+  const [prev, setPrev] = useState(state)
+  if (prev !== state) {
+    setPrev(state)
+    setState(false)
+  }
+```
+
+This hook is a helper for the above pattern.
+
+```js
+useComponentWillReceiveUpdate(() => setState(false), [state])
+```
+
+This only applies to states of the current component.
+Modifying states from other components causes React reporting errors.
+You may also want to read [(Avoid) Notifying parent components about state changes](https://react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes) and [(Avoid) Passing data to the parent](https://react.dev/learn/you-might-not-need-an-effect#passing-data-to-the-parent).
+If you need to edit other components' states, write it like this:
+
+```js
+useComponentWillReceiveUpdate(() => {
+  setLocalState(false)
+  Promise.resolve().then(() => props.setParentState(false))
+}, [state])
+```

src/use-component-will-receive-update/index.ts

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+
+/**
+ * If you're using useEffect like this:
+ *
+ * ```js
+ * const [state, setState] = useState(false)
+ * useEffect(() => setState(false), [props.someProp])
+ * ```
+ * Don't do it. See [Adjusting some state when a prop changes](https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes)
+ * It should be like this:
+ * ```js
+ * const [prev, setPrev] = useState(state)
+ * if (prev !== state) {
+ *     setPrev(state)
+ *     setState(false)
+ * }
+ * ```
+ * This hook is a helper for the above pattern.
+ * ```js
+ * useComponentWillReceiveUpdate(() => setState(false), [state])
+ * ```
+ *
+ * This only applies to states of the current component.
+ * Modifying states from other components causes React reporting errors.
+ * You may also want to read [(Avoid) Notifying parent components about state changes](https://react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes)
+ * and [(Avoid) Passing data to the parent](https://react.dev/learn/you-might-not-need-an-effect#passing-data-to-the-parent).
+ * If you really need to edit other components' states, write it like this:
+ *
+ * ```js
+ * useComponentWillReceiveUpdate(() => {
+ *     setLocalState(false)
+ *     Promise.resolve().then(() => props.setParentState(false))
+ * }, [state])
+ * ```
+ *
+ * @param callback
+ * @param deps
+ */
+export function useComponentWillReceiveUpdate(callback: () => void, deps: readonly unknown[]) {
+  deps = [...deps];
+  const [prev, setPrev] = useState(deps);
+  let changed = deps.length !== prev.length;
+  for (let i = 0; i < deps.length; i += 1) {
+    if (changed) break;
+    if (prev[i] !== deps[i]) changed = true;
+  }
+  if (changed) {
+    setPrev(deps);
+    callback();
+  }
+}