functionMethodsTest.js

import React, { forwardRef, useRef } from "react";

const Input = forwardRef((props, ref) => (
  <input type="text" ref={ref} className="input" {...props} />
));

function doSideEffect() {
  alert("hey, focused!");
}

const MyInput = forwardRef((props, ref) => {
  const innerInput = useRef(null);
  function focus() {
    doSideEffect();
    innerInput.current && innerInput.current.focus();
  }
  ref.current = { focus };
  return <Input {...props} ref={innerInput} />;
});

export default function App() {
  const input = useRef(null);
  return (
    <div className="App">
      <button
        onClick={() => {
          input.current && input.current.focus();
        }}
      >
        Click me
      </button>
      <MyInput ref={input} value="hello" />
    </div>
  );
}

discussion: reactjs/rfcs#103