[docs] Remove unnecessary findDOMNode usage

[eps1lon]

Using some goodies from #13676 and #14536. docs/ is free of findDOMNode.

[mui-pr-bot]

No bundle size changes comparing a5b8011...67a300e

Generated by 🚫 dangerJS against 67a300e

[mbrookes]

We should perhaps agree a pattern here. I find having Ref in the name adds clarity. when viewing the variable in isolation. Admittedly .current is a big giveaway, but when it's an actual component ref, I think it has merit. Similarly, having State in the name of state hooks...

[eps1lon]

So far I have seen *Ref used for ref objects and for return values from findDOMNode. I don't mind adding *Ref to return values from createRef. But it doesn't make much sense to do something like ref={ref => (containerRef = React.findDOMNode(ref))}.

I just think that it doesn't add much value if I append to every variable that gets some (create|use)Ref return value the *Ref suffix. At that point it only adds noise but no information.

[oliviertassinari]

I have been suffixing all the ref variables with Ref. So no surprises here for me. I would vote for keeping it. But I don't have a strong opinion on the subject.

[eps1lon]

I would vote for keeping it.

Keep what? *Ref for (create|use)Ref or *Ref for anything that is a reference to some object?

[mbrookes]

I would vote for the former...

[oliviertassinari]

*Ref for (create|use)Ref

@eps1lon Yes. My motivation is that it's an object we are mutating, it's not immutable. It's an important distinction.

[eps1lon]

My motivation is that it's an object we are mutating, it's not immutable. It's an important distinction.

That's not quite correct though. Every write to an instance field is mutating an object (this). I guess we can settle on "every var that can be handled by react via ref should have the Ref suffix"

// valid
<Component ref={ref => (this.someField = ref)} />
<Component ref={this.someRef} />
// invalid
<Component ref{ref => (this.notARef = ref)} />
<Component ref{ref => (this.containerRef = ReactDOM.findDOMNode(ref))} />

[oliviertassinari]

Ok, if you feel it's better without the prefix we can remove it. I was optimizing for class components. In the hook realm, doing:

const containerRef = React.useRef();

allow us to make a distinction with the over variables. I'm seduced by this pattern. We can't confound a ref variable, that wraps a mutable variable, with an immutable variable that might comes, e.g. from a prop or useState.

[eps1lon]

Well in that context it makes sense. I was mostly thinking about usage in this. For example

// containerRef is not mutable the same way as `React.createRef` would be mutable.
// The value can be changed but the reference not. Using the `Ref` suffix here is misleading
const { containerRef } = this;

<Component ref={ref => (this.containerRef = ReactDOM.findDOMNode(ref))} />