I have the following component where within the useEffect, I am calling some data reading related functions meant to happen once on load.

The problem is, some of the prop data are not available at this stage (still undefined) like the prodData and index.
They are only available when I get into the Nested components like <NestedComponent1 />.

I wish to move this logic into the nested components which will resolve this issue.

But I do not want to repeat these code inside the useEffect for each component. Instead looking to write these 7 lines once maybe in a function
and just call it with the 3 NestedComponents.

Issue is that there is a higher order function wrapping here plus all the values like prodData and index is coming from Redux store.

I can't just move all these logic inside useEffect into a normal JS function and instead need a functional component for this.

And if I make a functional component to perform these operations, I can't call it in the useEffect for each of the NestedComponents.

Cos this is not valid syntax.

React.useEffect(() => {
    <NewlyCreatedComponentWithReadingFunctionality />
}, []);

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?

Doesn't seem to be possible to do this thus looking for alternatives.

This is the existing component where some of these prop values are undefined at this stage.

const MyComponent = ({
  prodData,
  index,
  country,
  highOrder: {
    AHigherOrderComponent,
  },
}) => {

  // 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(() => {
    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 */}
      <div>
        <div>
            <NestedComponent1 />
            <NestedComponent2 />
            <NestedComponent3 />
        </div>
      </div>
  );
};
export default connect( // redux connect
  ({
    country,
    prodData,
    index,
  }) => ({
    country,
    prodData,
    index,
  })
)(withHighOrder(MyComponent));