PART-16

STATE REACT
PRESENTER: MOHAMMAD ADIL
 What Is State in ReactJS? REACT

• The state is a built-in React object that is used to contain data or

information about the component.

properties Inside src folder

React
PROPS
Component
immutable props
Un-changeable
 properties Inside src folder
Function parameters
PROPS React
Component
Index.js / App.js <Student name=“Adil”/>

State Created &

Managed within Re-Render React
Component
the component
Changeable / Mutable State
Variables
What Is State in ReactJS? REACT

• A component’s state can change over time, whenever it changes, the

component re-renders.
• The change in state can happen as a response to user action or system-
generated events and these changes determine the behavior of the
component and how it will render.
• Constructor is used to initialize the object’s state.
Important Points Regarding State REACT

• State is similar to props, but it is private and fully controlled by the

component.
• We can create state only in class component.
• It is possible to update the state.
• A state can be modified based on user action or network changes
• Every time the state of an object changes, React re-renders the
component to the browser
Important Points Regarding State REACT

• The state object is initialized in the constructor

• The state object can store multiple properties
• We can update state on a button click
• this.setState() is used to change the value of the state object.
• We can set props data to state.
The setState() Method REACT

• State can be updated in response to event handlers, server responses or

props changes, this is done using the setState() method.
• The setState() method enqueues all of the updates made to the
component state and instructs React to re-render the component and its
children with the updated state.
• Always use the setState() method to change the state object, since it
will ensure that the component knows it’s been updated and calls the
render() method.
There Are 2 Ways Of Initialize State REACT

• 1. With Constructor
• 2. Without Constructor
Difference B/W Props And State
PROPS STATE
• Props get passed to the • State is created and managed
component. within the component.
• Function Parameters. • Variables.
• Props are immutable / un- • State is mutable / changeable.
changeable
Difference B/W Props And State
PROPS STATE
• props -> Functional • useState Hook –> Functional
Components Components.
• this.props -> Class • this.state -> Class Component
Components