Followers

State in React Native

State in React Native

State in react native is responsible for internal behavior changes of a component. It allows the component to create and manage their own data for say value of a data in component is to be refreshed or changed then State holds the initial information first and then the value is modified calling setState() method. setState() method notifies react native which part is to be modified and re-rendering process takes place only on the updated parts, one of the reason for react native being fast.
State holds the initial information of components data to be modified and the value of the 


Noteworthy points on State in React Native

  • It is mutable i.e can be modified.
  • Only Container component should have State.
  • Each of the State change triggers a complete re-render of the component.
  • It is responsible for internal behaviour changes of a component 
  • It allows the component to create and manage their own data
  • Components cannot pass data with state, but they can create and manage it internally.
  • It cannot be modified directly instead are modified using setState() method.
  • setState() method notifies react native which part is to be modified and rerendering process takes place only on the updated parts.
  • It affects the performance of the app and so needs to be used only if necessary.
  • It is private i.e can be modified by its own component but caanot be accessed from outside.


Example of State in React Native

Here we have a state with initial information name and isButtonVisible ( which decides the visibility of button) and on pressing the button, values of state variable are changed resulting in modified name and hiding of button.






State updated output after clicking button




You can find the complete code here

Stay tuned to my posts  and do share your valuable thoughts if any queries or you would like to share anything on this topic in the comment section and please do like and share my post if this was helpful.

Hope you liked it :)

Post a Comment

0 Comments