Introduction to React Component, State, Prop & LifeCycle
What are Components, States, Props, and LifeCycles in React
What is a React Component?
A component, in simple words, is: “reusable piece of code.”
The purpose of components is that they allow you to break the project into small “reusable” chunks.
Reusable means that you can use them again and again and…Again.
For example, I wrote 64 lines of code to display a navbar in this project.
Do you think it is a good idea to copy 64 lines of code and paste it inside of every page where I want to display a navbar?
Of course no! That’s a horrible idea!
This is why components are life-savers!
If you open this link, you will find the 64 lines of code, but the good part is I can re-use them anywhere I want with just one line of code!
Actually, with two lines of code:
1- Import the component import Nav from ‘./some_path/nav’;
2- Render the component <Nav />
What is React component life-cycle?
A component is like a human. It has three phases:
1- Mounting: born (being rendered)
2- Updating: growing (being updated)
3- Unmounting: Dying (being removed)
React provides you with methods to execute some code at a certain phase of the life cycle.
Before I show you what the hooks are, you must know that there are 2 types of components:
Note: There is a mistake in the screenshots, class xxx extends React it should be class xxx extends Component.
1- Class component: This component is also known as the “Stateful” component because you can initialize the state (an object that holds local variables) inside the constructor.
In this type of component, you can use lifecycle methods.
2- Functional component: This component is known as the “Stateless” component because you can’t initialize a state.
You can’t also use component lifecycle methods here.
Of course, you can use variables, but you are going to use the main feature of using state because it re-renders the component view every time, it does get changed.
Despair not!
React introduced “React hooks,” allowing you to use state and lifecycle methods in functional components with joy and ease!
You can now have state in what was once called a‘ stateless’ component using useState hook also React hooks swapped three lifecycle methods using just one hook useEffect.
I found this picture online. Use it as a cheatsheet.
React State and Props
State, as I have mentioned before, an object that holds local variables is only accessible to this component.
There are two ways to use/create state
In a Class Component, you can create the state inside the constructor and change it inside any function using setState.
In a Functional Component, you can create the state using useState hook to create the state and the method responsible for changing the state:
const [number, setNumber] = useState(1)
Now, whenever you want to change the state you can use setNumber.
console.log(number)
// output => 1
setNumber(number+1)
console.log(number)
// output => 2
Props are data (could be from thestate object, or anywhere else) passed from a parent component to a child component.
Do you remember when we said components are re-usable?
This is the parent component. It has a state that is being passed to a child component as props on line 20.
Also, line 21 has different data being sent to another child component as props.
I am using the same component (reusable!) to render two different data.
In a nutshell, state is data that lives inside the component, props are data that is being passed down to the component from other components.
Thank you for your time :)
