# TypeError: Cannot read properties of null (reading 'current')

- **ID:** `react/ref-object-not-initialized`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 87%

## Root Cause

Attempting to access .current on a ref that is null, often because useRef() was called with no initial value or the ref was not properly attached to a DOM element.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| React 16.8+ | active | — | — |
| React 17.0.2 | active | — | — |
| React 18.2.0 | active | — | — |

## Workarounds

1. **Ensure the ref is attached to a DOM element: const myRef = useRef(null); return <div ref={myRef}>...</div>. Then access myRef.current only after the component mounts, e.g., inside useEffect or an event handler.** (90% success)
   ```
   Ensure the ref is attached to a DOM element: const myRef = useRef(null); return <div ref={myRef}>...</div>. Then access myRef.current only after the component mounts, e.g., inside useEffect or an event handler.
   ```
2. **If using forwardRef, make sure the child component forwards the ref to a DOM element: const Child = forwardRef((props, ref) => <input ref={ref} />);** (85% success)
   ```
   If using forwardRef, make sure the child component forwards the ref to a DOM element: const Child = forwardRef((props, ref) => <input ref={ref} />);
   ```

## Dead Ends

- **Setting useRef(null) explicitly** — If the ref is not attached to a DOM element, it remains null. The fix is to attach it, not to change the initial value. (40% fail)
- **Using useEffect to check if ref.current exists** — A null check only masks the error; the underlying issue (ref not attached) persists. (50% fail)
- **Using createRef() instead of useRef()** — createRef() returns { current: null } in function components and will not persist across renders; it's for class components. (60% fail)
