What I Love About React #1

Renders with Ternaries

This won’t be a very long, nor deep, post. As I was working on some code this afternoon, a thought occurred to me. I love React. I really do. I find it so pleasant to work in React, and I can’t always describe why. However, I have at least one reason I can describe, and I thought I’d share that with you right now. I’ll share more as I think of others.

One reason I love React is the simple fact that the same component can render different markup depending upon props and/or state. I think many of us have grown so accustom to this that we have forgotten how novel and amazing this is.

Let’s take a very simple component for an example.

class MyComponent extends React.Component {
  constructor () {
    super()
    this.state = { isReady: false }
  }

  componentDidMount () {
    setTimeout(() => {
      this.setState({ isReady: true })
    }, 3000)
  }

  render () {
    return this.state.isReady ? (
      <div>I'm ready!</div>
    ) : (
      <div>One moment. I'm still getting ready.</div>
    )
  }
}

In this simple component, I am using a ternary to render one div when the component isReady and an entirely different one when we are not. There are a number of other ways to handle this situation that return the same result, but at it’s core, any one of them will use a ternary or an if...else statement to return different DOM for different state.

This is absolutely brilliant. Could you imagine trying to accomplish this with a server side application? You could probably do it with vanilla JavaScript or jQuery simply enough, but would it be as elegant? Our component is as pure as the driven snow. It renders solely based on its inputs, is really easy to test, and pretty easy to reason about.

Just last year, I was working as a Rails developer. There’s nothing in that ecosystem that even comes close to this. Often in this scenario, I would actually render both divs and hide the correct one with CSS. It was hacky, but made transitioning simple and nice.

React eliminates these hacks and instead provides us with a very elegant way of creating really responsive UIs (not responsive in design, but responsive to our data). It’s just hard to beat how simple, yet powerful this mechanism is.

Categories:

Related Posts:

  • Mike

    Is this not very easy with most of them?

    PHP:
    <?=$is_ready ? "I’m ready” : “One moment, I’m still getting ready”?>

    C# .Net
    <%=isReady ? "I’m ready” : “One moment, I’m still getting ready”%>

    etc

    Or are you talking specifically without a page reload? Or to have the need to be testable? It would be easy to setup a function to return the same thing based on an isready var in most server side coding to be testable.

    Granted, I love React but not sure this one is one of the reasons!

    • Yes, I am discussing handling this situation without a page reload, hence the paragraph discussing Rails and how inelegant the solution is to transition from one component to the other without a page refresh.

      This post isn’t a statement that it can’t be done in other languages or frameworks, it’s simply an affirmation of how elegant and simple it is to do in React. It’s one of the reasons why _I_ enjoy React. There are many more, I’m just a lazy writer. I’ll get to them someday.