React pr#21
Conversation
jorisstander
commented
Apr 24, 2026
jorisstander
commented
- Fetches user data asynchronously from an API using a provided user ID and auth token from context.
- Displays user information (email, location) and user statistics (posts, followers, following) via separate subcomponents (UserInfo and UserStats).
- Shows loading and error states during data fetching.
- Uses React Router v6 to provide navigation links inside the dashboard.
- Provides a simple AuthContext to supply userId and token for authentication purposes.
| fetchUserData(userId, token) | ||
| .then(data => { | ||
| setUserData(data); | ||
| setLoading(false); |
There was a problem hiding this comment.
Idealiter wil je loading states niet in een .then hebben. Je wil in een .then alleen logica hebben zitten die moeten afhangen van Promise resolve state. Ik zou setLoading(false) gebruiken in een .finally() waar je alleen dingen wil doen die je sowieso al wilde doen onafhankelijk van wat de Promise teruggeeft.
| }) | ||
| .catch(err => { | ||
| setError('Failed to fetch user data'); | ||
| setLoading(false); |
There was a problem hiding this comment.
Hetzelfde verhaal hier als de vorige comment. Dit zou ik uit de catch gooien. Het is sowieso dubbelop dat je setLoading in zowel de .then als in de .catch gebruikt. Logischer is een .finally() hier waar je de loading state terug naar false zet.
| if (loading) return <div>Loading user data...</div>; | ||
| if (error) return <div>Error: {error}</div>; | ||
|
|
||
| return ( |
There was a problem hiding this comment.
Wat ik hier mis: stel dat loading false is en error niks bijzonders teruggeeft, maar userData alsnog null of leeg is. Dan loop je het risico dat die user profile niet correct rendert. Ik zou hier nog een derde guard toevoegen: if(!userData) { }. Puur om zeker te zijn.
3 participants
