Fix Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value. in React

This warning fires when an input starts as uncontrolled (value is undefined) and later becomes controlled (value is a string). React does not support switching between the two modes. Fix it by initializing the state to an empty string instead of undefined so the input is always controlled from the first render.

Reading the Stack Trace

Here's what each line means:

• at input: The native input element transitions from uncontrolled to controlled when its value prop changes from undefined to a string.
• at RegistrationForm (webpack-internal:///./src/components/RegistrationForm.tsx:8:3): RegistrationForm initializes state with undefined or a missing property, causing the input to start as uncontrolled.
• at updateFunctionComponent (node_modules/react-dom/cjs/react-dom.development.js:19588:20): React detects the control mode switch during re-render and logs the warning.

Common Causes

export default function RegistrationForm() {
  const [form, setForm] = useState({});
  return (
    <input
      value={form.email}
      onChange={e => setForm({ ...form, email: e.target.value })}
    />
  );
}

export default function RegistrationForm() {
  const [email, setEmail] = useState(null);
  return <input value={email} onChange={e => setEmail(e.target.value)} />;
}

export default function RegistrationForm({ prefill }) {
  const [email, setEmail] = useState(prefill?.email);
  return (
    <input
      value={email}
      onChange={e => setEmail(e.target.value)}
    />
  );
}

The Fix

Initialize the form state with email set to an empty string instead of omitting it. This ensures the input is always controlled from the first render, and React never detects a transition from uncontrolled to controlled.

export default function RegistrationForm() {
  const [form, setForm] = useState({});
  return (
    <input
      value={form.email}
      onChange={e => setForm({ ...form, email: e.target.value })}
    />
  );
}

export default function RegistrationForm() {
  const [form, setForm] = useState({ email: '' });
  return (
    <input
      value={form.email}
      onChange={e => setForm({ ...form, email: e.target.value })}
    />
  );
}

Testing the Fix

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

describe('RegistrationForm', () => {
  it('renders without controlled/uncontrolled warning', () => {
    const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
    render(<RegistrationForm />);
    expect(spy).not.toHaveBeenCalledWith(
      expect.stringContaining('uncontrolled input to be controlled')
    );
    spy.mockRestore();
  });

  it('starts with empty input value', () => {
    render(<RegistrationForm />);
    const input = screen.getByRole('textbox') as HTMLInputElement;
    expect(input.value).toBe('');
  });

  it('updates input value on change', () => {
    render(<RegistrationForm />);
    const input = screen.getByRole('textbox');
    fireEvent.change(input, { target: { value: 'test@email.com' } });
    expect((input as HTMLInputElement).value).toBe('test@email.com');
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/react-form-controlled-uncontrolled,git add src/components/RegistrationForm.tsx src/components/__tests__/RegistrationForm.test.tsx,git commit -m "fix: initialize form state with empty string to keep input controlled",git push origin fix/react-form-controlled-uncontrolled

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 no controlled/uncontrolled warnings.
2. Open a pull request with the state initialization fix.
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 forms work correctly in staging.

Frequently Asked Questions