React me Conditional Rendering Kaise Karein (Complete Guide in Hindi) (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.

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:

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

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!