React Hooks are a More Accurate Implementation of the React Mental Model

/*
 * A code sample to show how React class components are
 * not the best implementation of the react mental model.
 *
 * Limitations:
 * - 1. With react classes, `this` is mutable and harder
 *      to reason about
 * - 2. With react classes, the lifecyle hooks are aligned
 *      with the component instead of the data.
 *
 * To see 1: save a user's name, and then immediately
 * change it again. You'll see the confirmation alert has
 * the wrong name (the new one, not the one which was saved).
 * Because "this" is mutated before the save finishes,
 * the wrong data is surfaced to the user.
 *
 * To see 2: Notice how the code for componentDidUpdate
 * and componentDidMount is doing the same thing? What we
 * care about is changes to "username" data but instead
 * the model here is built around changes to the component.
 */

import React from "react";

class User extends React.Component {
  state = {
    username: this.props.username
  };

  handleUsernameChange = e => {
    this.setState({ username: e.target.value });
  };

  handleNameChange = e => {
    const name = e.target.value;
    this.setState(state => ({
      ...state,
      user: {
        ...state.user,
        name
      }
    }));
  };

  save = () => {
    // Pretend save that takes two seconds
    setTimeout(
      () => alert(`User's name has been saved to "${this.state.user.name}`),
      2000
    );
  };

  async fetchUser() {
    const response = await fetch(
      `https://api.github.com/users/${this.state.username}`
    );
    if (!response.ok) {
      return {};
    }
    return await response.json();
  }

  async componentDidMount() {
    if (this.props.username) {
      if (this.state.username) {
        const user = await this.fetchUser();
        this.setState({ user });
      }
    }
  }

  async componentDidUpdate(prevProps, prevState) {
    if (this.state.username !== prevState.username) {
      if (this.state.username) {
        const user = await this.fetchUser();
        this.setState({ user });
      }
    }
  }

  componentWillUnmount() {
    // clean up any lingering promises
  }

  render() {
    return (
      <>
        Search
        <input
          value={this.state.username || ""}
          placeholder="Github Username"
          onChange={this.handleUsernameChange}
        />
        <hr />
        {this.state.user && (
          <>
            <h2>Name</h2>
            <input
              value={this.state.user.name}
              onChange={this.handleNameChange}
            />
            <button onClick={this.save}>Save</button>
          </>
        )}
      </>
    );
  }
}

export default User;

/*
 * A code sample to show how React functional components useing "hooks" are a
 * better implementation of the react mental model.
 */
import React, { useState, useEffect } from "react";

const fetchUser = async username => {
  if (!username) return await {};
  const response = await fetch(`https://api.github.com/users/${username}`);
  if (!response.ok) return {};
  return await response.json();
};

const saveUser = user => {
  // Pretend save that takes two seconds
  setTimeout(() => alert(`User's name has been saved to "${user.name}`), 2000);
};

export default ({ username: initialUsername = "" }) => {
  const [user, setUser] = useState({});
  const [username, setUsername] = useState(initialUsername);

  useEffect(() => {
    const doFetchAndSet = async () => {
      const u = await fetchUser(username);
      setUser(u);
    };
    doFetchAndSet();
  }, [username]);

  return (
    <>
      Search
      <input
        value={username || ""}
        placeholder="Github Username"
        onChange={e => setUsername(e.target.value)}
      />
      <hr />
      {user.name && (
        <>
          <h2>Name</h2>
          <input
            value={user.name}
            onChange={e => setUser({ ...user, name: e.target.value })}
          />
          <button onClick={() => saveUser(user)}>Save</button>
        </>
      )}
    </>
  );
};