Conditional Rendering in React: Tips for Clean Code

Introduction

Conditional rendering is a fundamental concept in React that allows components to display different content based on certain conditions. Let’s explore some clean and efficient approaches to handle conditional rendering in your React applications.

Using Ternary Operators Effectively

The ternary operator provides a concise way to handle simple conditional renders:

const WelcomeMessage = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please log in</h1>
      )}
    </div>
  );
};

Leveraging Logical && Operator

For simple show/hide scenarios, the logical AND operator works beautifully:

const Notification = ({ message }) => {
  return (
    <div>
      {message && <div className="alert">{message}</div>}
    </div>
  );
};

Object Literals for Complex Conditions

When dealing with multiple conditions, object literals can replace nested if statements:

const statusMap = {
  pending: <PendingComponent />,
  active: <ActiveComponent />,
  completed: <CompletedComponent />,
};

const StatusWidget = ({ status }) => {
  return statusMap[status] || <DefaultComponent />;
};

Custom Hooks for Reusable Conditional Logic

Extract complex conditional logic into custom hooks:

const useAuthenticatedContent = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [loading, setLoading] = useState(true);

  return {
    isAuthenticated,
    loading,
    content: isAuthenticated ? <AuthContent /> : <GuestContent />,
  };
};

Best Practices

1. Avoid nested ternary operators
2. Extract complex conditions into variables or functions
3. Use early returns for guard clauses
4. Keep conditional renders simple and readable
5. Consider component composition over conditional rendering

Remember, the goal is to write maintainable code that other developers can easily understand and modify. Choose the appropriate conditional rendering pattern based on your specific use case.