When should we use the callback ref method for creating refs?

the callback ref pattern provides us with a more powerful way to have control for cases when a child is being added or removed dynamically, that means the child does not have the same lifetime as the parent or you need to perform any effect when a ref has been mounted.

Let’s consider a simple example where part of a form only appears when the user clicks on the first button and when it happens we want the newly shown input to be focused. Since the second input is added dynamically, when the state changes and the visible variable is set to true, the best approach for this is using the callback ref.

The useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render. Therefore, to run any effect when React attaches or detaches a ref to a DOM node, we would need to use the callback ref.

With callback ref, when the second input shows up and the ref is attached to the <input>, the callbackRef function is called with the HTMLInputElement. Then if the node is not null/undefined we call the focus() method to achieve what we wanted.