How to fix useRef: the value returned should be a valid value or reference in React

// ❌ WRONG - Accessing ref during render
function MyComponent() {
  const inputRef = useRef(null);
  
  // 🚩 Reading ref during render
  console.log(inputRef.current);
  
  // 🚩 Writing ref during render
  inputRef.current = "some value";
  
  return <input ref={inputRef} />;
}

// ✅ CORRECT - Access ref in event handler
function MyComponent() {
  const inputRef = useRef(null);
  
  function handleClick() {
    // ✅ Reading ref in event handler
    console.log(inputRef.current?.value);
    
    // ✅ Writing ref in event handler
    inputRef.current.focus();
  }
  
  return <input ref={inputRef} onClick={handleClick} />;
}

// ✅ CORRECT - Access ref in effect
function MyComponent() {
  const inputRef = useRef(null);
  
  useEffect(() => {
    // ✅ Safe to access ref in effect
    inputRef.current?.focus();
  }, []);
  
  return <input ref={inputRef} />;
}

// ❌ WRONG - Passing a function instead of value
function MyComponent() {
  // 🚩 Function will be called, but ref.current becomes the function
  const ref = useRef(() => new ExpensiveObject());
  
  // Now ref.current is a function, not an ExpensiveObject
  ref.current(); // This calls the function
}

// ✅ CORRECT - Pass the value directly
function MyComponent() {
  const ref = useRef(new ExpensiveObject());
  
  // ref.current is now an ExpensiveObject
  ref.current.doSomething();
}

// ✅ BETTER - Lazy initialization for expensive objects
function MyComponent() {
  const ref = useRef(null);
  
  if (ref.current === null) {
    ref.current = new ExpensiveObject(); // Only created once
  }
  
  return <div>{/* ... */}</div>;
}

// ❌ WRONG - Custom component doesn't forward ref
function MyInput(props) {
  return <input {...props} />;
}

function Parent() {
  const inputRef = useRef(null);
  
  // 🚩 Ref won't work - MyInput doesn't forward it
  return <MyInput ref={inputRef} />;
}

// ✅ CORRECT - Using forwardRef
const MyInput = forwardRef(function MyInput(props, ref) {
  return <input {...props} ref={ref} />;
});

function Parent() {
  const inputRef = useRef(null);
  
  // ✅ Ref works - forwarded to actual input
  return <MyInput ref={inputRef} />;
}

// ❌ WRONG - Using ref for state that should trigger re-render
function Counter() {
  const countRef = useRef(0);
  
  function increment() {
    countRef.current += 1;
    // 🚩 Component won't re-render!
  }
  
  return (
    <div>
      <button onClick={increment}>Increment</button>
      <div>Count: {countRef.current}</div> {/* 🚩 Won't update! */}
    </div>
  );
}

// ✅ CORRECT - Using state for reactive values
function Counter() {
  const [count, setCount] = useState(0);
  
  function increment() {
    setCount(count + 1); // ✅ Triggers re-render
  }
  
  return (
    <div>
      <button onClick={increment}>Increment</button>
      <div>Count: {count}</div> {/* ✅ Updates automatically */}
    </div>
  );
}

// ❌ WRONG - Ref access affects rendering
function MyComponent({ showInput }) {
  const inputRef = useRef(null);
  
  return (
    <div>
      {showInput && (
        <input ref={inputRef} />
      )}
      
      {/* 🚩 Reading ref in render expression */}
      <div>Value: {inputRef.current?.value || "empty"}</div>
    </div>
  );
}

// ✅ CORRECT - Store ref value in state if needed for rendering
function MyComponent({ showInput }) {
  const inputRef = useRef(null);
  const [inputValue, setInputValue] = useState("");
  
  function handleChange(e) {
    setInputValue(e.target.value);
  }
  
  return (
    <div>
      {showInput && (
        <input ref={inputRef} onChange={handleChange} />
      )}
      
      {/* ✅ Using state instead of ref for rendering */}
      <div>Value: {inputValue || "empty"}</div>
    </div>
  );
}

function MyComponent() {
  const renderCountRef = useRef(0);
  
  // This will increment twice in Strict Mode dev
  renderCountRef.current += 1;
  
  console.log(`Render count: ${renderCountRef.current}`);
  // In Strict Mode: logs 1, then 2
  
  // ✅ Better: Use effect for side effects
  useEffect(() => {
    // This runs once after mount in dev too
    console.log("Effect ran");
  }, []);
  
  return <div>Component</div>;
}

// Enable Strict Mode in your app:
// index.js or main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);