how to cause a component to rerender from another component

Question

The Component im trying to reRender The Profile Component From:

    import React from 'react'
    import {useContext} from "react"
    import { UserNameContext } from '../App'
    import PersonIcon from '@mui/icons-material/Person';
    import { useNavigate } from 'react-router-dom';
    import "./Profile.css"
    import axios from 'axios';
    import { useState } from 'react'
    import { useReducer } from "react"
    const EditProfilePage = () => {
 
  const [rerender, setRerender] = useState(false);
   

  const Navigate = useNavigate()
  const [newusername,setnewusername] = useState("")
    const userName = useContext(UserNameContext)
   

  function updateUser(e){
    e.preventDefault()
    console.log(userName)
    console.log(newusername)
    axios.post("http://localhost:5000/profile/editProfile",({username:userName,nusername:newusername}),{headers:{
      "Content-Type" : "application/json"
    }}).then((res)=>{ localStorage.setItem("token",res.data.token) 
    console.log(res.data)
   console.log(localStorage.getItem("token"))
    Navigate(`/${newusername}`)
   
    
  
  } )
  }
function reRenderf(){
  setRerender(!rerender)
}
  return (

    <div className='Wrapper'>

    <img/>

    <PersonIcon/>
 
  
    
    <form onSubmit={updateUser}>
    <img  />
    <input placeholder="name" value={newusername} onChange={e => setnewusername(e.target.value)} / >

    <input placeholder='Bio' />
    <button onClick={reRenderf}  >Render</button>
    <button type='Submit' >Update</button>
    </form>

    </div>

  )
}

export default EditProfilePage

Profile Component:

import axios from "axios"
import { useEffect } from "react"
import { useState } from "react"
import "./Profile.css"
import styled from "styled-components"
import { ProfilePicture } from '../App'
import React from 'react'
import {useContext} from "react"
import { UserNameContext } from '../App'
import PersonIcon from '@mui/icons-material/Person';
import { useNavigate } from 'react-router-dom';
import "./Profile.css"


import { useReducer } from "react"
import EditProfilePage from './EditProfilePage'
const Wrapper = styled.div`
display: flex;
background-color: black;
height: 100vh;

justify-content: center;

`
const Container = styled.div`
background-color: gray;
width: 50%;

`
const Status = styled.div`
display: flex;
font-size: 15px;
`

const H4 = styled.h4`
padding: 10px;

`
const EditProfile = styled.button`

`
const EditProfilePopup = styled.div`
background-color: rgba(0,0,0,0.7);
position: fixed;
height: 50%;


left:40%;
`

    export function Profile (){
      //mAKE SURE ITS NOT UNDEFINED
     const userdata = React.useContext(ProfilePicture)
        const pathname = window.location.pathname
        const[data,setData] = useState([])
        const [user,isUser] = useState(false)
        const[owner,isOwner] = useState(false)
        const[editProfile,seteditProfile] = useState(false)
    
      let username = pathname.split("/")[1]
    
      useEffect(()=>{
        axios.post('http://localhost:5000/profile/getProfile', {
          "username":username
        })
        .then((res)=> {
        
            setData(res.data[0])
            isUser(true)
         
           
        }).catch((err)=> {
           
            isUser(false)
        })
        
      
    
      }, []);
      function checkifOwner(){
        if (userdata.username == username){
         
          isOwner(true)
        }
        else{
       
        
        }
    
      }
      
      setTimeout(checkifOwner,10)
      function editheProfile(){
        seteditProfile(!editProfile)
      }
      return (
    <Wrapper>
    <Container>
    
    
        <div className='Profile'>
        {owner ? <EditProfile onClick={editheProfile} >Edit Profile</EditProfile>:console.log("not Owner") }
        <h2>{data.username}</h2>
        {editProfile ? <EditProfilePopup><EditProfilePage/></EditProfilePopup> : null}
    <img className='ProfileImg' src='https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png' />
    {user?null:<h2>No User Exists</h2>}
      
        <img  />
        <Status>
    <H4>Followers</H4>
    <H4>Following</H4>
    </Status>
    <H4>Posts</H4>
    
        </div>
       
      
        </Container>
        </Wrapper>
    
      )
    }

I am trying to reRender The Profile Component From My EditProfilePage Component How can i achieve this? making it all one component could potentially solve this just wondering if there are any other ways to fix the issue?

Answer 1

Making all in one component is not a good approach the best way is to use useMemo it will render component when dependency changes and also send new data to the component for example:

// edit profile.jsx
import Profile from '../componet/Profile'
import {useMemo} from 'react'

export default function EditProfile(){
const [render , setRender] = useState(false);
// every time render changes useMemo will check if render true It will render the component.
const profile = useMemo(() => {
 if(render){
   return <Profile />
 }
} ,[render])

  return(
    <div>
      <button onClick={() => setRender(!render)}>Click To Toggle Render</button>
     {profile}
   </div>
   )
}