What 's state

State is a JavaScript object that stores a component’s dynamic data and determines the component’s
behaviour. Because state is dynamic, it enables a component to keep track of changing information
in between renders and for it to be dynamic and interactive.

Why use state?

In fact, React virtual DOM doesn't allow any random modifications in the data. We need to
initialize and then modify the data in State, so it's like we are describing the scenario for React then
the application will handle any changes.
React before the 16.8 version was using the class based component to handle the stateful
component. After this major update, the react core team gives us the ability to handle state even in a
functional component using the react hooks.

How use state

First let’s take a look at state before the version 16.8. As we said earlier the state was only used in a
class based component. So define a state in a class just follow the example below :
import React from "react";
class Welcome extends React.Component {
state = {
name: "Sara"
};
render() {
return <h1>hello {this.state.name}</h1>;
}
}
export default Welcome;

A state is JavaScript object that can contain any type of data.

How use State

A state must be kept as simple as possible. It can be set only by using the setState() method and
calling this method triggers UI updates.
A state represents the component's local state or information. It can only be accessed or modified
inside the component.
class Welcome extends React.Component {
state = {
name: "Sara"
};
handleClick=()=>this.setState({name:'Arya'})
render() {
return(
<>
<h1>Hello {this.state.name}</h1>
<button onClick={this.handleClick}> ClickMe</button>
 </>
)
}
}

The state value can changed directly by assigning values

False

React merges the object you provide into the current state usingsetState()

The setState method, in react trigger the UI renderingTrue

Using Hooks
After this version 16 (using hooks), In our case, we will use Hooks to be able to control our state
inside the component. So let's go over these hooks.
Hooks were recently introduced to React in February 2019, and it's a revolutionary feature. this
concept tends to change the way we write the code in a certain component of our application.
Hooks have been considered as a potential solution for problems in React Applications thanks to its
simplicity and its new functionalities .
Now, we can access the state even in the Functional component.
PS.We will study in detail the React Hooks in the next skills. We just have used useState in this skill.

Let's start:
We will use this component to introduce Hooks, we will further analyze it:
const MyFunctionComponent = () => {
// setting the state hooks
const [name, setName] = useState("Arya Stark");
return (
<div>
<p>hello my name is {name}</p>
</div>
);
};

To explain the code, we have declared a state variable, then we store name with the value of "Arya
Stark", then we accessed in our component to display the name.

To handle a state in a component we use setState() useState()

The hooks are implemented since the first release of react False

Consider the following code which variable hold the method to change the state
const [family,setFamily] = useState('Stark')

setFamily
Life Cycle
Every React Component has a lifecycle of its own.
A life cycle of a component can be defined as the series of methods that are invoked in different
stages of the component’s existence.
A React Component can go through three stages of its life.
Each component in React has a lifecycle which we can monitor and manipulate during its three
main phases.
The three phases are:
1. Mounting: The first phase of the component life cycle is when the elements are putted in the
DOM
2. Updating: The second phase in the life cycle is when a component is updated.
3. Unmounting: The final phase in the life cycle is when a component is removed from the
DOM

Mounting
This phase is the first phase of the component life cycle, it contains four methods, which are
invoked in this order, when an instance of a component is being created and inserted into the DOM.
1. Constructor(): this method is called when the component is initiated. The constructor
method is the place where we declare the state, and pass the props as an arguments
2. getDerivedStateFromProps(): This method is called before rendering the elements
in the DOM. It’s also the place where the state object being initialized based on the initial
props.
3. render(): This method is the only required method when working with classes. It
examine the props and the state and return the element to render.
4. ComponentDidMount(): this method is invoked immediately after the component get
rendered. And it’s the perfect place to call the setState method.

Updating
When the state or the props, get updated, the component enter this phase of its life cycle. This phase
contain five methods invoked in this order:
1. getDerivedStateFromProps(): this method is the same as in the mounting phase. It
return an object to update the state or null if there is no update.
2. shouldComponentUpdate(): this method is the second method to invoke in this
phase.it will define either the component will be updated or not if the props or the state get
modified.
3. render(): the same as the one in the mounting phase, except it will re-render according to
the new props/state
 4. getSnapshotBeforeUpdate(): this method is invoked right before the most recently
rendered element is committed. It gives us the possibility of capturing some information
from the DOM, before it potentially changes.
5. componentDidUpdate(): this method is called immediately after the update occurs.

Unmounting
The component enter this phase at the end of its life, meaning that it will be removed from the
DOM.
1. componentWillUnmount(): this method is called immediately before the death of the
component. It’s the perfect place to clean up our component

Let's recap:
Let’s recap, the component passes through three major phases during its life cycle. Each phase
contain methods to be invoked in order. In some cases we need to change the behaviour these
methods in order to accomplish a certain tasks.
In the image below, there is visual description of these phases.

Which method in a React Component is called after the component is rendered for the first time?
componentDidMount
Which method in a React Component should you override to stop the component from updating?
componentDidUpdate
The first life cycle that been executed is constructor
React State Recap
By the end of this super skill we have learned that state is cornerstone when dealing with react
component. After the version 16.8 of React.js we can use the state object in both functional and
class based component. Manipulating state can be tricky when it came to dealing with complex
project, that’s why react community and others developers propose some other solution.