My biggest complaint with a lot of code tutorials and blog explanations online is that they aren't practical, and while I often understand the concepts explained in those posts, their impact, significance, and real-world use are often harder to extrapolate. When do I use this thing? When do use this thing instead of that thing? What are the pitfalls of using this thing at scale? When should I think about optimizing this thing? Etc. etc. So I'm starting this new series (in tandem with other things) called "Practically Speaking," in which the goal is to put context to the concepts explained herein. Without a clear roadmap in mind for what may follow, it feels like this is probably more suited to beginners and for that reason, I'll be doing my best to write from that frame of mind. Because that's the other problem with blog tutorials: they're often written by experts or very experienced programmers who have been using said thing in a professional context for months or years, and they forget what it's like not to know about that thing, and therefore they struggle to explain it in a way that resonates with beginners. React articles are, for example, rife with buzz words like "render props," "memoized selectors," "action creators," and "virtual dom," all of which leave a newbie feeling like they're never going to get it. So my goal in these posts is that you get it. Please, as always, leave me feedback if you don't, so I can help clarify things.

In this post, I had originally intended to write about React Hooks. However, in keeping with the "don't drop a bunch of buzzwords" mantra, I realized this was a difficult topic to dive into with first explaining what a "functional component" is, and that most certainly is a buzz word. But they're really not that difficult to grasp. React components come in two flavors: class components and functional components. For a long time, you mostly had to use class components except for what were referred to as (buzz word warning) stateless components. You might think of stateless components as static components. They could accept props, but they had no way of interacting with React's state API. So they were generally simple functions that returned mostly static jsx. Something like:

import React from 'react';

const MemberAvatar = ({ name, avatar }) => {  
  return (
    <div>
      <img src={avatar} />
      <span>{name.first}</span>
      <span>{name.last}</span>
    </div>
  );
};

export default MemberAvatar;  

If you wanted to preserve state in any way (which could be as simple as applying hover effects), you had to use a class:

import React from 'react';

export default class MemberAvatar extends React.Component {  
  constructor(props) {
    super(props);
    this.state = { hovering: false };
  }

  hover() {
    this.setState({ hovering: true });
  }

  unhover() {
    this.setState({ hovering: false });
  }

  render() {
    let { hovering } = this.state;

    return (
      <div onMouseEnter={() => this.hover()} onMouseLeave={() => this.unhover()} style={hovering ? { backgroundColor: 'blue' } : {}}>
        <img src={avatar} />
        <span>{name.first}</span>
        <span>{name.last}</span>
      </div>
    );
  }
}

React class components also had access to lifecycle hooks, which functional components did not. These were functions on the base Component class you could override in the inheriting class to respond to things that did, would, or could happen. For example, you can implement shouldComponentUpdate if you want to decide when to rerender a component (normally, it's when its props change), and you can implement componentWillUnmount to handle cleanup when a component is being destroyed.

Functional components had no way of doing any of these things, so they were sort of second class citizens for a long time. But functional javascript has such a strong inertia these days that the React team created hooks to address these shortcomings. Hooks are functions that you can call from a functional component that (in different ways) handle the things that the lifecycle methods handled in class components. The most basic example is useState (all hooks begin with the word use, which helps keep their intent clear), which is roughly analogous to this.setState() in the example above.

In the next post in this series, I'll look more at the core React hooks, and try to give practical examples of their uses. Hooks take a different way of thinking, but once I understood them, I found that I enjoyed writing React (and even Redux) much more because they're a bit more intuitive and they enable you to write functional components, which I strongly prefer to class components.