To Hooks or Not to Hooks?

Several months ago we started talking about whether or not to update our React curriculum to use the new React Hooks syntax over the old class-based syntax.

It was a challenging decision. In addition to getting familiar with hooks ourselves, if we made the switch, we would need to update the curriculum’s in-class activities, homework assignments, quizzes, code examples, and cheatsheets. In addition, we would need to find or create new tutorials and reading materials. To be sure that work would be worth it, we had to answer some questions:

1. How easy or difficult will hooks be for students to learn and use compared to the class-based way?
2. How many people are actually using hooks in practice? That is, will learning hooks put our students at a competitive advantage, knowing the latest and greatest tools? Or will it hurt them to be less familiar with the older, more established, and (we imagined at the time) still more commonly used class syntax?
3. Will there be enough good learning resources available? How many guides, tutorials, and other resources are out there for students to be able to find answers to their questions and explanations of the bugs they would run into in hooks-style React?

Question One: Ease of Learning

As we learned the ins and outs of hooks ourselves, it quickly became clear that switching to hooks-based syntax from class-based syntax almost always made our examples and exercises shorter and easier to read. From a teaching and learning standpoint, the advantage was hooks’.

A counter the old way:

class Counter extends Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };

    this.increment = this.increment.bind(this);
  }

  increment() {
    this.setState({ count: this.state.count + 1});
  }

  render() {
    return (
      <div>
        <button onClick={this.increment}>add 1</button>
        <p>{this.state.count}</p>
      </div>
    );
  }
}

A counter the new way:

function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <button onClick={increment}>add 1</button>
      <p>{count}</p>
    </div>
  );
}

Simpler, shorter, and as an added bonus: no more having to introduce the concept of this at the same time as we introduce React.

Question Two: Adoption

Ease of learning is a major plus, but are companies actually using hooks in practice? We asked around a few different coding communities, and we were surprised by how consistently the answer turned out to be either ”Yes, we’ve moved entirely to hooks”, or ”Our older React code is still using class syntax, but we are writing all of our new components in hooks”. Almost everyone who responded was in one of those two groups.

“My team decided hooks are the bee’s knees and switched the entire codebase over to it.”

“We are 100% [hooks] with our clients”

“We've been updating our codebase and utilizing hooks for greenfield work. Super nice.”

“We're using them in any new components.”

“We use hooks exclusively.”

While we did get a couple of responses from people at companies who had not made the switch, quotes like the above were the overwhelming majority. Given that hooks is still pretty new and also a significant departure from the old way of doing things, we were surprised by how consistently people said they had already made a partial or total switch.

Question Three: Resources

With concerns about ease of learning and industry adoption out of the way, our last concern was the availability of resources. For years and years, all of the blog posts, tutorials, Stack Overflow questions and answers, etc., for React have been written with class-style React in mind. Would there be enough resources written for hooks-style React that our students would be able to find answers to the questions and bugs that would inevitably come up?

The resources question turned out harder to answer than the other two. While there is a fair amount of material written for hooks-style React at this point, most of it is written with the assumption that its audience already knows React. The guides are from the perspective of ”How to switch from class-style React to hooks-style React”, not “How to learn hooks-style React from scratch”. With students learning the hooks way of doing things from the start, analogies to the class way of doing things weren’t going to be that helpful.

This is changing, slowly. Increasingly more of the intro docs and tutorials for various React libraries are being written with hooks in mind, and new resources and Stack Overflow answers continue to pop up.

That said, to really feel confident that enough resources would be available if we switched the curriculum to hooks, we ended up deciding that we would need to write, or at least adapt, some resources of our own. The story of writing that adaptation will be the subject of next week's post.

Making the Switch

We eventually decided to go ahead and make the switch to a curriculum that introduced React via React Hooks. And as one of the people who worked on updating our materials for the switch, I have to say it was incredibly gratifying to watch almost all of the code for our activities and examples get shorter and clearer than it had been when written in class-style React. I’m a big fan of hooks, personally. I think it’s one of the best API updates I’ve ever seen a tool go through.

Requisite plug: if you’re a user of the cheatsheets we’ve published at Kickstart Coding, the all-new hooks versions are now open source and available at github.com/kickstartcoding/cheatsheets, including a new one covering useEffect specifically (link). If you’re tackling React for the very first time, or if you’re just making the switch from class-style to hooks-style React, check them out!

Next week I’ll be writing about the project we used to address the documentation problem. Hopefully it will be interesting and a useful resource for other people trying to get the hang of hooks. It’s one of my favorite open-source projects I’ve worked on, so stop by next Tuesday if you’re curious!