AWS Amplify: useAuthenticator hook do not cause a re-render on user.attributes field change

Question

In my React project i use Amplify "@aws-amplify/ui-react": "^2.17.1", "aws-amplify": "^4.3.22", and i faced with unexpected behaviour.

I doing import { useAuthenticator } from '@aws-amplify/ui-react'; into my component to get user data (issue exists with both approaches):

const { user } = useAuthenticator();
const { user } = useAuthenticator((context) => [context.user]);

I also do import { Auth } from 'aws-amplify'; and make a function to update user attribute - given_name.

const setAttr = async () => {
    const user = await Auth.currentAuthenticatedUser();
    await Auth.updateUserAttributes(user, { given_name: 'Eddie' });
    const res = await Auth.currentAuthenticatedUser();
    console.log(JSON.stringify(res.attributes));
  };

After running this function i see correct value in console.log(JSON.stringify(res.attributes)); inside function. But const { user } = useAuthenticator(); still see values from initial render (old name). I checked it by declaring setInterval(() => console.log(user.attributes), 1000); and comparing values.
So, value in context do not change => component do not re-render => i see old given_name until i reload page.

My solution for now: i'm duplicating given_name in store, after successful request change it to a new value that cause a rerender.

Unacceptable solution: location.reload().

Solution i'm looking for: after changing given_name field, useAuthenticator track this change and cause a rerender, so i do not need duplicating this logic in store.

UPD: Noticed that it works as expected in deployed version. But it do not work on localhost, so makes development process inconvenient.

Answer 1

After I found the expected behavior on the deployed version, I tried to figure out what was wrong on localhost. Removing <StrictMode> from index.tsx in the root of a project solved the problem on localhost as well. I'm going to create an issue for them on github about it.