React Context calling function indefinitely

June 2, 2022

I have this profile which I load from my context, but it is calling the function over and over. How do I make it be called only once or only when needed.
For example I have 2 Modals, where one be called if no profile exists and one where a profile exists. But when the second modal is called, I see profile called over and over, but I want it to be only called onLoad and when changes to the profile happen (update, delete Profile).

interface ProfileContext {
  openProfile: boolean
  setOpenProfile: React.Dispatch<React.SetStateAction<boolean>>
  profile: Profil | undefined
  setProfile: React.Dispatch<React.SetStateAction<Profil | undefined>>
}
const ProfileContext = React.createContext<ProfileContext>({
  openProfile: false,
  setOpenProfile: () => {
    return true
  },
  profile: undefined,
  setProfile: () => {
    return { profile: undefined }
  },
})

export const useProfileContext = (): ProfileContext => React.useContext(ProfileContext)

interface ProfileContextProviderProps {
  children: React.ReactNode
}
export const ProfileContextProvider = ({ children }: ProfileContextProviderProps): React.ReactElement => {
  const [openProfile, setOpenProfile] = React.useState<boolean>(false)
  const [profile, setProfile] = React.useState<Profil | undefined>(undefined)
  const { loadProfile, createProfile, deleteProfile } = useProfile()

  const loadProfileIntoContext = () => {
    const userProfile = loadProfile()
    userProfile.then((values) => {
      setProfile(values)
      console.log(profile)
    })
  }

  loadProfileIntoContext()

  return (
    <>
      <ProfileContext.Provider value={{ openProfile, setOpenProfile, profile, setProfile }}>
        {children}
      </ProfileContext.Provider>
    </>
  )
}

>Solution :

For these cases you should use useEffect with an empty array of deps

interface ProfileContext {
  openProfile: boolean
  setOpenProfile: React.Dispatch<React.SetStateAction<boolean>>
  profile: Profil | undefined
  setProfile: React.Dispatch<React.SetStateAction<Profil | undefined>>
}
const ProfileContext = React.createContext<ProfileContext>({
  openProfile: false,
  setOpenProfile: () => {
    return true
  },
  profile: undefined,
  setProfile: () => {
    return { profile: undefined }
  },
})

export const useProfileContext = (): ProfileContext => React.useContext(ProfileContext)

interface ProfileContextProviderProps {
  children: React.ReactNode
}
export const ProfileContextProvider = ({ children }: ProfileContextProviderProps): React.ReactElement => {
  const [openProfile, setOpenProfile] = React.useState<boolean>(false)
  const [profile, setProfile] = React.useState<Profil | undefined>(undefined)
  const { loadProfile, createProfile, deleteProfile } = useProfile()

  const loadProfileIntoContext = () => {
    const userProfile = loadProfile()
    userProfile.then((values) => {
      setProfile(values)
      console.log(profile)
    })
  }
  
  useEffect(() => {
     loadProfileIntoContext()
  }, [])

  return (
    <>
      <ProfileContext.Provider value={{ openProfile, setOpenProfile, profile, setProfile }}>
        {children}
      </ProfileContext.Provider>
    </>
  )
}