React me Conditional Rendering Kaise Karein (Complete Guide in Hindi)

React me conditional rendering kya hota hai aur ise efficiently kaise implement karein? Is complete guide me syntax, best practices aur pro-tips seekhein.

Dosto, jab hum real-world web applications banate hain, toh aksar hamein screen par kuch data tabhi dikhana hota hai jab koi specific condition meet ho. Jaise ki user log-in hai ya nahi, ya phir data load ho raha hai ya successfully fetch ho gaya hai. Yahi par hum ReactJS me conditional rendering ka use karte hain. Agar aapne kabhi socha hai ki UI ko dynamic kaise banayein, toh ye post aapke liye hi hai.

⚡ Quick Answer: Conditional rendering ReactJS ka ek core concept hai jisme hum JavaScript ke standard logical operators (if-else, ternary, &&) ka use karke components ya elements ko conditions ke basis par show ya hide karte hain. Isse hamara UI application ki current state ke hisaab se dynamically update hota hai.

Conditional Rendering kya hai aur ye kyun zaroori hai?

Simple shabdon me kahein toh, conditional rendering ka matlab hai "agar ye condition true hai, toh ye UI dikhao, varna kuch aur dikhao." Hum components ko wahi dikhate hain jo us moment par valid ho. Ye process hamare application ko smart aur interactive banati hai.

Conditional Rendering kaise kaam karta hai? (Architectural Flow)

React me rendering process pure JavaScript logic par depend karti hai. Dekhiye iska visual flow kaise hota hai:

🏗️ Architecture Diagram

State/Props
→
Logic (If/Ternary)
→
Filtered Output

Diagram: React state se UI output tak ka logic flow.

React me Conditional Rendering ke main tareeke

1. If-Else statement ka use

Ye sabse basic tareeka hai. Lekin dhyan rakhein, JSX ke andar hum direct if-else nahi likh sakte, isliye hamein component ke function body me React components ke return se pehle logic likhna hota hai.

function UserGreeting() {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting() {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

2. Ternary Operator (Condition ? True : False)

Ternary operator professional developers ka favourite hai kyunki ye ek hi line me code ko concise kar deta hai.

const StatusMessage = ({ status }) => {
  return (
    <div>
      {status === 'success' ? (
        <p style={{color: 'green'}}>Operation Successful!</p>
      ) : (
        <p style={{color: 'red'}}>Something went wrong.</p>
      )}
    </div>
  );
};

3. Logical AND (&&) Operator

Jab hamein sirf tab kuch dikhana ho jab condition true ho, aur false hone par kuch na dikhana ho, tab && ka use karte hain.

function Mailbox({ unreadMessages }) {
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>You have {unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );
}

Comparison Table: Rendering Methods

Method	Best For	Readability
if-else	Complex Logic	High
Ternary	Simple binary conditions	Medium
Logical &&	Single outcome conditions	Very High

Common Errors aur Debugging (Best Practices)

Dosto, aksar log && operator use karte waqt galti kar dete hain. Agar aap number type ki variable check kar rahe hain, jaise count && <Component />, aur count ki value 0 hai, toh React screen par 0 print kar dega! Ise fix karne ke liye hamesha count > 0 && <Component /> use karein. Error se bachne ke liye hamesha Boolean values ka dhyaan rakhein.

Performance optimization ke liye, complex logic ko render function se bahar rakhein ya useMemo hook ka use karein taaki unnecessary re-renders na hon.

Key Takeaways

Toh dosto, aaj humne seekha ki conditional rendering React ki power hai. Ternary operator choti conditions ke liye best hai, while if-else heavy logic handle karta hai. Hamesha code clean rakhein aur && ke saath 0 wali mistake se bachein. Official React Documentation ko follow karna kabhi na bhoolein!

Frequently Asked Questions (FAQs)

Q1: Kya hum JSX ke andar if-else use kar sakte hain?
Nahi, JSX ke direct andar if-else kaam nahi karta. Aap ternary operator ya external function ka use kar sakte hain.
Q2: && operator kab use karna chahiye?
Jab aapko kisi component ko tabhi render karna ho jab condition 'true' ho, aur 'false' hone par blank chhodna ho.
Q3: Conditional rendering se performance par asar padta hai?
Nahi, React ka reconciliation engine bahut fast hai. Ye sirf necessary updates hi DOM me reflect karta hai.
Q4: Ternary operator nesting avoid kyun karni chahiye?
Nested ternary operator code ko "spaghetti" bana dete hain jise padhna aur debug karna mushkil hota hai.
Q5: Error handling me conditional rendering kaise help karti hai?
Aap 'error state' check karke 'Fallback UI' ya error message dikha sakte hain, jisse user experience kharab nahi hota.