Early Returns and if/else in Components

While ternary expressions work well for simple cases, complex conditional logic belongs above the return statement in plain JavaScript. An early return — returning JSX early when a certain condition is met — is an elegant way to handle loading states, error states, and empty states without nesting conditions inside the main JSX tree. React calls this the "guard clause" pattern. A component that displays user data might return a spinner if data is loading, an error message if the fetch failed, a placeholder if the data is empty, and the actual data table otherwise. Each condition is a separate `if` statement with its own `return`, keeping the happy-path return at the bottom clean and readable. The only restriction is that React hooks must be called unconditionally — before any early return — because the "rules of hooks" require that the same hooks run in the same order on every render. Helper functions that return JSX are another tool in this arsenal. A function like `renderContent()` can use `if`/`else` freely and be called from inside the main return. This keeps complex branching out of the JSX template while the overall structure of the rendered output stays visible. For highly dynamic layouts, a dedicated component per state (LoadingState, ErrorState, EmptyState) often leads to the cleanest code.

Example

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser]     = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError]   = useState(null);

  // Hooks MUST be called before any early return
  useEffect(() => {
    setLoading(true);
    setError(null);
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then(r => { if (!r.ok) throw new Error('Not found'); return r.json(); })
      .then(data => { setUser(data); setLoading(false); })
      .catch(err => { setError(err.message); setLoading(false); });
  }, [userId]);

  // Early returns — each guard is a separate if
  if (loading) {
    return <p style={{ color: '#888' }}>Loading user #{userId}…</p>;
  }

  if (error) {
    return (
      <div style={{ color: 'red', background: '#fee2e2', padding: 12, borderRadius: 6 }}>
        <strong>Error:</strong> {error}
      </div>
    );
  }

  if (!user) {
    return <p>No user found.</p>;
  }

  // Happy path — clean, no nesting
  return (
    <div style={{ border: '1px solid #ddd', padding: 16, borderRadius: 8 }}>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Phone: {user.phone}</p>
      <p>Company: {user.company.name}</p>
    </div>
  );
}

export default UserProfile;

HTML

Full Editor

Related Resources

React Reference

Complete tag & property list

React How-To Guides

Step-by-step practical guides

React Exercises

Practice what you've learned