April 22, 2017

What I Love About React #1

Renders with Ternaries
edit

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.


Finished reading?
Liked the post? Give the author a dopamine boost with a few "beard strokes". Click the beard up to 50 times to show your appreciation.

Kyle Shevlin's face, which is mostly a beard with eyes
Kyle Shevlin is a software engineer who specializes in JavaScript, TypeScript, React and frontend web development.
Agathist
Good software by good people.
Visit https://agath.ist to learn more
Sign up for my newsletter
Let's chat some more about TypeScript, React, and frontend web development. Unsubscribe at any time.
Logo for Data Structures and Algorithms
Data Structures and Algorithms
Check out my courses!
If you enjoy my posts, you might enjoy my courses, too. Click the button to view the course or go to Courses for more information.