'Splain Like I'm Five: React Props and Components
Tags: react, webdev, beginners, programming
Published: 2022-03-09 22:06:13

Among the many differences between React.js and Vanilla JavaScript, one of the most important is the interplay between [Props](https://www.w3schools.com/react/react_props.asp) and [Components](url) in React. The beauty of React is that your code is kept organized by compiling each individual subsection of your web page _modularly_ -- in its own receptacle of code -- that is then referenced in parent receptacles. The component/props dynamic makes it easy to pass data and page functionality between subsections of your page. The benefits of modular coding via components and props include keeping code clean and organized, easier debugging, easier navigation, and a more manageable variable scope. 

**Components**

_Functional Components_ can be equated to a vanilla JavaScript function that returns [JSX](https://reactjs.org/docs/introducing-jsx.html). A component is essentially a modularized function that returns a subsection of your webpage-- including the data you wish to display-- written in HTML. Components can drafted in to individual .js files, which are imported into sibling or parent Component.js files for rendering. All lower-level components are _then_ referenced by your granddaddy index.js file to tie the components of your page together. 

For example, you may have a "Cats.js" component on which you render your cat webpage Home Page functionality. You would then import your Cats.js component to its parent component (usually an App.js file) so it can exist with the rest of the components of your webpage. 



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6uqpabslrllaj1okr66o.png)

**Props**

Props can be equated to function arguments in Vanilla Javascript passed as [HTML attributes](url). Props are essentially a representative bit of variable data that can be imported and passed into child components as parameters. Props can be any kind of variable data type, though any prop that is not a string (numbers, booleans, objects, etc...) should be referenced in components with {curly brackets}. Prop object key value pairs are referenced with dot notation. One can also assign a "default prop" in the event that you need a default value to display in the absence of any assigned values. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbv82ic3ju1akvdw8h85.png)

**Prop Destructuring**

Sometimes we will want to pass an object as a prop. React has a lovely way of "destructuring" the prop object in our component so we may more easily use the key values of the object! Destructuring works by passing the props object imported in to the parent component and assigning them to variables with the same names of the object keys in the argument of the child component. See here: 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6o6h3d7a50asy26sda3m.png)

**Prop Drilling**
Sometimes we need to send props through multiple layers of nested components to reach a base child component that needs to use the prop. This is referred to as "prop drilling". Prop drilling has some benefits, but is by and large is frowned upon as a practice. The benefits mean that there is a way to statically review the flow of the code without having to render any extra functioning or potentially break your code with complicated modifications. The main reasons prop drilling is so frowned upon include: 

- It often results in refactoring the shape of some data (ie, an Object: {catList: {name: 'Kitten Face'}}  turns in to {Catlist: {firstName: 'Kitten', lastName: 'Face'}}) down the line. 

- It can result in over-forwarding props, or passing more props than necessary.

- Conversely, it can result in under-forwarding props by way of abusing defaultProps-- Often times this results in not being made aware of missing props.

- Renaming props halfway through (ie <CatButton on={on} /> renders <Switch CatButtonIsOn={on} />). This evolution can make keeping track of the same prop differently named in another component tricky.

**Component Lifecycle** 

<u>Initialization</u>: Props and/or State are assigned (State is an entire can of worms too big for the scope of this blog post, but you can read more about from how it works my colleague, Hannah Glazier, _[here](https://dev.to/hannahglazier/the-usestate-hook-in-react-id4)_).

<u>Mounting</u>:Then the component is "mounted" (created and then inserted in) to the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction).

<u>Updating</u>: The component then undergoes the updating phase as soon as and every time props or state change. 

<u>Unmounting</u>: The component unmounts from the DOM at the end of the cycle. 

Here is a diagram of some of the possible rendering calls that can be made during the component lifecycle depending on the objective of your components:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9q1xuw1vrbyu92d18pqu.png)


**Conclusion**

Components and props are integral elements to the functionality of a React web page, and to cover their different use cases would make this an endless blog post. The basic points are: Components make your code modular, so they are easier to read, easier to debug, and easier to pass through your web application. Props are a way to pass all types of data through the component hierarchy with agility and ease, especially through methods like destructuring. Some prop methods, like prop drilling, can be helpful in some situations and hurtful in others. Components and their props are integral to the outcome of the component lifecycle, and therefore the functionality of your web page! As a software developer, I find using the component/prop system quite elegant in practice hand fun to boot! Happy modularizing!  

**Resources**

_[React Props](https://www.w3schools.com/react/react_props.asp)_ 

_[React Components](https://www.w3schools.com/react/react_components.asp)_

_[React's Use State Hook by Hannah Glazier](https://dev.to/hannahglazier/the-usestate-hook-in-react-id4)_

_[Component Lifecycle](https://www.freecodecamp.org/news/how-to-understand-a-components-lifecycle-methods-in-reactjs-e1a609840630/)_

_[How to understand a component’s lifecycle methods in ReactJS](https://www.freecodecamp.org/news/how-to-understand-a-components-lifecycle-methods-in-reactjs-e1a609840630/)_

_[Intro to JSX](https://reactjs.org/docs/introducing-jsx.html)_

_[HTML Attributes](https://www.w3schools.com/html/html_attributes.asp)_

_[Introduction to the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)_