ReactJS Design Pattern ~Guard Clause Rendering~

・This pattern is a programming pattern that uses early return statements at the beginning of a component's render function to handle edge cases, loading states, or invalid data. This technique improves code readability and maintainability by keeping the main JSX return statement clean and flat.

import { useState } from "react";

function Loading() {
  return <p>Loading...</p>;
}

function Error() {
  return <p>Error!</p>;
}

function UserProfile({ loading, error, user }) {

  if (loading) return <Loading/>;

  if (error) return <Error />;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <p>{user.role}</p>
    </div>
  );
}

function App() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  const user = {
    name: "John Doe",
    email: "[e-mail]",
    role: "Software Developer",
  };

  return (
    <div>

      <button onClick={() => setLoading(!loading)}>Toggle Loading</button>
      <button onClick={() => setError(!error)}>Toggle Error</button>

      <UserProfile loading={loading} error={error} user={user} />
    </div>
  );
}

export default App;