Conditional Rendering in React & Next.js - Writing Smarter UI Logic

Master the art of dynamic interfaces. Explore the most effective patterns for conditional rendering in React and Next.js, from ternary operators to early returns.

frontend tricks (2) tutorials (1)

Conditional Rendering in React & Next.js: Writing Smarter UI Logic

Modern web applications are dynamic by nature. The interface must adapt seamlessly relative to user actions, authentication states, loading statuses, permissions, or the data fetched from an API.

This is where conditional rendering becomes essential.

In React and Next.js, conditional rendering allows you to display different UI elements depending on specific conditions. Instead of rendering everything at once, your application decides exactly what should appear based on the current state.

What is Conditional Rendering?

At its core, conditional rendering is about decision-making within your components. Think about these common real-world scenarios:

• Loading States: Showing a spinner while data is being fetched.
• Authentication: Displaying a “Login” button for guests and a “Dashboard” link for authenticated users.
• Permissions: Rendering administrative controls only for users with the correct role.
• Empty States: Showing a placeholder message when a list is empty.

In React, we leverage standard JavaScript logic to control what the browser ultimately renders.

1. The Classic if Statement

The simplest way to handle conditional logic is using a standard JavaScript if statement. This is often used for “early returns” or when the components being swapped are entirely different.

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

  return <h1>Please log in.</h1>;
}

When to use it:

• When the condition results in a completely different UI structure.
• When you want to keep the logic outside of your JSX return for better readability.

2. Ternary Operator (condition ? x : y)

The ternary operator is the “go-to” for many developers because it is concise and can be used directly inside your JSX.

function Greeting({ isLoggedIn }) {
  return (
    <h1>
      {isLoggedIn ? "Welcome back!" : "Please sign in"}
    </h1>
  );
}

When to use it:

• Small UI decisions (like changing a button text).
• Two-option scenarios where you always want to show something.
• Example: {isLoading ? <Spinner /> : <PostList />}

3. Logical AND Operator (&&)

Sometimes you only want to render a component if a condition is true, and nothing at all if it’s false. The && operator is perfect for this.

function Notifications({ count }) {
  return (
    <div>
      {count > 0 && <p>You have {count} notifications</p>}
    </div>
  );
}

How it works:

In JavaScript, true && expression always evaluates to expression, and false && expression evaluates to false. If it’s false, React simply ignores it.

4. Conditional Rendering with Variables

If your conditions are becoming deeply nested or messy, assigning the UI to a variable is a great way to clean up your component.

function Dashboard({ user }) {
  let content;

  if (user.isAdmin) {
    content = <AdminDashboard />;
  } else if (user.isModerator) {
    content = <ModeratorDashboard />;
  } else {
    content = <UserDashboard />;
  }

  return (
    <div className="dashboard-container">
      {content}
    </div>
  );
}

5. Early Returns (The Pro Way)

One of the cleanest patterns in React is returning early. This prevents the rest of the component from executing if a specific condition (like an error or loading state) is met.

function Profile({ user, loading, error }) {
  if (loading) return <p>Loading profile...</p>;
  if (error) return <p>Error loading profile.</p>;
  if (!user) return <p>User not found.</p>;

  return (
    <section>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </section>
  );
}

Conditional Rendering in Next.js

Since Next.js is built on React, these patterns work exactly the same way. However, you’ll frequently use them alongside Next.js features like Server Components or data-fetching hooks.

Example: Handling API States

export default function BlogPostPage() {
  const { data, isLoading, error } = usePosts();

  if (isLoading) return <SkeletonLoader />;
  if (error) return <ErrorMessage message="Failed to load posts." />;

  return <PostList posts={data} />;
}

Best Practices & Tips

1. Avoid Nested Ternaries: They are incredibly hard to read. If you find yourself nesting ternaries, switch to an if statement or a helper function.
2. Handle “0” Carefully: Be careful with {count && <List />}. If count is 0, React will actually render “0” on the screen. Use {count > 0 && <List />} instead.
3. Keep it Readable: If the logic inside your JSX is more than one line, it’s usually better to extract it into a separate variable or a small sub-component.

Final Thoughts

Conditional rendering is one of the most powerful tools in your React toolkit. Mastering these patterns allows you to build interfaces that feel “alive”—responding instantly to data, user interaction, and application state.

Happy coding! 🚀