Comment by Mark Erikson on "Can you explain the distinction, the pros and cons; in a simple to understand way, for Controlled Components vs. Uncontrolled Components?"

CommentCan you explain the distinction, the pros and cons; in a simple to understand way, for Controlled Components vs. Uncontrolled Components?

Mark Erikson

I write code :)

Nov 14, 2016

Controlled components are primarily related to forms, since input elements normally store their own value internally and allow you to ask for that value later. By always forcing the input to have a value you specify, and handling the change events yourself with updates to your state, dealing with inputs becomes more predictable.

As for Redux, it's entirely fine to use component-level state wherever you feel it's necessary. For example, having an input that's connected to Redux and dispatching an action on every keystroke may be overkill, so tracking the input's value in component state and only dispatching the action on form submission may simplify things.

FYI, I keep a big list of links to high-quality articles on React, Redux, and related topics, at https://github.com/markerikson/react-redux-links . As part of that list, I have a page of articles talking about React and Forms that you may find useful, including a number of articles on controlled inputs.

You may also want to refer to the Redux FAQ question on Redux state vs React component state.

Nirmalya Ghosh

Developer

Nov 14, 2016

Dispatching an action on every keystroke might be an overkill in most cases but if you've identical forms in multiple components, it actually makes sense to dispatch an action on every keystroke. In that way, you might not have to use too many states in your components.

For example, if you've five components which contain inputs, you'll have to get the props and set the states for each input field. Whereas, if you dispatch an action on every keystroke, you can just use the props without the use of any states :)

... and what about redux-form ? ...

Search Hashnode