🚨 Антипаттерн: усложнённые condition-рендеры

Иногда в JSX попадаются вот такие "шедевры":

{isLoggedIn && user?.settings?.theme === 'dark' && !isLoading && <DarkDashboard />}

const shouldShowDarkDashboard =
  isLoggedIn && user?.settings?.theme === 'dark' && !isLoading;

return (
  <>
    {shouldShowDarkDashboard && <DarkDashboard />}
  </>
);

Frontend разработчик

🚨 Антипаттерн: усложнённые condition-рендеры

Иногда в JSX попадаются вот такие "шедевры":

{isLoggedIn && user?.settings?.theme === 'dark' && !isLoading && <DarkDashboard />}

🧠 Да, работает. Но читаемость? Поддержка? Страдает.

✅ Лучше так:

const shouldShowDarkDashboard =
  isLoggedIn && user?.settings?.theme === 'dark' && !isLoading;

return (
  <>
    {shouldShowDarkDashboard && <DarkDashboard />}
  </>
);

📌 Плюсы:
- легко отлаживать;
- можно переиспользовать;
- код "говорит", что делает.

🎯 Правило: выноси сложные условия из JSX — это прокачивает читаемость и облегчает поддержку.

👉 @frontend_1

hottg.com/frontend_1/3960

1.8K viewsApr 23 at 06:42