Optimizing Performance with Context API

Pressing a theme button in the app below re-renders a component that only shows a user's name.

import { createContext, useContext, useState } from 'react';
import { View, Text, Button } from 'react-native';

const UserContext = createContext(null);

function UserProvider({ children }) {
  const [user, setUser] = useState({ name: 'John', loggedIn: true });
  const [theme, setTheme] = useState('light');

  return (
    <UserContext value={{ user, setUser, theme, setTheme }}>
      {children}
    </UserContext>
  );
}

function UserName() {
  const { user } = useContext(UserContext);