feat: add useComponentWillReceiveUpdate

[Jack-Works]

useComponentWillReceiveUpdate

Reset part of states when props changed.

Usage

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:

  const [state, setState] = useState(false)
  useEffect(() => setState(false), [props.someProp])

Don't do it. See Adjusting some state when a prop changes
It should be like this:

  const [prev, setPrev] = useState(state)
  if (prev !== state) {
    setPrev(state)
    setState(false)
  }

This hook is a helper for the above pattern.

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
and (Avoid) Passing data to the parent.
If you really need to edit other components' states, write it like this:

useComponentWillReceiveUpdate(() => {
  setLocalState(false)
  Promise.resolve().then(() => props.setParentState(false))
}, [state])

[SukkaW]

Also mention the name of this hook comes from React Class Component: https://react.dev/reference/react/Component#unsafe_componentwillreceiveprops