React controlled vs uncontrolled components overall definition

Question

I've been using React since quite a few months and I have been clear about the controlled and uncontrolled nature of components from sources like this

Controlled form inputs
Uncontrolled components

Everything was clear until I stumbled across this post

Controlled Components

I used to think of controlled vs uncontrolled as React component controlling the state then controlled, DOM refs handling then uncontrolled ( using refs )

Then article third changes my view in a way that components are controlled if they have single source of truth from any React component ( Parent or the component itself ). Okay, fine! which means React components receiving or seeding values from parent props to map component local state in constructor becomes uncontrolled.

If you look at the diff of two recommendation section of article 3 the only diff I can make b/w controlled uncontrolled is this

state = { email: this.props.defaultEmail }; //uncontrolled

But aren't the two write-ups confusing to reader to give a clear definition of controlled components or is it just me?

I'm not sure now if I really know how to explain uncontrolled components.

Or is this just a loose terminology?

Answer 1

The basic difference you must understand is: Controlled Components are handled by React itself. They consume props and state of the component. Upon any event invokes, React handle synthetic events like onChange, onClick.

---

While in Uncontrolled Component we request DOM to handle the component. Like asking DOM to get input value by adding reference to component using ref. I hope this would make a clear distinction in both components. You can any question further.

Answer 2

While I agree with the previous answer I would phrase it like this.

Usually "native" react elements such as div can be thought as a function of their props : ({ children, ...attributes }) => .... However some of those elements need to manage state, because of the way the DOM is built. In this case react offers two approaches.

Either you offer a default value and you have uncontrolled components. You then think of it as a function ({ children, ...attributes }, internalComponentState) => ... or you use the controlled version. Then you can resume to the previous model but the state does not go away and instead must be lifted into your component lifecycle (which may not be easy).