I used React’s forwardRef the other day at work in order to focus on a input component when our sidebar opens. Without forwardRef, I had a long chain of refs that I was passing down from my parent component, which made a long and ugly reference to target the ref and made the code confusing to read too.

So I was able to turn code that looked like:

this.searchBoxRef.current.searchInputRef.current

into simply:

this.searchInput.current

Much better!

The code I was working with was only one level deep, so I could see this being expecially useful if you were trying to target a ref three or more levels deep (although, at that point I would consider re-evaluating the structure of the component itself to mitigate needing to reach that far in for a ref).

CodeSandbox mini example: