title: Alternative to extending a functional component
body: <p>I have the following component where within the <code>useEffect</code>, I am calling some data reading related
  functions meant to happen once on load.</p>
  <p>The problem is, some of the prop data are not available at this stage (still undefined) like the <code>prodData</code> and <code>index</code>.
  <br/>They are only available when I get into the Nested components like <code>&lt;NestedComponent1 /&gt;</code>.</p>
  <p>I wish to move this logic into the nested components which will resolve this issue.</p>
  <p>But I do not want to repeat these code inside the <code>useEffect</code> for each component. Instead looking to write these 7 lines once maybe in a function
  <br /> and just call it with the 3 NestedComponents.</p>
  <p>Issue is that there is a higher order function wrapping here plus all the values like <code>prodData</code> and <code>index</code> is coming from <code>Redux store</code>.</p>
  <p>I can't just move all these logic inside <code>useEffect</code> into a normal JS function and instead need a functional component for this.</p>
  <p>And if I make a functional component to perform these operations, I can't call it in the <code>useEffect</code> for each of the NestedComponents.</p>
  <p>Cos this is not valid syntax.</p>
  <pre><code>React.useEffect(() =&gt; {
      &lt;NewlyCreatedComponentWithReadingFunctionality /&gt;
  }, []);
  </code></pre>
  <p>Thus my query is, is there a way I could write a functional component which has the data reading logic inside its useEffect.
  And then extend this functional component for each of the functional  components so that the useEffect would just fire
  when each of these NestedComponents are called?</p>
  <p>Doesn't seem to be possible to do this thus looking for alternatives.</p>
  <p>This is the existing component where some of these prop values are undefined at this stage.</p>
  <pre><code>const MyComponent = ({
    prodData,
    index,
    country,
    highOrder: {
      AHigherOrderComponent,
    },
  }) =&gt; {
  
    // this is the logic which I am looking to write once and be 
    // repeatable for all the NestedComponent{1,2,3}s below.
    React.useEffect(() =&gt; {
      const [, code] = country.split('-');
      const sampleData = prodData[index].sampleData = sampleData;
      const period = prodData[index].period = period;
      const indication = prodData[index].indication = indication;
  
      AHigherOrderComponent(someReadDataFunction(code, sampleData));
      AHigherOrderComponent(someReadDataFunction(code, period);
      AHigherOrderComponent(someReadDataFunction(code, indication);
    }, []);
  
    return (
        {/* other logics not relevant */}
        &lt;div&gt;
          &lt;div&gt;
              &lt;NestedComponent1 /&gt;
              &lt;NestedComponent2 /&gt;
              &lt;NestedComponent3 /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    );
  };
  export default connect( // redux connect
    ({
      country,
      prodData,
      index,
    }) =&gt; ({
      country,
      prodData,
      index,
    })
  )(withHighOrder(MyComponent));
  </code></pre>