StateAccessor (getter, setter) Hook => useStateAccessor

Test.tsx

import React from "react";

import type {ReactStateAccessor} from "./useStateAccessor";

type State = {
  count: number;
};

type StateAccessor = ReactStateAccessor<State>

const increaseCount = ({count}: State) => ({count: count + 1}); 
  
const render = (stateAccesor: StateAccessor) => (
  <div>
    <div>Count: {stateAccessor()}</div>
    <button onClick={() => stateAccessor()}>Count: {stateAccessor(increaseCount)}</button>
  <div>
)

const initialState = {
  count: 0
};
  
const Test = () =>
  render(useStateAccessor(initialState));

export default Test;

useStateAccessor.ts

import {useRef, useState} from "react";

import type {SetStateAction} from "react";

type ReactStateAccessor<State> = (
  ...args: [] | [SetStateAction<State>]
) => State;

const useStateAccessors = <State>(
  initialState: State
): ReactStateAccessor<State> => {
  const [, setState] = useState(initialState);

  const stateRef = useRef(initialState);

  return (...args) => {
    if (args.length === 1) {
      const [newStateOrSetter] = args;

      stateRef.current =
        newStateOrSetter instanceof Function
          ? newStateOrSetter(stateRef.current)
          : newStateOrSetter;

      setState(stateRef.current);
    }

    return stateRef.current;
  };
};

export default useStateAccessors;

export type {ReactStateAccessor};