React state in 2 min

Dear reader,this is going to be a 4 part series article highlighting the following concepts on state in react.
On a lighter note,did you know you just discovered a gem in the react mines 😁. Here!

What is State in React?

How State in React works?

Types of State in React

What is Lifting State Up in React?

Okay, lets get started!

What is State in React?

• React Provides a dynamic data store for each component
• The internal data represents the state of a react component and can be accessed using the state member variable of that react component.
• Whenever the state of the component changes, the component re-renders along with its new state by calling the render() method.

Summary:

The state represents the value of dynamic properties of a React component's data at a given instance.

How to define State in React?

• They are two ways to define the state in React, using the setState API and useState Hooks API respectively.
• Will focus on the useState hook API for functional components
• React state should not be modified directly through the state member variable and updating the state through the member variable does not re-render the component.
• to define state simply import the useState hook

const [myState, setMyState] = useState({name: 'Jon'})

• To access the state simply :

<p>{myState.name}</p>

• To update state simply:

const handleState =() => {
    setMyState ({name: 'Jane', age: 27})
}

Summary

We can update any one of the state fields at a time instead of updating the whole object. This feature gives the developer the flexibility to easily handle the state data.

Conclusion

In react whenever the state is inferred or defined it simply means the status of the application or component at any given instance and that allows it to be aware of its environment to respond to requests and updates accordingly.