How to expose a react component functions using forwardRef and useRefs.

App.js

import React, { useRef } from 'react';

import Counter from './components/Counter';

export default () => {
  const counterRef = useRef(null);

  return (
    <fieldset>
      <legend>App.js</legend>
      <Counter ref={counterRef} />
      <button onClick={() => counterRef.current.addOne()}>Parent ref to Counter.addOne()</button>
    </fieldset>
  );
};

Counter.js

import React, { useState, forwardRef } from 'react';

export default forwardRef( (props, ref) => {
  const [count, setCount] = useState(0);

  const addOne = () => setCount(count + 1);

  if(ref) ref.current = {addOne};

  return (
    <fieldset>
      <legend>components/Counter.js</legend>
      <div>Count: {count}</div>
      <button onClick={addOne}>Add +1</button>
    </fieldset>
  );
});