Signal pattern for identifying events instead of using usePrevious for reacting to events

[HunderlineK]

Not quite sure if this makes sense, so first I wanted to discuss it before creating a PR.

Problem statement since setState does not accept a callback, if we want to execute a code after an async process has been done, we need to use usePrevious to store the old value e.g. updatingRemoteResource = true set just after the async process had started and then compare it with the new value e.g. updatingRemoteResource = false after the async process is done, and then if they are different, we trigger a new event e.g. fetchUpdatedRemoteResource

I described the issue in more detail here:
https://www.reddit.com/r/reactjs/comments/jzqcyu/decoratively_chaining_asynchronous_hooks_for_flow/

and have searched for it for a while, I couldn't find any alternative solutions e.g. after searching for a while I just found this:
e.g. https://stackoverflow.com/questions/53898810/executing-async-code-on-update-of-state-with-react-hooks

Solution I have an idea borrowed from signal processing that could make this much simpler: if there is a state which we need to keep track of from one render to the next, we define it as an array that can form patterns even if it is a primitive i.e. [], [firstValue], [firstValue, secondValue], etc. that can be used to identify different events e.g. [0] updated to [0,1] signalling an on event or [1], [1,0] signalling an off event. More complex events can be formed e.g. for animations, etc. (perhaps it will be even cleaner with observables, but arrays are good enough I suppose)

In its simplest form though, it's actually just an array with a maximum length of one that gets recreated.

e.g. codesandbox

import React, { useEffect, useState } from "react";

// imagine this is in a remote resource e.g. a database
let remoteNumber = 0;

async function updateRemoteNumber() {
  return new Promise(function (resolve) {
    setTimeout(() => {
      remoteNumber = Math.random();
      resolve("success");
    }, 1000);
  });
}

async function fetchRemoteNumber() {
  return new Promise(function (resolve) {
    setTimeout(() => {
      resolve(remoteNumber);
    }, 1000);
  });
}

export default function App() {
  const [updatingNumber, setUpdatingNumber] = useState([0]);
  const [fetchingNumber, setFetchingNumber] = useState([0]);
  const [reFetchNumber, setRefetchNumber] = useState([0]);
  const [number, setNumber] = useState();

  async function fetchNumber() {
    setFetchingNumber([1]);
    setNumber(undefined);
    const remoteNumber = await fetchRemoteNumber();
    setFetchingNumber([0]);
    setNumber(remoteNumber);
  }

  async function updateNumber() {
    setUpdatingNumber([1]);
    await updateRemoteNumber();
    setUpdatingNumber([1, 0]);
  }

  useEffect(function initialFetch() {
    fetchNumber();
  }, []);

  useEffect(
    function fetchAfterUpdate() {
      if (updatingNumber[1] === 0) {
        console.log("fetchAfterUpdate");
        fetchNumber();
      }
    },
    [updatingNumber]
  );

  useEffect(
    function fetchAfterRefetch() {
      if (reFetchNumber[0]) {
        console.log("fetchAfterRefetch");
        fetchNumber();
      }
    },
    [reFetchNumber]
  );

  const lastFetchNumber = fetchingNumber[fetchingNumber.length - 1];
  const lastUpdatingNumber = updatingNumber[updatingNumber.length - 1];
  const loading = lastFetchNumber || lastUpdatingNumber;

  return (
    <div>
      <p>Number: {number >= 0 ? number : "undefined"}</p>
      <p>Fetching number: {String(Boolean(lastFetchNumber))}</p>
      <p>Updating number: {String(Boolean(lastUpdatingNumber))}</p>
      <button
        onClick={() => {
          setRefetchNumber([1]);
        }}
        disabled={loading}
      >
        Re-fetch number
      </button>
      <button onClick={updateNumber} disabled={loading}>
        Update number
      </button>
    </div>
  );
}

Question Is there any issue with this pattern that I am missing, or are there alternative patterns for achieving the same result? Is it non-obvious enough to be added to the docs as a pattern?

Note I should point that this pattern is useful for cases besides async operations as well e.g. imagine implementing a button for a nested set of collapsible items e.g. a tree chart that collapses/expands all the items. This is inherently not a good use case for declarative state management, because although from one render to the next you want all the items to be expanded, you do not want them to remain expanded if you collapse/expand some items afterwards (this can be implemented by passing callbacks as well, but I find this signal pattern much more straightforward).