This is a proposal of `createStateHook`, in order to eliminate call order magic and top-level restriction

custom-hook-creator.js

import { createStateHook } from 'react';

export function createFormInputHook() {
  const useValueState = createStateHook();
  return (initialValue) => {
    const [value, setValue] = useValueState(initialValue);
    function onHandleChange(e) {
      setValue(e.target.value);
    }
    return { value, onChange: onHandleChange };
  }
}

hooks-proposal.js

import { createStateHook, createEffectHook } from 'react';
import { createFormInputHook } from './custom-hook-creator';
import ChatAPI from './ChatAPI';

const useCountState = createStateHook();
const useNameState = createStateHook();
const useIncrementEffect = createEffectHook();
const useStatusSubscriptionEffect = createEffectHook();
const useNameInput = createFormInputHook();

function Comp(props) {
  const [count, setCount] = useCountState(0);
  const [status, setStatus] = useStatusState(props.defaultStatus);
  const { value: name, onChange: onChangeName } = useNameInput('Hana');
  useIncrementEffect(() => {
    const pid = setInterval(() => setCount(count+1), 1000);
    return () => clearInterval(pid);
  });
  if (props.subscribeStatusUpdate) {
    useStatusSubscriptionEffect(() => {
      ChatAPI.subscribe(props.userId, setStatus);
      return () => ChatAPI.unsubscribe(props.userId, setStatus);
    }, [props.userId]);
  }
  return (
    <>
      <div>Count: {count}</div>
      <div>Status: {status}</div>
      <div>Name: <input type="text" onChange={onChangeName} value={name} /></div>
    </>
  );
}