React state

REACT STATE
State is managed within the component in
which variables declared in function body.
State can be changed. State can be
accessed using “useState” Hook in
functional components and “this.state” in
class components. Hook is a new feature in
react. To use this expression it’s essential to
have good understanding of class
components. State hold information that used
for UI by browser.

To use state or state expressions in
react, let’s take an example of one
component-:

Output is shown with counter, as when
you click on 0 it will increment accordingly
as following-:

State is similar to props but state is fully controlled and it is more private by the
component. You can create state only in class component. It is possible to
update and modify the state.
There are two ways to initialize state in React Component.
1. Directly inside class
2. Inside the constructor

• When component class is created constructor is first method, it is right place to
add state.
• Class instance is already created in memory you can use ‘this’ to set properties
on it.
• When you write constructor make sure to call parent class constructor by super
props
• When you call super with props. React will make props available across the
component through this.props.

Like props state holds information about component. State is used when
component needs to keep track of information as when component itself can
create, update and use State. Understand with code example in which component
is created in which there is a button which keep tracks of how many times you
have clicked it.

Lets look at more factors about state-:
State is Changeable in which update Count is used again to explain
setState is run asynchronously and it needs callback function rather than
update state directly which saves the prevState after the updation too.
Now in last look step by step how counter flow works-:

1. First component is initialised and set.count is set to be 0
2. And the it renders within component with “click0times”
Clicked {this.state.count} times
3. And the it renders within component with
“click0times”Clicked {this.state.count} times
4. When user clicks the button then UpdateCount is
called.OnClick={ () => this.updateCount () }
5. With u”pdateCount” “setState” calls with callback to increase counter from
pervious state value.

6. And then setState call to render
7. In last component renders with clicked 1 times .

THANK YOU
REACT
STATE
7070905090
info@ducatindia.com

React state

More Related Content

What's hot (20)

Similar to React state (20)

More from Ducat (20)

Recently uploaded (20)

React state