How to use uncontrolled components in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using uncontrolled components in React allows the DOM to manage form state directly, providing simpler implementation for certain form scenarios. As the creator of CoreUI with extensive React development experience since its early versions, I’ve used uncontrolled components in scenarios where React state management would be overkill. From my expertise, the most effective approach is using refs to access DOM values directly while letting HTML elements maintain their own state. This pattern is particularly useful for simple forms, file uploads, and integrating with third-party libraries that expect direct DOM access.
Use refs to access DOM element values directly while letting HTML elements manage their own state.
import { useRef } from 'react'
function LoginForm() {
const emailRef = useRef(null)
const passwordRef = useRef(null)
const handleSubmit = (e) => {
e.preventDefault()
const email = emailRef.current.value
const password = passwordRef.current.value
console.log('Login:', { email, password })
}
return (
<form onSubmit={handleSubmit}>
<input ref={emailRef} type='email' placeholder='Email' />
<input ref={passwordRef} type='password' placeholder='Password' />
<button type='submit'>Login</button>
</form>
)
}
Here useRef creates references to form elements, and ref={emailRef} attaches the reference to the input. The form elements manage their own state internally, and values are accessed via emailRef.current.value when needed. This approach eliminates the need for state variables and onChange handlers, resulting in less React re-renders and simpler code for basic form scenarios.
Best Practice Note:
This is the same approach we use in CoreUI React components for simple forms and third-party library integrations where controlled components would add unnecessary complexity. Use uncontrolled components sparingly - prefer controlled components for complex forms that require validation, dynamic behavior, or state synchronization.
