Caching HOC?

AComponent.js

import React, { Component } from 'react'
import cacheComponent from './cacheComponent'

class AComponent extends Component {
  onClick = () => {
    this.props.set({ clicked: true });
  }
  
  render() {
    return <div>Have I been clicked? {this.props.cache.clicked ? "yes :)" : "no :("} <button onClick={this.onClick}>click me</button></div>;
  }
}
    
export default cacheComponent(AComponent);

appState.js

export default {};

cacheComponent.js

import appState from './appState'
import React, { Component } from 'react'

export default function cacheComponent(WrappedComponent) {
  return class CacheComponent extends Component {
    constructor(props) {
      super(props);
      this.state = appState;
    }
    
    set = (newState) => {
      this.setState(newState);
    }
   
    render() {
      return <WrappedComponent cache={this.state} set={this.set} {...this.props} />;
    }
  }
}