Custom hook re-render multiple components (All App tree)

MongoDB Atlas App Services & Realm Realm
1

Hello,

I would like to have some guidance on my hook use case.

I have created a hook that manage my user :
useUserManager.js looks like :

export function useUserManager() {
  const realm = useRealm();
  const realmUser = useUser();

  const user = useObject("User", Realm.BSON.ObjectId(realmUser.id));
  const addUser = useCallback(() => {
    realm.write(() => {
      realm.create(
        User,
        {
          _id: Realm.BSON.ObjectId(realmUser.id),
          name: realmUser?.profile?.name,
          email: realmUser?.profile?.email.toLowerCase(),
        },
      );
    });
  }, [realmUser.id, realmUser?.profile?.email]);
  const addUserCoordinate = useCallback((myCoords) => {.......}
  const removeUserCoordinate = useCallback(() => {.......}
return {user, addUser, addUserCoordinate, removeUserCoordinate}

I have a tree of component such as :

App.js > Parent.js > Child.js

In my Child.js i am creating the user with addUser() and updating the coordinate with addUserCoordinate (fake example):

{user, addUser, addUserCoordinate} = useUserManager()
if (_.isEmpty(user){
   addUser()
}
addUserCoordinate(myCoords)

Now that my user as coordinate in the database i would like to remove those coordinates when the application get closed, So i want to implement the removeCoordinate() function in the return of the useEffect at the highest level of my app (in App.js)

App.js
Hello,

I would like to have some guidance on my hook use case.

I have created a hook that manage my user :
useUserManager.js looks like :

export function useUserManager() {
  const realm = useRealm();
  const realmUser = useUser();

  const user = useObject("User", Realm.BSON.ObjectId(realmUser.id));
  const addUser = useCallback(() => {
    realm.write(() => {
      realm.create(
        User,
        {
          _id: Realm.BSON.ObjectId(realmUser.id),
          name: realmUser?.profile?.name,
          email: realmUser?.profile?.email.toLowerCase(),
        },
      );
    });
  }, [realmUser.id, realmUser?.profile?.email]);
  const addUserCoordinate = useCallback((myCoords) => {.......}
  const removeUserCoordinate = useCallback(() => {.......}
return {user, addUser, addUserCoordinate, removeUserCoordinate}

I have a tree of component such as :

App.js > Parent.js > Child.js

In my Child.js i am creating the user with addUser() and updating the coordinate with addUserCoordinate (fake example):

{user, addUser, addUserCoordinate} = useUserManager()
if (_.isEmpty(user){
   addUser()
}
addUserCoordinate(myCoords)

Now that my user has coordinate in the database i would like to remove those coordinates when the application get closed, So i want to implement the removeCoordinate() function in the return of the useEffect at the highest level of my app (in App.js)

App.js

const { removeUserCoordinate } = useUserManager();

  useEffect(() => {
    return () => {
        removeUserCoordinate();
    };
  }, []);

But because i am calling the useUserManager hook in App.js, everytime i update the user object in my Child.js component all my app is re-rendering while i would like to have only the Child.js to re-render.

How can I use my useUserManager hook to only re-render Child.js but being able to use it also in App.js to remove information at shutdown?

Should I use something else than a hook?
Should I create Functions instead of hooks?

Thank you for you help