Member-only story

Revolutionizing React’s Conditional Rendering 🎭

The Problem: JSX's Conditional Rendering Conundrum 😖

Xiuer Old
3 min readNov 7, 2024

As React developers, we’ve all been there. Staring at our JSX, wrestling with conditional rendering, and feeling a twinge of frustration. Let’s look at some common code snippets:



```jsx
{isVisible && (
<>
<Header />
<Content />
</>
)}

{
isLoggedIn
? <UserDashboard />
: <LoginForm />
}

Sure, it works, but at what cost? 🤔

  1. Excessive brackets and parentheses make the code hard to read.
  2. Nested conditions? That's when things get really messy.
  3. It's just not as elegant or intuitive as we'd like.

It's not a showstopper, but it's like a pebble in your shoe – a persistent annoyance that can really wear you down over time. 😫

The Inspiration: Solid.js's Elegant Solution 💡

Enter Solid.js, a framework that's been turning heads with its innovative approaches. One of its features caught my eye: a more elegant way to handle conditional rendering.

The Solution: Introducing the Show Component 🎉

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Xiuer Old
Xiuer Old

Written by Xiuer Old

🔥Little brother teaches front-end and AI online🌈

Responses (18)

Write a response

Honestly, I think the standard conditional rendering syntax is SIGNIFICANTLY easier to read.

This article reminds me the US election, ..portraying something more evil than it really is :) ..the suggested solution is very dangerous because of unnecessary rerenders, loosing state with libraries like highcharts or ag grid. The solution to the…

The Idee is not new

https://www.npmjs.com/package/react-if

You have a behavior change in your components.

Fallback is a else in Show
And a loading fackback like suspense in asyncShow...