title: What is the performance implication of saving a component to a state?
body: <p>I was wondering what is the performance impact of saving a component to a state and if it is against good practice to do so?</p>
  
  <p>Say for example I have an HOC where I am passing a callback to, and that returns a component that has all the functionality I needed, and would invoke my callback afterwards. Please see example below:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { PureComponent } from "react";
  import {
    someHOCthatReturnsAComponentClass,
    OtherComponent
  } from "../some-folder";
  
  export class A extends PureComponent {
    state = {
      ComponentInsideState: null,
      active: false
    };
  
    callback() {
      this.setState({ active: true });
    }
  
    componentDidMount() {
      this.setState({
        ComponentInsideState: someHOCthatReturnsAComponentClass(this.callback)
      });
    }
  
    render() {
      const { ComponentInsideState, active } = this.state;
  
      return (
        ComponentInsideState &amp;&amp; (
          &lt;ComponentInsideState&gt;
            &lt;OtherComponent active={active} /&gt;
          &lt;/ComponentInsideState&gt;
        )
      );
    }
  }
  
  
  
  </code></pre>