I would like to use useContext to store a user. Unfortunately, my parent React component App re-renders everytime I change "pages". Specifically, when I am on page "/login" and I change to page "/" or "/register" the parent App component gets re-rendered. Therefore, my user gets reset to "null".

How can I prevent my parent component App from re-rendering, and why does it re-render anyway? Thank you very much for pointing me in the right direction?

function App() {
  const [user, setUser] = useState<User | null>(null);
  const providerValue = useMemo<ProviderValue>(
    () => ({ user: user, setUser: setUser }),
    [user, setUser]
  );

  useEffect(() => {
    console.log('App component rendered!');
  }, []);

  return (
    <Router>
      <UserContext.Provider value={providerValue}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
        </Routes>
      </UserContext.Provider>
    </Router>
  );
}

export default App;

On page "login" the user is set like this:

const login = async () => {
    const user = await userLogin();

    if (providerValue && providerValue.setUser) {
      providerValue.setUser(user);
    }
  };

After that, my idea would be to redirect to any other page. However, whatever page I redirect to, the parent App component is re-rendered and the user reset to "null".