What are React controlled components and uncontrolled components?

by

This relates to stateful DOM components (form elements) and the React docs explain the difference:

  • A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component “controls” it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a “dumb component”.
  • A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

Most native React form components support both controlled and uncontrolled usage:

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

In most (or all) cases you should use controlled components.

More Related Contents:

  1. How to display svg icons(.svg files) in UI using React Component?
  2. How can I persist redux state tree on refresh?
  3. How to use callback with useState hook in react [duplicate]
  4. Why do the React docs recommend doing AJAX in componentDidMount, not componentWillMount?
  5. ReactJS: Why is passing the component initial state a prop an anti-pattern?
  6. How to use throttle or debounce with React Hook?
  7. Why, exactly, do we need React.forwardRef?
  8. You should not use outside a
  9. Axios having CORS issue
  10. How to add custom html attributes in JSX
  11. react router v4 default page(not found page)
  12. Next.js – Error: only absolute urls are supported
  13. Installing create-react-app gives npm ERR! shasum check failed and npm ERR! Unexpected end of JSON input while parsing near ‘…mojOzGIEI2rg0m24Yb5Oq’
  14. IMAGE: You may need an appropriate loader to handle this file type
  15. Nested Routes not rendering with React Router v4
  16. How to use comments in React
  17. Visual studio code changes format (React-JSX)
  18. Error while creating new React app (“You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0)”)
  19. Re-initializing class on redirect
  20. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  21. How should I configure create-react-app to serve app from subdirectory?
  22. React: Why component’s constructor is called only once?
  23. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  24. Relative path in index.html after build
  25. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  26. combine react build output into single js file
  27. React 16 warning “warning.js:36 Warning: Did not expect server HTML to contain a in .”
  28. How to bundle a React app to a subdirectory on a server?
  29. Children won’t render when using a layout in ReactJS
  30. How do I window removeEventListener using React useEffect

Leave a Comment