thalesfpShow HN: Tired of logic in useEffect, I built a class-based React state manager
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>
);
}
Far cleaner, how is testability though?
Very easy - mock the useNotifications and you can easily see all the behaviour by changing three properties.