Fix TypeError: Cannot read properties of null (reading 'focus') in React

This error occurs when you try to call a method on a ref whose current value is still null, typically because the DOM element has not yet mounted or was conditionally rendered away. Fix it by adding a null check before accessing ref.current, or by calling ref methods inside useEffect where the DOM is guaranteed to be ready.

Reading the Stack Trace

Here's what each line means:

• at SearchBar (webpack-internal:///./src/components/SearchBar.tsx:12:18): SearchBar tries to call .focus() on ref.current at line 12, but the ref is still null because the DOM has not mounted yet.
• at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18): This is the render phase where refs are not yet attached to DOM elements.
• at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:20069:13): The component is being mounted for the first time, confirming the ref has not been assigned to a DOM node yet.

Common Causes

export default function SearchBar() {
  const inputRef = useRef<HTMLInputElement>(null);
  inputRef.current.focus();
  return <input ref={inputRef} placeholder="Search..." />;
}

export default function SearchBar({ isVisible }) {
  const inputRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return isVisible ? <input ref={inputRef} /> : null;
}

function CustomInput(props) {
  return <input {...props} />;
}

export default function Form() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return <CustomInput ref={inputRef} />;
}

The Fix

Move the ref.current.focus() call into a useEffect hook, which runs after the DOM has been painted and the ref has been attached. Add optional chaining as a safety guard in case the element is conditionally unmounted.

export default function SearchBar() {
  const inputRef = useRef<HTMLInputElement>(null);
  inputRef.current.focus();
  return <input ref={inputRef} placeholder="Search..." />;
}

import { useRef, useEffect } from 'react';

export default function SearchBar() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} placeholder="Search..." />;
}

Testing the Fix

import { render, screen } from '@testing-library/react';
import SearchBar from './SearchBar';

describe('SearchBar', () => {
  it('renders without crashing', () => {
    render(<SearchBar />);
    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
  });

  it('focuses the input on mount', () => {
    render(<SearchBar />);
    const input = screen.getByPlaceholderText('Search...');
    expect(document.activeElement).toBe(input);
  });

  it('does not throw if input is not in the DOM', () => {
    expect(() => render(<SearchBar />)).not.toThrow();
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/react-ref-null-error,git add src/components/SearchBar.tsx src/components/__tests__/SearchBar.test.tsx,git commit -m "fix: move ref.focus() into useEffect to avoid null ref",git push origin fix/react-ref-null-error

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --coverage
      - run: npm run build

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

npm install bugstack-sdk

import { initBugStack } from 'bugstack-sdk'

initBugStack({ apiKey: process.env.BUGSTACK_API_KEY })

Deploying the Fix (Manual Path)

1. Run the test suite locally to confirm the ref is properly accessed after mount.
2. Open a pull request with the useEffect refactor.
3. Wait for CI checks to pass on the PR.
4. Have a teammate review and approve the PR.
5. Merge to main and verify the input autofocus works in staging.

Frequently Asked Questions