Add custom method to ref in react

Question

I have attached a ref to a html component like this:

const myRef = useRef(null);

<button ref={myRef} />

I want to customize myRef, I want to add a util method called myRef.customMethod.

Is it possible to run a function everytime myRef gets set?

Answer 1

You could use a callback function for setting the ref:

<button ref={(ref) => {/*access or save ref */}}/>

See React Callback Refs for more info.

As this is currently the only way to manage refs by yourself (and not let React handle them for you), i'm pretty sure this is future safe.