Cleff - simple useEffect for class React components

Cleff makes it possible to write declarative effects in class React components:

import { classEffect, withEffects } from 'cleff';

class KeyCounterImpl extends React.Component {
  state = { count: 0 };

  render() {
    classEffect(() => {
      const listener = (ev) => {
        if (ev.key === this.props.letter) {
          this.setState((state) => ({ count: state.count + 1 }));
        }
      };

      window.addEventListener("keydown", listener);

      return () => {
        window.removeEventListener("keydown", listener);
      };
    }, [this.props.letter]);

    return (
      <h1>
        Key {this.props.letter} pressed {this.state.count} times
      </h1>
    );
  }
}

const KeyCounter = withEffects(KeyCounterImpl);

<KeyCounter letter="a" />

Unlike React's useEffect, in Cleff effect dependencies can be a function returning an array, which is evaluated during component lifecycle methods. Effects can be defined in render() method or component constructor, and constructor effects (intuitively) can only use the function dependencies:

class KeyCounterImpl extends React.Component {
  constructor(props) {
    super(props);

    this.state = { count: 0 };

    classEffect(() => {
      const listener = (ev) => {
        if (ev.key === this.props.letter) {
          this.setState((state) => ({ count: state.count + 1 }));
        }
      };

      window.addEventListener("keydown", listener);

      return () => {
        window.removeEventListener("keydown", listener);
      };
    }, () => [this.props.letter]);
  }

  render() {
    return (
      <h1>
        Key {this.props.letter} pressed {this.state.count} times
      </h1>
    );
  }
}

License

MIT

Author

Eugene Daragan