React's useState in Vue

useState.ts

// inspired by https://markus.oberlehner.net/blog/usestate-and-usereducer-with-the-vue-3-composition-api/

import { readonly, ref, UnwrapRef } from "vue";

// "corporate" version
export function useState<T>(initialState: T | undefined) {
  type InitialState = T | undefined;
  type State = UnwrapRef<T> | undefined;
  type StateFn = (currentState: State) => State;

  const state = ref<InitialState>(initialState);

  const setStateValue = (newState: State) => {
    state.value = newState;
  };

  const setStateFunction = (fn: StateFn) => {
    setStateValue(fn(state.value));
  };

  const setState = (stateOrFn: State | StateFn) => {
    if (stateOrFn instanceof Function) {
      setStateFunction(stateOrFn);
    } else {
      setStateValue(stateOrFn);
    }
  };

  return [readonly(state), setState];
}

// "library" version
export function useState2<T>(initialState: T | undefined) {
  const state = ref<T | undefined>(initialState);

  const setState = (
    arg:
      | UnwrapRef<T>
      | ((currentState: UnwrapRef<T> | undefined) => UnwrapRef<T> | undefined)
      | undefined
  ) => {
    state.value = arg instanceof Function ? arg(state.value) : arg;
  };

  return [readonly(state), setState];
}