Create rule S6790: Disallow using string references (`react/no-string…

…-refs`) (#3187)

rules/S6790/javascript/metadata.json

@@ -0,0 +1,25 @@
+{
+  "title": "String references should not be used",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "react"
+  ],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6790",
+  "sqKey": "S6790",
+  "scope": "All",
+  "defaultQualityProfiles": ["Sonar way"],
+  "quickfix": "unknown",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "MEDIUM",
+      "RELIABILITY": "LOW"
+    },
+    "attribute": "CONVENTIONAL"
+  }
+}

rules/S6790/javascript/rule.adoc

@@ -0,0 +1,46 @@
+== Why is this an issue?
+
+React Refs provide a way to access DOM nodes or React elements created in the render method.
+
+Older React versions allowed the ref attribute to be a string, like `"textInput"`, later accessible as `this.refs.textInput`. This is considered legacy code due to multiple reasons:
+
+* String `refs` make React slower as they force React to keep track of what component is currently executing.
+* String `refs` are not composable: if a library puts a ref on the passed child, the user can't put another ref on it.
+* The owner of a string `ref` is determined by the currently executing component.
+
+[source,javascript,diff-id=1,diff-type=noncompliant]
+----
+const Hello = createReactClass({
+  componentDidMount: function() {
+    const component = this.refs.hello; // Noncompliant
+    // ...
+  },
+  render: function() {
+    return <div ref="hello">Hello, world.</div>;
+  }
+});
+----
+
+Instead, reference callbacks should be used. These do not have the limitations mentioned above. When the DOM node is added to the screen, React will call the `ref` callback with the DOM node as the argument. When that DOM node is removed, React will call your `ref` callback with `null`. One should return `undefined` from the `ref` callback.
+
+[source,javascript,diff-id=1,diff-type=compliant]
+----
+const Hello = createReactClass({
+  componentDidMount: function() {
+    const component = this.hello;
+    // ...
+  },
+  render() {
+    return <div ref={(c) => { this.hello = c; }}>Hello, world.</div>;
+  }
+});
+----
+
+== Resources
+=== Documentation
+
+* https://react.dev/reference/react-dom/components/common#ref-callback[React - `ref` callback function]
+* https://legacy.reactjs.org/docs/refs-and-the-dom.html[React - Refs and the DOM]
+* https://react.dev/learn/manipulating-the-dom-with-refs[React - Manipulating the DOM with Refs]
+* https://react.dev/reference/react/useRef[React - `useRef`]
+* https://react.dev/reference/react/createRef#createref[React - `createRef`]

rules/S6790/metadata.json

@@ -0,0 +1,2 @@
+{
+}