Understand React Data Flow Which Makes You Brilliant ReactJS Developer!

4 min readJul 2, 2021

Let’s Know How React Data Flow…

We generally don’t understand how or data flow in our component. We’re going to understand how or data flow in our component, and when we set the state. To be good at Reactjs you need to know where our data flow and how is going from one location to another.

Let’s take some examples of these flows :

Class Component
Lifecycle Methods
setState
Redux Data

1. Class Component

We take the example of a class component having constructor and lifecycle method and then render methods.

let see in which order they invoke:

2. Lifecycle Methods

Basically, we have the main 3 types of lifecycle methods like we have demonstrated in the above example. Now, we are going to understand how is our lifecycle methods works and invoked.

componentDidMount :

This lifecycle method is used to call the API to get the data we want in our component. And This data shows in our JSX. This is invoked at the first of the page render.

componentDidUpdate :

This lifecycle method is used to update the data of our component which changes the data after the componentDidMount call.

We basically check the props in conditions and change what we want to change.

componentDidUnmount :

The next phase in the lifecycle is when a component is removed from the DOM or unmounting as React likes to call it.

3. setState

In This Case, We’ll learn how actually DOM sets the state or state that is rendered on the screen.

This Is Our Code :

And This Is How Our Data Flows…

4. Redux Data

The most important is to know how your redux data flow. Like as a file wise and from where our data comes. To be good at Reactjs you need to know where our data flow and how is going from one location to another.

So, let learn the most important topic REDUX.

Redux lets us use State, reducers to store multiple states and it gives us a feature to pass an action which is used to hit API and that data is store in reducer by detecting which type (ACTION TYPE). Which is used in reducer in cases.

And by the help of that Type, we check which case is this and when the case match, data store in a related state.

Let’s take an example of a short piece of code, which is generally used in real-life projects, and the official way to have the structure files in our project…

1st Invoked, in our componentDidMount, we just dispatch an action that is going to hit API. And down below mapStateToProps will get the state from the reducer. ProductReducer having state named products.

2nd invoked, here is little code is missing(Sorry Lil. lazy). even though it just an API. in return it matches the type and this type is also included in the reducer which is going to match and just store the state.