If you've found yourself on my page, chances are you're learning the very very basics of React- just like myself. At the 'root' (😉 ) of building a react application , you will find one very important concept- the react component hierarchy.
In order to understand react component hierarchy, we must first understand what a component in react is. I prefer to think of components as the individual building blocks of the entire application itself. Components are individual 'parts' of the app, that will return the react elements that will become what appears on the screen for the user.
In the beginning stages of building a react app, developers must make a rough "frame work" of the way they would like to break their app down into "components". Typically the 'root' or base of the app itself will be the component titled "App" which encapsulates the application as a whole, the outermost layer as I think of it in my mind. Depending on what kind of application you're building, other components could be things such as "header", "search bar", "nav bar", "links", "link container", "form", "form container", etc; all things which make up the application.
How do we bring all of these separate components together in order to make the application function as a whole? That is where the component hierarchy comes into play. Information can be shared, and passed down to children in the form of "props" or passed up to a parent using a callback function. Developers must follow the rules and guidelines for sharing information amongst components. Most prefer to visualize the component hierarchy as a "tree", with the parent component at the top and children and neighboring components flow down from the parent.
More specific to our example is this..
We are in the top component "app", which has the children components of "header", and "main container". Information can be passed directly down to the children in the form of props. The children "header" and "main container" may also have children, which can then also be passed down the information that came from "app".
As we know, not all data is static data. More often than not a user can interact with the application, causing a change in the data, or change in "state". At the very basic level, if two components need access to the same state, the state must be "lifted up" to the most common ancestor of both of the child components.
For example
In this particular example, the parent component is "app" which has multiple children, "Home", "Bath", "Car", "Feeding", and "Sleep". All of these children need access to the data, in this case an array of "items" and the state of this data will change depending on which category (corresponding components) a user clicks on. Due to the fact that these sibling components ALL need access to the same state, we have "lifted up state" and stored the state in the common ancestor component "app". Now all children components have access to that state.
The more complex an application becomes, the more difficult it is to share information and data amongst components. In order to develop code that has readability and is easily shared amongst developers, it is important to have a well thought out and designed component hierarchy.
This particular article has just grazed the surface on react components and all that many many layers, but as a new and learning developer, I find it to be one of the most crucial concepts to understand when beginning to work with react!
Thanks for reading!
Top comments (0)