In React, there is no way a parent element or a child element knows if any component is stateful or stateless. They are unaware of the states and they really don’t care if it’s a function or a class.
In React, state is called local or encapsulated.
That’s because the state of any component is not accessible by any other component. It is only accessible and set/changed by the component who owns it.
But you can pass the state as props to its childs. For e.g.
<FormattedDate date={this.state.date} />
This is how FormattedDate component will receive it:
function FormattedDate(props) {
return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}
The FormattedDate component doesn’t know about date‘s origin. Maybe it’s from the Clock’s state, or from the Clock’s props, or it was just typed manually — only we know because we’ve passes it as an argument.
It is known as a “top-down” or “unidirectional” data flow where state is owned by specific component and UI derived from that state can have effect on the components below in the tree structure.
The components are defined as a waterfall. When you add a new state, it just joins at that point and stays in the flow going downwards.
Here’s a great example of how each component is managed separately (isolated) by React.
As you can see, each rendered Clock component creates its own specific UI even though they are coming from same component. The UI is getting updated independently.
Source: React Docs
components data flow examples functions states
