dots Created with Sketch.
Yogesh Chauhan's Blog

Data Flows in React

in React on April 28, 2021

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

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
How to make a Custom Login Page in WordPress?WordPressJavaScript Data Types and Data Structures Things to RememberJavaScriptWhy does MOV matter in IT or any kind of projects?MiscellaneousKilling A Project Part 3: How can an organization ensure that a doomed project is killed as early as possible?MiscellaneousHow to insert Bootstrap 4 in Angular 9 app?AngularHow to get ACF values from custom post type?WordPress