What is The State In React ?
๐ State is a way to Keep Track of Data that can Change in your Application. State is a Plain JavaScript Object that holds information that may change during the components life cycle. this data directly Affects the Components behavior and appearance . When The state changes , React Re-renders the component with updated information , Ensuring the UI reflects the current State
key Points :โ
- Internal : State is local to it's Components and isn't modified outside the Components
- Dynamic : Sate Can be Modified Throughout the Component Lifecycle Allowing for interactive and responsive UI
- Re-rendering : whenever the state Changes , React Retender the Component and reflecting the updating information on the UI
How State Works ? โ
- State is typically Initialized in the constructor of class components and using useState() hooks in Functional Components.
- You Can directly access the state value using this.state in class components and state variable in functional components.
- State Should never mutated Directly . instead of , use this.setState method for class components and state updater Function in Functional components.
- when Updating State , Never modify the existing state , instead of , create a new object with desire changes and make a shallow a comparison for Re-renders.
๐ Props in React
Props are short for "properties" and are used to pass data from one component to another. They are read-only, meaning they cannot be modified by the receiving component. Props are typically used to pass data from a parent component to a child component.
key Points :โ
- Immutability: Props are immutable. Once set by the parent component, the child component cannot change them.
- Data Flow: Props enable a unidirectional data flow, meaning data flows from parent to child components.
- Function Arguments: Props work similarly to function arguments. When you define a component, you can pass data to it through attributes, just like passing arguments to a function.
Top comments (0)