Function useStateWithReactiveInput

packages/core/src/common/utils.tsx:219–257

(inputState: T)

// I'm sorry.
const empty = Symbol();
export function useStateWithReactiveInput<T>(inputState: T): [T, React.Dispatch<React.SetStateAction<T>>, () => void] {
    // When [0] is not empty we will return it, [1] is always the last value we saw
    const inputStateRef = React.useRef<[T | typeof empty, T]>([empty, inputState]);
    if (inputStateRef.current[1] !== inputState) {
        // it changed, we must use thee!
        inputStateRef.current[0] = inputState;
    }
    inputStateRef.current[1] = inputState;

    const [state, setState] = React.useState(inputState);
    // crimes against humanity here
    const [, forceRender] = React.useState<{} | undefined>();
    const setStateOuter = React.useCallback<typeof setState>(nv => {
        // this takes care of the case where the inputState was set, then setState gets called again but back to what
        // the state was before the inputState changed. Since the useState effect wont trigger a render in this case
        // we need to be very naughty and force it to see the change. Technically this may not be needed some chunk of
        // the time (in fact most of it) but checking for it is likely to be more expensive than just over-doing it
        const s = inputStateRef.current[0];
        if (s !== empty) {
            nv = typeof nv === "function" ? (nv as (pv: T) => T)(s) : nv;
            if (nv === s) return; // they are setting it to what the inputState is anyway so we can just do nothing
        }
        if (s !== empty) forceRender({});
        setState(pv => {
            if (typeof nv === "function") {
                return (nv as (pv: T) => T)(s === empty ? pv : s);
            }
            return nv;
        });
        inputStateRef.current[0] = empty;
    }, []);

    const onEmpty = React.useCallback(() => {
        inputStateRef.current[0] = empty;
        forceRender({});
    }, []);

    return [inputStateRef.current[0] === empty ? state : inputStateRef.current[0], setStateOuter, onEmpty];
}

export function makeAccessibilityStringForArray(arr: readonly string[]): string {
    // this is basically just .join(", ") but checks to make sure it is not going to allocate