How to Fix 'Cannot Read Property current of null' in useRef with Conditional Rendering

Threat/Impact Level: HIGH | Downtime Risk: HIGH | Time to Fix: 10 mins

TL;DR

• What broke: A useRef hook's .current property is null at the time of access because the DOM node or component it targets hasn't mounted yet — killed by a conditional render guard (&&, ternary, or early return) that evaluated to false.
• How to fix it: Add a null guard (if (!ref.current) return;) or use optional chaining (ref.current?.focus()) before every .current access, and audit whether the ref target is guaranteed to be in the DOM at call time.
• Shortcut: Use our Client-Side Sandbox below to auto-refactor this — paste your component and get a patched version without sending your code to a third-party server.

The Incident (What Does the Error Mean?)

Raw error:

TypeError: Cannot read properties of null (reading 'current')
    at handleSubmit (LoginForm.jsx:42)
    at HTMLButtonElement.onClick (LoginForm.jsx:87)

React initializes every useRef() with { current: null }. The .current property only gets populated after the target JSX element mounts into the DOM. When that element is behind a conditional (isVisible && <input ref={inputRef} />), and your imperative code (event handler, useEffect, callback) fires while the condition is false, ref.current is still null. Accessing any property on it throws immediately. In production this silently crashes the entire React error boundary subtree — users see a blank screen or a frozen UI with zero console output if error boundaries swallow it.