To find more information, please visit this URL within the React DOCS. You can also access a version of this code here.
I acknowledge that it is recommended to use the useCallback hook in a Functional React Component to create a ref callback according to the React Docs URL above. However, I wanted to explore what would occur if an ordinary arrow function (inline function) was used instead as a ref callback.
Thus, below is a modified version of the code from the mentioned URL without utilizing the useCallback hook. Instead, there's a simple arrow function serving as a ref callback. Additionally, two console.log statements have been added. The code snippet is available at this URL.
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [height, setHeight] = useState(0);
const measuredRef = node => {
console.log("Setting height. node = ", node);
if (node !== null) {
setHeight(node.getBoundingClientRect().height);
}
};
console.log("Rendering.");
return (
<div className="App">
<h1 ref={measuredRef}>Hello, world</h1>
<h2>The above header is {Math.round(height)}px tall</h2>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Upon loading this app, the following sequence is displayed with numbering:
1. Rendering.
2. Setting height. node = <h1>Hello, world</h1>
3. Rendering.
4. Setting height. node = null
5. Setting height. node = <h1>Hello, world</h1>
6. Rendering.
What causes the ref callback to be triggered three times and why does the component render thrice upon initial load?