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

- **ID:** `react/ref-object-null-on-mount`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 90%

## Root Cause

A ref object is null when accessed because the component has not mounted yet or the ref is incorrectly attached to a stateless component.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| React 18.2.0 | active | — | — |
| React 19.0.0-rc.2 | active | — | — |

## Workarounds

1. **Access the ref inside a useEffect hook with an empty dependency array to ensure the component is mounted: useEffect(() => { if (ref.current) { ref.current.focus(); } }, []);** (95% success)
   ```
   Access the ref inside a useEffect hook with an empty dependency array to ensure the component is mounted: useEffect(() => { if (ref.current) { ref.current.focus(); } }, []);
   ```
2. **Use a callback ref to handle the ref assignment: const inputRef = useCallback(node => { if (node) { node.focus(); } }, []); <input ref={inputRef} />** (90% success)
   ```
   Use a callback ref to handle the ref assignment: const inputRef = useCallback(node => { if (node) { node.focus(); } }, []); <input ref={inputRef} />
   ```
3. **If using a function component, wrap it with React.forwardRef and pass the ref to a DOM element inside: const MyComponent = React.forwardRef((props, ref) => <input ref={ref} />);** (95% success)
   ```
   If using a function component, wrap it with React.forwardRef and pass the ref to a DOM element inside: const MyComponent = React.forwardRef((props, ref) => <input ref={ref} />);
   ```

## Dead Ends

- **** — The ref is not attached until after the component mounts, so it is null initially. (90% fail)
- **** — This creates a dummy element that is not connected to the DOM, so methods like focus() may not work as expected. (70% fail)
- **** — Function components cannot receive refs directly; they must be wrapped in forwardRef. (80% fail)