在子组件的useEffect之前触发父组件的useEffect

Question

I am currently implementing metrics/analytics in a React application and I am trying to log pages in the order they are opened (related) . I have a certain page eg ParentComponent and I have embedded there-in, child component eg ChildComponent.

const ParentComponent = () => {
   // log page using useEffect
   return (<ChildComponent />)
}

const ChildComponent = () => {
   // log page using useEffect
   // return something else 
}

Both components have useEffects eg

useEffect(() => {
   // log page e.g ParentComponent or ChildComponent.
}, []);

However, I notice every-time that the child's useEffect is called before the parent's. My understanding is that this is understandable as the child is rendered fully before the parent is. But I please need to know if there are any ways of ensuring I can call functionality in the parent's first of all before calling functionality in the child's?

Thanks.

Answer 1

The behavior your are intending with useEffect is not possible. Here is a possible workaround:

 function App() { return( <ParentPage/> ); } function ParentPage() { const logParent = React.useCallback(() => { console.log("Logging ParentPage..."); },[]); return( <React.Fragment> <div>I am ParentPage...</div> <ChildPage logParent={logParent} /> </React.Fragment> ); } function ChildPage(props) { React.useEffect(() => { if (props.logParent) { props.logParent(); } console.log("Logging ChildPage..."); },[]); return( <div>I am ChildPage...</div> ); } ReactDOM.render(<App/>, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <div id="root"/>