EDITAR

 const Comp2 = (props) => { // for some brief time props.studies will be an empty array, [] // you need to decide what to do while props.studies is empty. // you can show some loading message, show some loading status, // show an empty list, do whatever you want to indicate // progress, dont anxious out your users return ( props.studies.map((study)=>{console.log(study)} ) }

El uso de Hook Effect depende de las actualizaciones que reciban los estudios de estado. Dentro de este gancho useEffect, actualiza los estudios. ¿Puedes ver que el useEffect se dispara solo?

A actualiza B. A se ejecuta cada vez que se actualiza B. (sigue para siempre)

¿Cómo lo haría?

 const Comp1 = () => { const [studies, setStudies]= useState([]); React.useEffect(() => { const asyncCall = async () => { await axios.get('/api/expert/', ) .then((response) => { setStudies(response.data.studies); }, (error) => { console.log(error ); }) console.log("called+ "+ studies); } asyncCall(); }, []); return( <Comp2 studies={studies}/> ) }

useEffect() tiene una matriz de dependencia que hace que se ejecute si se actualiza algún valor dentro de él. Aquí, setStudies actualiza studies que se proporcionan como matriz de dependencias y hace que se ejecute de nuevo y así sucesivamente. Para evitar esto, elimine studies de la matriz de dependencia. Consulte: Cómo funciona el gancho useEffect (con ejemplos)