MENU


Functional Initialization

Like useState, if you call a function to 'lazily' set the initial value of useRef, the function will be called on every render.
RESETRUNFULL
<!DOCTYPE html><html><head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head><body>
    <div></div>
    <script type="text/babel">
      function MyButton() {
        const [x,setX] = React.useState(0);
        const f = x=>{console.log('firing!'); return x;}
        const inputEl = React.useRef(f(null));   // f() called on every render even if ref not used
        return (<button onClick={()=>setX(x+1)}>Render</button>);}
      const root = ReactDOM.createRoot(document.querySelector("div"));
      root.render(<MyButton/>);
    </script>
  </body></html>
useRef does not accept a special function overload like useState. Instead, you can write your own function that creates and sets it lazily (illustrative snippet — 'onIntersect' and the rest of the component are omitted):
function Image(props) {
  const ref = useRef(null);  // ✅ IntersectionObserver is created lazily once
  function getObserver() {
    if (ref.current === null) {
      ref.current = new IntersectionObserver(onIntersect);
    }
    return ref.current;
  }  // When you need it, call getObserver()  // ...}