🎯 Scenario

You fetch user data from an API. Each user object includes a property such as isPremium. You want to show a “Premium Badge” only for users who have isPremium: true.

❓ Problem Explanation

In React, when you fetch data asynchronously, you must wait for the data to load before using it in your JSX. Directly accessing nested properties before the data arrives can lead to errors. Hence, conditional rendering is required to safely show or hide elements like a premium badge.

⚠️ Common Pitfalls

• Accessing user.isPremium before data is loaded (null or undefined errors)
• No loading state — causes flash of empty content
• Improper use of conditional rendering (e.g., not using checks)

✅ Step-by-Step Implementation

Let’s break down how to fetch user data and conditionally render a premium badge based on the API response in a React functional component.

    // Step 1: Import hooks from React
    import React, { useEffect, useState } from "react";
    
    // Step 2: Define the functional component
    const UserProfile = () => {
      // Step 3: Create two state variables
      // `user` to hold fetched user data, `loading` to control loading UI
      const [user, setUser] = useState(null);
      const [loading, setLoading] = useState(true);
    
      // Step 4: Use useEffect to fetch data after component mounts
      useEffect(() => {
        fetchUserData();  // Call our async function on load
      }, []);
    
      // Step 5: Define the async function to fetch user data from an API
      const fetchUserData = async () => {
        try {
          const response = await fetch("https://api.example.com/user/1");
          const data = await response.json();
          setUser(data);  // Set the fetched data into `user`
        } catch (error) {
          console.error("Error fetching user:", error);
        } finally {
          setLoading(false);  // Mark loading as done, even if there was an error
        }
      };
    
      // Step 6: Conditional UI if data is still loading
      if (loading) return <p>Loading user...</p>;
    
      // Step 7: Render the actual user UI based on the data
      return (
        <div className="user-profile">
          <h2>{user.name}</h2>
    
          // Step 8: Conditionally render the premium badge
          {user.isPremium && (
            <span className="premium-badge">🌟 Premium User</span>
          )}
    
          // Step 9: Conditionally render a free plan badge for non-premium users
          {!user.isPremium && (
            <span className="free-badge">Free Plan User</span>
          )}
        </div>
      );
    };
    
    // Step 10: Export the component so it can be used elsewhere
    export default UserProfile;
      

🔍 This implementation covers data fetching, loading state handling, and conditional rendering in a clean and reusable format. It follows React best practices using useEffect for lifecycle management and useState for dynamic UI updates.

🧪 Example Output

For Premium User: “🌟 Premium User” is shown.

For Free User: “Free Plan User” is shown instead.

🧠 Key Concepts Covered

• useEffect – fetch API data after component mounts
• useState – store user data and loading status
• Conditional JSX – use logical && or ternaries
• Fallback UI – handle loading states

✅ Best Practices

• Use loading state to prevent UI flickering
• Always check if user exists before accessing properties
• Keep conditionals clean and readable
• Extract repeated UI logic into reusable components

📤 Bonus: Reusable PremiumBadge Component

const PremiumBadge = ({ isPremium }) => {
  if (!isPremium) return null;

  return (
    <span className="premium-badge">
      🌟 Premium User
    </span>
  );
};
      

<PremiumBadge isPremium={user.isPremium} />

🧩 Real-World Use Case

In an e-commerce app, premium customers may get exclusive deals. A badge helps visually differentiate them across orders, profile pages, or support panels.

🎤 Interview Questions and Answers

    {user.isPremium && <span>🌟 Premium User</span>}
        

    // Example:
    return (
      <div>
        {isLoggedIn ? <Dashboard /> : <LoginForm />}
      </div>
    );
        

    // Safe approach:
    if (!user) return <p>Loading...</p>;
    
    return <p>Hello {user?.name}</p>;
        

    const UserCard = React.memo(({ user }) => (
      <div>
        <h4>{user.name}</h4>
        {user.isPremium && <span>🌟 Premium</span>}
      </div>
    ));
        

    // Separate reusable badge
    const PremiumBadge = ({ isPremium }) => {
      return isPremium ? <span>🌟 Premium User</span> : null;
    };
        

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Something went wrong.</p>;
    
    return <UserProfile />;
        

⚡ Performance Optimization Tips

When working with conditional rendering and API responses in React, especially in components that re-render frequently or render large lists (like users or items), it’s essential to optimize performance. Here are best practices and techniques:

    const UserCard = React.memo(({ user }) => (
      <div className="user-card">
        <h3>{user.name}</h3>
        {user.isPremium && <PremiumBadge />}
      </div>
    ));
        

    // ❌ Avoid this:
    setUser({ ...user }); // causes re-render even if no data changed
    
    // ✅ Instead:
    if (JSON.stringify(newData) !== JSON.stringify(user)) {
      setUser(newData);
    }
        

    {users.map(user => (
      <UserCard key={user.id} user={user} />
    ))}
        

    import React, { Suspense, lazy } from "react";
    
    const PremiumBadge = lazy(() => import("./PremiumBadge"));
    
    return (
      <Suspense fallback={<span>Loading...</span>}>
        {user.isPremium && <PremiumBadge />}
      </Suspense>
    );
        

    // ❌ Avoid
    <button onClick={() => handleClick(user.id)}>Click</button>
    
    // ✅ Instead
    const handleClick = useCallback((id) => {
      // logic
    }, []);
    
    <button onClick={() => handleClick(user.id)}>Click</button>
        

    const filteredUsers = useMemo(() => {
      return users.filter(user => user.isPremium);
    }, [users]);
        

    {loading ? <SkeletonUserCard /> : <UserCard user={user} />}