do example

Home.jsx

import React, { useContext } from "react";

//styles
import * as S from "./styles";
import * as A from "styles/shared-components";

//components
import Header from "components/Header";
import { AuthContext } from "components/Auth";
import SpinnerComponent from "components/Spinner";

import { getAllUnlockedModules, getAllUserModules } from "utils/get-courses";

function Home() {
  const { user } = useContext(AuthContext);

  return (
    <S.Home>
      <Header />
      <S.Content>
        {do {
          if (!(user && user.createdAt)) {
            <SpinnerComponent />;
          } else {
            if (!user.enabled) {
              <div>
                Your account is not enabled yet, please take a break 🍵️😎️
              </div>;
            } else {
              const coursesForUser = getAllUserModules(user);
              const unlockedModules = getAllUnlockedModules(user);
              const noCourses = coursesForUser.length === 0;

              if (noCourses) {
                <div>No courses available, please try again in a second.</div>;
              } else {
                <S.List>
                  {coursesForUser.map(course => {
                    let disabled = !unlockedModules.includes(course.title);
                    return (
                      <S.Item
                        key={course}
                        disabled={disabled}
                        to={disabled ? "" : `/lab/${course}.slug`}
                      >
                        {course.title}
                      </S.Item>
                    );
                  })}
                </S.List>;
              }
            }
          }
        }}
      </S.Content>
    </S.Home>
  );
}

export default Home;

If it works it works, right? But can you actually tell what this component returns for a given user? Not sure what's wrong with good ol' component composition: https://gist.github.com/eps1lon/7a0c02c5c40c4dbde80f75dea35ca656

If do-syntax encourages people to write bigger components then I'd rather not enable it.

Curious why you think using an IIFE and returning each JSX expression is worse.

hey @kitze, I noticed you were asking @kentcdodds to refactor this without do. These days I've enjoyed using tons of small components all over the place..

import React, { useContext } from "react";

//styles
import * as S from "./styles";
import * as A from "styles/shared-components";

//components
import Header from "components/Header";
import { AuthContext } from "components/Auth";
import SpinnerComponent from "components/Spinner";

import { getAllUnlockedModules, getAllUserModules } from "utils/get-courses";

function Page({ children }) {
  return (
    <S.Home>
      <Header />
      <S.Content>{children}</S.Content>
    </S.Home>
  );
}

function MessagePage({ message }) {
  return (
    <Page>
      <div>{message}</div>
    </Page>
  );
}

function Home() {
  const { user } = useContext(AuthContext);

  if (!(user && user.createdAt)) {
    return (
      <Page>
        <SpinnerComponent />
      </Page>
    );
  } else {
    if (!user.enabled) {
      return (
        <MessagePage message="Your account is not enabled yet, please take a break" />
      );
    } else {
      const coursesForUser = getAllUserModules(user);
      const unlockedModules = getAllUnlockedModules(user);
      const noCourses = coursesForUser.length === 0;

      if (noCourses) {
        return (
          <MessagePage message="No courses available, please try again in a second." />
        );
      } else {
        <Page>
          <S.List>
            {coursesForUser.map(course => {
              let disabled = !unlockedModules.includes(course.title);
              return (
                <S.Item
                  key={course}
                  disabled={disabled}
                  to={disabled ? "" : `/lab/${course}.slug`}
                >
                  {course.title}
                </S.Item>
              );
            })}
          </S.List>
        </Page>;
      }
    }
  }
}

export default Home;