React.js – A step backwards?

September 14, 2015

In 1990, code looked like:

<div onclick=“doSomething”>Click Me</div>

In 2010, code looked like:

<div id=“js-doSomething”>Click Me</div>

and then

$(“#js-doSomething”).on(“click”, function() {
    doSomething();
};

In 2015, code looks like:

render () {
    return (
        <div onClick=“doSomething”>Click Me</div>
    );
}

So the question is, are we moving backwards?

Simple answer, no.

Why was onclick a good idea?

  • Readability – You can just look at the div and know exactly what happens when you click on it.

Why was onclick a bad idea?

  • Separation of Concerns – We’re way past that now.
  • Polluting the Global Namespace – Anything you put in an onclick event is automatically bound to the window object. This is bad for multiple reasons.
  • Strange Scoping – Check out this answer on StackOverflow.

Are we back to these problems?

Simple answer, no.

Using React’s onClick event suffers from only one of these problems; the separation of concerns.

Like I said earlier though, if you are using JavaScript to create all of your HTML, we’re way passed that. It doesn’t pollute the global namespace and has JavaScript’s (mostly) sane scoping.

So, even though it really looks like we’re developing using age-old anti-patterns, we’re really writing readable code – the way it should have been done originally.