Props and state make React components the powerhouses that they are. We have finished 10 chapters in the Delightful React book. It's time to take a step back and nail down data-flow in React and understand how React works as whole.
*Note: This article is a part of the Delightful React Series, as part of which, I am releasing one chapter every day for 25 days. Please support me in anyway you can! *
Props and State Data flow
In React data flows from top to bottom.
- A parent component instance can send data to its immediate children component instances via props.
- A component instance can create it’s own internal state via hooks and it can pass this state as props down to it’s children component instances.
- This can go any levels deep.
- Props are read-only for components. They aren't/shouldn't be changed. State is used for mutable data and it can be changed freely.
- This is the core nature of data-flow in React. Top to bottom and not vice-versa.
This ensures that as developers, we can predict and visualise how a component tree works and how it renders in a predictable manner.
Imagine a scenario where data could flow two-way. While it is more convenient, things can go out of control quickly if the data-flow is not configured in a disciplined way.
React keeps it simple with one-way data flow. But, don’t worry, there are ways of sending data back to a parent. We will cover that soon.
- But if your head is blowing up right now with questions, the short answer is that, parents pass functions as props to children which can be called by the children to update data in parents.
- This way, parents and children components can communicate with the same unidirectional data flow.
- Even though data only flows top-down, that doesn't mean it is limited in anyway compared to two-way data-flow. 😀
How do Components keep Views upto-date
When props/state change, how do the components and the elements rendered, immediately update?
Well, React rerenders a component whenever props or state change.
As simple as that.
When props/state of a component instance changes, React rerenders and that simply means the entire function body of the component is reevaluated and the returned JSX is used to update the DOM elements. It uses the Fiber node of each component to handle props and state. We talked about Fiber in the last chapter remember?
- When an instance of a component
MyComponentis used as<MyComponent/>, then the component instance is first created along with it’s fiber, and it’s initial state and props are set into the fiber and then the component renders.
/* Component definition */
function MyComponent(){
}
/*component instance is created*/
<MyComponent/>
- No matter when the component instance renders, it's component definition body is reevaluated using the props/state and other information contained in the fiber object and the React elements are created.
function MyComponent(props){
/* this function body runs for each render */
/* every instance runs this definition with its own props and state from fiber*/
}
Similarly, when props/state change, React updates them in the fiber of the component instance and then React immediately triggers a rerender in the component.
It reevaluates the function body with the updated props/state that it reads from the fiber object of the component instance and React elements are once again created (in a super memoized way of course.)
Of course, after this, React also computes a diff between both renders and decides the optimum way to update the DOM.
Note: There are more intricacies of how fiber objects are tied to component instances but that’s beyond the scope of this book.
Great work so far!
This was an introspection chapter to make sure we understand props, state and data flow in React. At this point, we are comfortable with props and state and the dynamics of a React component at the grass-root level. Let's step up things from the next chapter and build powerful components and hooks.
Thanks and Please support my work
Writing blog posts and making videos is an effort that takes many hours in my day. I do it because I love teaching and make great content. However, I need your support too. Please support my work and follow my social accounts to help me continue to make great content. Here are my social links.
Follow me on Twiter
Subscribe to my channel on Youtube
Thank you!