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:
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: