Hook-like state encapsulation in React class components

createEffect.js

function shallowEquals(a, b) {
  if (a.length !== b.length) return false;
  return a.every((el, i) => el === b[i]);
}

const noop = () => {};

/**
 * 
 * @param {Function} mount Utility function to run when inputs change.
 *   All arguments passed to `runEffect` are considered to be dependencies;
 *   everything else must be passed via closure.
 */
export default function createEffect(mount) {
  let lastDeps = null;
  let unmount = noop;
  return function runEffect(...deps) {
    if (lastDeps && shallowEquals(deps, lastDeps)) return;

    // Something changed
    unmount();
    const mountResult = mount(...deps);
    unmount = typeof mountResult === 'function' ? mountResult : noop;
    lastDeps = deps;
  };
}

EffectExample.jsx

import React from 'react';
import PropTypes from 'prop-types';
import createEffect from './createEffect';

const noop = () => {};

export default class EffectExample extends React.Component {
  _setGreeting = (greeting) => this.setState({greeting});
  _fetchGreeting = createEffect((name) => {
    if (!name) return null;

    let setGreeting = this._setGreeting;
    fetch(`/api/greet?username=${name}`)
      .then((response) => response.text())
      .then((greeting) => setGreeting(greeting));

    return () => {
      // Low-effort way to prevent a race condition.
      setGreeting = noop;
    }
  });

  componentDidMount() {
    const {name} = this.props;
    this._fetchGreeting(name);
  }

  componentDidUpdate() {
    const {name} = this.props;
    this._fetchGreeting(name);
  }

  componentWillUnmount() {
    this._fetchGreeting(null);
  }

  render() {
    return (<div>Your customized greeting: {this.state.greeting}</div>);
  }
}