Cómo renderizar un componente varias veces en reaccionar

Hola, soy nuevo en reaccionar y busco ayuda para descubrir cómo renderizar mi componente cada vez que se llama a una función (función principal que llama al niño). A continuación se muestra mi código jsx.

import * as React from 'react';
import Header from "./Header";
import ProfilePageForm from "./ProfilePageForm";
import UserDetails from "./UserDetails";
import Grid from '@material-ui/core/Grid'
import { UserContext } from '../App.js';
import { useEffect, useState, createContext, useContext } from 'react';
const ProfilePage = () => {
 var user = useContext(UserContext);
 const [canRender, setCanRender] = useState(false);
 var userUpdatedData = null;
 var userName = null;
 var city = null;
 var email = null;
 var userId = null;
 var imgSrc = null;
 if (user.id == null || user.userDetails == null || user.imgSrc == null) {
 user.id = localStorage.getItem('LoggedInUserId');
 user.userDetails = localStorage.getItem('LoggedInUserDetails');
 user.imgSrc = localStorage.getItem('LoggedInUserImageSrc');
 } 
 const userDetails_Data = (data) => { 
 userUpdatedData = data; 
 if (userUpdatedData!= null) {
 user.id = localStorage.getItem('LoggedInUserId');
 if (JSON.parse(userUpdatedData)[0].userDetails_successful) {
 setCanRender(true); 
 user.userDetails = JSON.parse(userUpdatedData)[0].userDetails;
 user.imgSrc = JSON.parse(userUpdatedData)[0].imageSrc; 
 console.log('User Updated Data status from parent-->', JSON.parse(userUpdatedData)[0].userDetails_successful);
 localStorage.setItem('LoggedInUserDetails', JSON.stringify(user.userDetails)); 
 localStorage.setItem('LoggedInUserImageSrc', user.imgSrc); 
 } else {
 console.log('User Updated Data status--> False');
 }
 }
 }
 
 if (userUpdatedData == null &&!canRender) {
 userName = JSON.parse(user.userDetails)[0].name;
 city = JSON.parse(user.userDetails)[0].city;
 email = JSON.parse(user.userDetails)[0].email;
 } else {
 userName = user.userDetails[0].name;
 city = user.userDetails[0].city;
 email = user.userDetails[0].email;
 }
 
 userId = user.id;
 imgSrc = user.imgSrc;
 if (canRender) {
 return (
 <React.Fragment> 
 <Header />
 <Grid container>
  <Grid item xs={6} style={{ textAlign: 'center' }}>
  <ProfilePageForm userId={userId} userDetailsData={userDetails_Data} />
  </Grid>
  <Grid item xs={6} style={{ textAlign: 'center', paddingTop: '-5vh' }}>
  <UserDetails userName={userName} city={city} email={email} imgSrc={imgSrc} />
  </Grid>
 </Grid>
 </React.Fragment>
 );
 }
 else {
 return (
 <React.Fragment>
 <Header />
 <Grid container>
  <Grid item xs={6} style={{ textAlign: 'center' }}>
  <ProfilePageForm userId={userId} userDetailsData={userDetails_Data} />
  </Grid>
  <Grid item xs={6} style={{ textAlign: 'center', paddingTop: '-5vh' }}>
  <UserDetails userName={userName} city={city} email={email} imgSrc={imgSrc} />
  </Grid>
 </Grid>
 </React.Fragment>
 );
 }
}
export default ProfilePage;

Aquí canRender se establece en verdadero cuando la respuesta child useEffect es verdadera y puedo representar el componente por primera vez. A continuación se muestra el código child useEffect jsx.

 useEffect(() => {
 
 console.log('User Details from Profile Page Form' + JSON.stringify(props.userList))
 props.userList.map((record, index) => {
  
 if (record.userDetails_successful) { 
 props.userDetailsData(JSON.stringify(props.userList));
 console.log('User Details status from child-->', record.userDetails_successful); 
 } 
 }) 
 
 }, [props.userList]) 

Solo quiero que se llame a mi componente UserDetails cada vez que haya un cambio en el enlace secundario useEffect y actualice los detalles inmediatamente en la pantalla sin recargar. Espero que entiendas el problema al que me enfrento aquí. Por favor, hágamelo saber si necesita más información.

Solución del problema

He resuelto el problema anterior mediante la modificación del estado. A continuación se muestra mi código jsx.

import * as React from 'react';
import Header from "./Header";
import ProfilePageForm from "./ProfilePageForm";
import UserDetails from "./UserDetails";
import Grid from '@material-ui/core/Grid'
import { UserContext } from '../App.js';
import { useEffect, useState, createContext, useContext } from 'react';
const ProfilePage = () => {
 var user = useContext(UserContext);
 const [, setCanRender] = useState(0);
 var userName = null;
 var city = null;
 var email = null;
 var userId = null;
 var imgSrc = null; 
 user.id = localStorage.getItem('LoggedInUserId');
 user.userDetails = localStorage.getItem('LoggedInUserDetails');
 user.imgSrc = localStorage.getItem('LoggedInUserImageSrc');
 const userDetails_Data = (userDetails_successful, userDetails, imgSrc) => {
 user.id = localStorage.getItem('LoggedInUserId');
 if (userDetails_successful) { 
 localStorage.setItem('LoggedInUserDetails', JSON.stringify(userDetails));
 localStorage.setItem('LoggedInUserImageSrc', imgSrc); 
 setCanRender(c => c + 1);
 } else {
 console.log('User Updated Data status--> False');
 }
 }
 userName = JSON.parse(user.userDetails)[0].name;
 city = JSON.parse(user.userDetails)[0].city;
 email = JSON.parse(user.userDetails)[0].email;
 userId = user.id;
 imgSrc = user.imgSrc;
 return (
 <React.Fragment>
 <Header /> 
 <Grid container>
 <Grid item xs={6} style={{ textAlign: 'center' }}>
  <ProfilePageForm userId={userId} userDetailsData={userDetails_Data} />
 </Grid>
 <Grid item xs={6} style={{ textAlign: 'center', paddingTop: '-5vh' }}>
  <UserDetails userName={userName} city={city} email={email} imgSrc={imgSrc} />
 </Grid>
 </Grid>
 </React.Fragment>
 );
}
export default ProfilePage;