Sorry for being pedantic, but the first example could be rewritten to extract the pattern into a higher level hook, eg useNotifications. One way to simplify components before reaching for store libraries. The reusable hook now contains all the state and effects and logic, and the component is more tidy.

    function Dashboard() {
      const { user } = useAuth();
      const {loading, error, notifications, undreadCount, markAsRead} = useNotifications(user);

      if (loading) return <Skeleton />;
      if (error) return <p>Failed to load: {error}</p>;

      return (
        <div>
          <h1>Dashboard ({unreadCount} unread)</h1>
          <StatsCards stats={stats} />
          <NotificationList items={notifications} onRead={markAsRead} />
        </div>
      );
    }