blocksoapp / blocksoapp/monorepo

Get posts request needs to be cancelled if the profile being viewed changes

Open Beginner friendly
#146 0 comments 0 reactions 0 assignees View on GitHub
bug good first issue
Dominant language
JavaScript
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

**Current Behavior**
1. Load a profile
2. Quickly navigate to another profile (via search for example) before the first profile's posts are retrieved.
3. The new profile that you navigated to will show the posts of the previous profile, before eventually showing the correct posts.

**Expected Behavior**
3. The new profile that you navigated to will only show the posts of the profile in question. It should not show the posts of a previous profile.

This is due to an unaborted API call when the `ViewProfile/Profile.js` component changed. The API call is still getting the posts of the old profile, when we are now looking at a new profile.
The fix is to implement an AbortController on the request that gets a user's posts.
Then when the profile in question changes, the abort controller should abort any existing requests.

More info:
- https://dev.to/jeremiahjacinth13/memory-leaks-how-to-avoid-them-in-a-react-app-1g5e
- https://medium.com/geekculture/avoid-memory-leaks-in-your-react-app-by-canceling-api-calls-9cf692c06573

In our case, instead of aborting the request on component unmount, we would abort it on the `useEffect` that watches `props.address`

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in ViewProfile/Profile.js and trace the useEffect that watches props.address and requests the user's posts. Add cancellation for the existing posts request when the viewed profile changes, then reproduce the rapid profile-navigation steps. Done means the new profile does not temporarily display posts from the previous profile.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.