---
title: "Write better React code without conditional rendering operators"
url: https://daily.dev/posts/write-better-react-code-without-conditional-rendering-operators-wg0wdjcmb
source_url: https://itnext.io/how-i-improved-my-react-code-readability-and-maintainability-with-conditional-rendering-94b32448bc70?source=rss----5b301f10ddcd---4
type: article
source: "ITNEXT"
author: "Kliton Bare"
published: 2022-09-09T21:50:47.987Z
updated: 2024-08-30T02:15:36.174Z
tags: ["angular", "react"]
reading_time: 1
upvotes: 41
comments: 5
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Write better React code without conditional rendering operators

**[ITNEXT](https://daily.dev/sources/itnext)** · [@kliton](https://daily.dev/kliton) · 1 min read · 41 upvotes · 5 comments

## Summary

ReactJS official documentation explains how to do conditional rendering in React. But in large projects or components, the code is not very readable and maintainable. The problem in React can make the code hard to read and maintain. In this tutorial, we will use the If, Then, Else components from the library.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://itnext.io/how-i-improved-my-react-code-readability-and-maintainability-with-conditional-rendering-94b32448bc70?source=rss----5b301f10ddcd---4>

## Community discussion

Top comments from developers on daily.dev.

**@imjb87** · 6 upvotes

> The notion that this is "better" code is entirely subjective. Personally I find this harder to read and understand, not to mention it probably needlessly increases the amount of unused JS in your bundle.
>
> A better way to keep it concise is code splitting with components. This is even suggested in the React documentation. Do not be afraid to split your code down into multiple components/objects.

**@lin\_du** · 3 upvotes

> Over abstraction. No improvement in readability, scalability, or maintainability

**@arcifius** · 2 upvotes

> Interesting but as stated here this is very subjective when it comes to better React code...

**@elforastero** · 0 upvotes

> As it was noticed in the comments on medium, code inside if statement doesn't execute if that statement is falsey. On the opposite, react components have to be executed.

**@harelk1015** · 0 upvotes

> just changed the syntax
> "
> if (...) {
> ...
> }
> "
> to :
> "
> <If .... />
> ....
> <Else ... />
> ...
> "
>
> so useless in my opinion

## Similar posts on daily.dev

- [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 0 upvotes · 0 comments
- [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments
- [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments
- [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments
- [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments

---

Tags: [#angular](https://daily.dev/tags/angular), [#react](https://daily.dev/tags/react)

[View this post on daily.dev](https://daily.dev/posts/write-better-react-code-without-conditional-rendering-operators-wg0wdjcmb)