React Native ਵਿੱਚ props ਅਤੇ state ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ?

Question

Accepted Answer

**Props** ਅਤੇ **state** React ਦੇ ਮੂਲ ਧਾਰਣਾਵਾਂ ਹਨ ਜੋ React Native ਵਿੱਚ ਬਿਲਕੁਲ ਇੱਕੋ ਜਿਹੇ ਕੰਮ ਕਰਦੀਆਂ ਹਨ: **props** ਇੱਕ component ਵਿੱਚ ਡੇਟਾ ਪਾਸ ਕਰਦੇ ਹਨ (read-only inputs), ਜਦਕਿ **state** ਡੇਟਾ ਰਿਖਦਾ ਹੈ ਜੋ ਸਮੇਂ ਦੇ ਨਾਲ ਬਦਲ ਸਕਦਾ ਹੈ (re-renders ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ)। ਇਹਨਾਂ ਨੂੰ ਸਮਝਣਾ ਬਿਲਕੁਲ ਜ਼ਰੂਰੀ ਹੈ। ## Props — ਪਾਸ ਕੀਤਾ ਗਿਆ ਡੇਟਾ (read-only) ```jsx // props are inputs passed to a component (from its parent) — READ-ONLY function UserCard({ name, age }) { // receives props return {name}, {age}; } // pass props when using the component // → props flow DOWN (parent → child); a component doesn't change its own props ``` ## State — ਡੇਟਾ ਜੋ ਬਦਲਦਾ ਹੈ (useState ਦੁਆਰਾ) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // declare state + its setter return ( setCount(count + 1)}> {count} {/* uses state */} ); } // → calling setCount updates state → component RE-RENDERS with the new value ``` State ਅੰਦਰੂਨੀ, ਬਦਲਣਯੋਗ ਡੇਟਾ ਹੈ; ਇਸ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ (`useState` ਤੋਂ setter ਦੁਆਰਾ) ਇੱਕ re-render ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ — ਇਹ ਉਹ ਤਰੀਕਾ ਹੈ ਜਿਸ ਨਾਲ UI ਤਬਦੀਲੀਆਂ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ## Props ਬਨਾਮ state ```text PROPS → passed IN from the parent; READ-ONLY (the component doesn't change them); for configuration/data from outside STATE → internal to the component; CHANGEABLE (via setState/useState); triggers re-renders; for data that changes over time (user input, toggles, fetched data) → Data flows DOWN via props; state changes drive UI updates. (Same as React for web.) ``` ## ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ Props ਅਤੇ state ਨੂੰ ਸਮਝਣਾ React Native ਲਈ ਬਿਲਕੁਲ ਜ਼ਰੂਰੀ ਹੈ ਕਿਉਂਕਿ ਇਹ **React ਦੀਆਂ ਮੂਲ ਧਾਰਣਾਵਾਂ ਹਨ ਜੋ components ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਤਰੀਕੇ ਅਤੇ UIs ਦੇ ਅਪਡੇਟ ਹੋਣ ਦੇ ਤਰੀਕੇ ਦੇ ਕੇਂਦਰ ਵਿੱਚ ਹਨ**, ਇਸ ਲਈ ਇਹ ਜ਼ਰੂਰੀ ਜ਼ਾਨਕਾਰੀ ਹੈ। **Props** (read-only ਡੇਟਾ ਜੋ ਇੱਕ parent component ਤੋਂ ਕਿਸੇ component ਵਿੱਚ ਪਾਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, component tree ਦੇ ਅਧੀਨ ਵਹਾਅ) ਉਹ ਤਰੀਕਾ ਹਨ ਜਿਸ ਦੁਆਰਾ components ਬਾਹਰ ਤੋਂ configuration ਅਤੇ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ, reusable, composable components ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ। **State** (ਅੰਦਰੂਨੀ, ਬਦਲਣਯੋਗ ਡੇਟਾ `useState` hook ਦੁਆਰਾ ਪ੍ਰਬੰਧਿਤ, ਜਿਥੇ ਇਸ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ ਇੱਕ re-render ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ) ਉਹ ਤਰੀਕਾ ਹੈ ਜਿਸ ਦਾ ਆਤੀ ਡੇਟਾ ਰਿਖਦਾ ਹੈ ਅਤੇ ਸਮੇਂ ਦੇ ਨਾਲ ਬਦਲਣ ਵਾਲੇ ਡੇਟਾ ਨੂੰ ਮਾਨਦਾ ਹੈ (user input, toggles, ਲਈਅਤ ਗਿਆ ਡੇਟਾ) — ਉਹ ਵਿਧੀ ਜਿਸ ਨਾਲ UIs ਤਬਦੀਲੀਆਂ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ। **ਅੰਤਰ** ਨੂੰ ਸਮਝਣਾ — props ਪਾਸ ਕੀਤੇ ਗਏ ਅਤੇ read-only (ਬਾਹਰੀ ਡੇਟਾ/configuration ਲਈ) ਬਨਾਮ state ਅੰਦਰੂਨੀ ਅਤੇ ਬਦਲਣਯੋਗ (ਡੇਟਾ ਲਈ ਜੋ ਬਦਲਦਾ ਹੈ, re-renders ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ) — ਅਤੇ ਸਿਧਾਂਤ ਕਿ **ਡੇਟਾ props ਦੁਆਰਾ ਅਧੀਨ ਵਹਾਅ ਕਰਦਾ ਹੈ ਜਦਕਿ state ਦੀਆਂ ਤਬਦੀਲੀਆਂ UI ਅਪਡੇਟਸ ਨੂੰ ਚਲਾਉਂਦੀਆਂ ਹਨ** React Native (ਅਤੇ React) ਐਪਸ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਬਣਾਉਣ ਲਈ ਬਿਲਕੁਲ ਜ਼ਰੂਰੀ ਹੈ। ਇਹ React web ਲਈ ਬਿਲਕੁਲ ਇੱਕੋ ਜਿਹੀਆਂ ਧਾਰਣਾਵਾਂ ਹਨ, ਇਸ ਲਈ ਇਹਨਾਂ ਨੂੰ ਸਮਝਣਾ ਸਿੱਧਾ ਤਬਦੀਲ ਹੁੰਦਾ ਹੈ ਅਤੇ React Native components ਬਣਾਉਣ ਵਾਲੇ ਕਿਸੇ ਲਈ ਵੀ ਜ਼ਰੂਰੀ ਹੈ। Props ਅਤੇ state ਨੂੰ ਸਹੀ ਪ੍ਰਾਪਤ ਕਰਨਾ (props ਦੁਆਰਾ ਡੇਟਾ ਪਾਸ ਕਰਨਾ, state ਦੇ ਨਾਲ ਬਦਲਣ ਵਾਲੇ ਡੇਟਾ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨਾ, ਇਕ-ਤਰਫਾ ਡੇਟਾ ਵਹਾਅ ਨੂੰ ਸਮਝਣਾ) ਕਾਰਜਸ਼ੀਲ, ਸਹੀ components ਲਈ ਸਮੂਲ ਹੈ। ਕਿਉਂਕਿ props ਅਤੇ state React Native (ਅਤੇ React) components ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਤਰੀਕੇ ਦੇ ਕੇਂਦਰ ਵਿੱਚ ਹਨ — ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਨਾ (props) ਅਤੇ ਤਬਦੀਲੀ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨਾ (state) UI ਅਪਡੇਟਸ ਨੂੰ ਚਲਾਉਣ ਲਈ — ਅਤੇ ਇਹਨਾਂ ਨੂੰ ਸਮਝਣਾ ਕਿਸੇ ਵੀ React Native ਐਪ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਬਣਾਉਣ ਲਈ ਬਿਲਕੁਲ ਜ਼ਰੂਰੀ ਹੈ, props ਅਤੇ state ਦੀ ਸਮਝ ਲਾਜ਼ਮੀ, ਬੁਨਿਆਦੀ React Native ਜ਼ਾਨਕਾਰੀ ਹੈ — ਮੂਲ ਧਾਰਣਾਵਾਂ ਜੋ ਹਰ React Native ਡਿਵੈਲਪਰ ਨੂੰ ਸਮਝਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ, web React ਲਈ ਵੀ ਇੱਕੋ ਜਿਹੀਆਂ (ਇਸ ਲਈ ਜ਼ਾਨਕਾਰੀ ਤਬਦੀਲ ਹੁੰਦੀ ਹੈ), ਅਤੇ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਵਾਲੇ ਅਤੇ ਤਬਦੀਲੀ ਨੂੰ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਨ ਵਾਲੇ components ਬਣਾਉਣ ਲਈ ਬਨਿਆਦੀ।