1 / 11

REACT STATE

State is managed within the component in which variables declared in function body. State can be changed. State can be accessed using u201cuseStateu201d Hook in functional components and u201cthis.stateu201d in class components. Hook is a new feature in react. To use this expression itu2019s essential to have good understanding of class components. State hold information that used for UI by browser.<br>https://www.ducatindia.com/javatraining/<br>

ducathub
Download Presentation

REACT STATE

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WELCOME TO DUCAT INDIA Language | Industrial Training | Digital Marketing | Web Technology | Testing+ | Database |  Networking | Mobile Application | ERP | Graphic | Big Data | Cloud Computing REACT STATE 7070905090 info@ducatindia.com

  2. 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.

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

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

  5. 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. Directly inside class Inside the constructor

  6. 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.

  7. 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.

  8. 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-:

  9. 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 UpdateCountis called.OnClick={ () => this.updateCount () } 5. With u”pdateCount” “setState” calls with callback to increase counter from pervious state value.

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

  11. THANK YOU REACT STATE 7070905090 info@ducatindia.com

More Related