Чего мне не хватало в функциональных компонентах React.js

Так какую проблему вы решали? Если родителю нужно знать состояние вашего компонента, ну так вытесните это состояние полностью в родителя. Часто в реальности родителю нужно не только "сигнализировать" о изменении стояния, но и он должен иметь возможность его инициализировать или даже менять. Т.е. Ваш первый вариант станет чем-то таким

export type ReactStateAndSetter<S> = [S, React.Dispatch<React.SetStateAction<S>>];

export interface IProps {
    numValueState: ReactStateAndSetter<number>;
    strValueState: ReactStateAndSetter<string>;
}

export function SomeComponent({numValueState, strValueState}: IProps) {
    const [numValue, setNumValue] = numValueState;
    const [strValue, setStrValue] = strValueState;
    ...
}

Плюс в приложении не будет двух копий одного состояния — в текущем компоненте и в родителе.
Если же прямо хочется передавать только колбэк в пропы, то useReducer, например, может помочь привязать колбэк к изменению состояния более собрано (в одном месте кода, а не состояние + обертка).
К useCallback() это ситуация вообще никак не относится. Вы вот пишите:

элементы input и button заменим компонентами Input и Button, которые потребуют обернуть обработчики событий хуком useCallback

А почему до замены не нужно было оборачивать? Я сейчас не к тому, зачем вообще useCallback, я к тому, что это не связанные вещи.

deleted

class Members extends MembersBase<IDeps> {
    // …
    onRender = () => {
        useEffect(this.intervalEffect, []);
        const [numValue, setNumValue] = useState(0);
        this.numValueStatePair = {numValue, setNumValue};
    };
}

export function useMembers<D, T extends MembersBase<D>>(ctor: (new () => T), deps:  (T extends MembersBase<infer D> ? D : never)): T {
    // ...
    rv.setDeps(deps);
    rv.onRender(); // вызов метода
    return rv;
}

Предлагаю выносить загромождающие код обработчики в объект класса вместе с зависимостями. Разве так не лучше?

function useInterval<T extends () => void>(cb: T, timeout = 1000) {
  useEffect(() => {
    const intervalHandle = setInterval(cb, timeout);
    return () => clearInterval(intervalHandle);
  }, [cb, timeout]);
}

function useValue<V>(
  initValue: V,
  onValueChange?: (nextValue: V) => void
): [V, (nextValue: V | ((prevValue: V) => V)) => void] {
  const [value, setValue] = useState(initValue);

  useEffect(() => {
    if (onValueChange) {
      onValueChange(value);
    }
  }, [value, onValueChange]);

  return [value, setValue];
}

function useInputHandler(handler: (value: string) => void) {
  return useCallback(
    (e: ChangeEvent<HTMLInputElement>) => {
      handler(e.target.value);
    },
    [handler]
  );
}

function useNumHandler(
  diff: number,
  setNumValue: (value: (prevValue: number) => number) => void
) {
  return useCallback(() => {
    setNumValue((value) => value + diff);
  }, [diff, setNumValue]);
}

interface IProps {
  numChanged?: (sum: number) => void;
  stringChanged?: (concatRezult: string) => void;
}

export function SomeComponent(props: IProps) {
  const { numChanged, stringChanged } = props;
  const [numValue, setNumValue] = useValue<number>(0, numChanged);
  const [strValue, setStrValue] = useValue<string>("", stringChanged);
  const onTextChanged = useInputHandler(setStrValue);
  const incNumByOne = useNumHandler(1, setNumValue);
  const decNumByTen = useNumHandler(-10, setNumValue);

  useInterval(incNumByOne);

  return (
    <div>
      <span>{numValue}</span>
      <input type="text" onChange={onTextChanged} value={strValue} />
      <button type="button" onClick={decNumByTen}>
        -10
      </button>
    </div>
  );
}