State and Props In React

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.