forwardRef example

ref.jsx

export const SomeButton = forwardRef(
  (
    { children, onSelect, ...props },
    forwardedRef
  ) => {
    return (
      <button
        {...props}
        onClick={onSelect}
        ref={forwardedRef}
      >
        {children}
      </button>
    )
  }
)

// And then the user of the component can useRef to make a ref that it can interact with

function SomeButtonUser() {
  let buttonRef = useRef()
  
  useLayoutEffect(() => {
    const { current } = buttonRef
    
    // do stuff with the ref
    
  }, [])
  
  return (
    <div>
      I have a button here:
      <SomeButton ref={buttonRef} onClick={() => { console.log("I was clicked!") }}>poop</SomeButton>
    </div>)
}