28 lines
1.2 KiB
Plaintext
28 lines
1.2 KiB
Plaintext
== Why is this an issue?
|
|
|
|
In React, the `ReactDOM.render()` method is used to render a React component into a DOM element. It has a return value, but it's generally recommended not to use it. The method might return a reference to the root `ReactComponent` instance, but it can be unpredictable and may not always be useful. Indeed, the return value can vary depending on the version of React you're using and the specific circumstances in which it's called.
|
|
|
|
[source,javascript]
|
|
----
|
|
const instance = ReactDOM.render(<App />, document.body); // Noncompliant: using the return value of 'ReactDOM.render'
|
|
doSomething(instance);
|
|
----
|
|
|
|
[source,javascript]
|
|
----
|
|
ReactDOM.render(<App />, document.body);
|
|
----
|
|
|
|
Alternatively, if you really need a reference to the root `ReactComponent` instance, the preferred solution is to attach a "callback ref" to the root element.
|
|
|
|
[source,javascript]
|
|
----
|
|
ReactDOM.render(<App />, document.body, callbackRef);
|
|
----
|
|
|
|
== Resources
|
|
=== Documentation
|
|
|
|
* React Documentation - https://react.dev/reference/react-dom/render[ReactDom#render]
|
|
* React Documentation - https://react.dev/learn/referencing-values-with-refs#adding-a-ref-to-your-component[Adding a ref to your component]
|