✅ – Ygg – 22-32 Mar 8

Hello, I'm using a FreeCompanyContext to use some variables across my website One of then is using a function to fetch a list of objects from an api. The list can be lenghty so I decided to track the progress to show it in the UI :
let [fetchProgress, setFetchProgress] = useState(0);

async function fetchMembersData() {
setMembersFetchLoad(true);
const result = (await getCharacterList(FreeCompanyMembers, (progress) => {
setFetchProgress(Math.trunc(progress));
})) as CharacterData[];
setMembersFullData(result);
setMembersFetchLoad(false);
}
let [fetchProgress, setFetchProgress] = useState(0);

async function fetchMembersData() {
setMembersFetchLoad(true);
const result = (await getCharacterList(FreeCompanyMembers, (progress) => {
setFetchProgress(Math.trunc(progress));
})) as CharacterData[];
setMembersFullData(result);
setMembersFetchLoad(false);
}
And then I'm using it in the component:
const { ..., fetchProgress } = useFreeCompanyContext();
...
<button className="btn loading">
Getting members info ({fetchProgress}%)
</button>
const { ..., fetchProgress } = useFreeCompanyContext();
...
<button className="btn loading">
Getting members info ({fetchProgress}%)
</button>
Everything works just fine, except that fetchProgress is a useState so it re-renders everytime it changes and that make the whole page a mess to use (since it's re-rendering the whole page) The gif is just to show the :hover effect going crazy because of that, this re-renders also make it harder to click the tabs. So, my question: what's the best approach to this? I'm a newbie so any obvious suggestions could end up being great!
Solution:
Message Not Public
Sign In & Join Server To View
UU
Unknown User407d ago
Y
Ygg407d ago
I see! So if I wrap the loading around it, it'll only re-render this component? Or I should wrap the whole page?
UU
Unknown User407d ago
Y
Ygg407d ago
I'll learn more about it, I answered based on a quickly search. That's something I wasn't aware it even exist osfrog for your time! Really helped!
UU
Unknown User406d ago