YogeshChauhan . com

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


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 uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 5 Use inline if to make a shorter conditional syntax in React May 4 What is Conditional Rendering in React? May 3 How does @extend rule work in SCSS (Sass)? May 2 How different is Handling Events in React vs HTML DOM? May 2 How to create bouncing balls using HTML canvas and JavaScript? Apr 30 HTML canvas methods

You might also like these

How To Create a Fullscreen Background Video using CSS and JavaScript?CSSAggregate Functions Examples in Postgres for BeginnersPostgresHow to Check If a Variable is an Integer, a Float, a Number, NaN, an Infinite or a Numeric in PHP?PHPHow to vertically align a html radio button to it’s label?CSSCSS align-items property examplesCSSThe 8 Golden Rules of Programming I Have Learned in My CareerMisc