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.
