Using a separate object to handle state in React

index.js

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const actions = {
  init() {
    return { value: 0 };
  },
  increment(state) {
    return { value: state.value + 1 };
  },
  decrement(state) {
    return { value: state.value - 1 };
  }
};

class App extends React.Component {
  state = actions.init();

  handleIncrement = () => {
    this.setState(actions.increment);
  };

  handleDecrement = () => {
    this.setState(actions.decrement);
  };

  render() {
    return (
      <div>
        <h2>{this.state.value}</h2>
        <button onClick={this.handleIncrement}>+</button>
        <button onClick={this.handleDecrement}>-</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

From here

Note that all state information is maintained in actions.