9 replies

✅ – Ygg – 22-32 Mar 8

Hello, I'm using a FreeCompanyContextFreeCompanyContext to use some variables across my website
One of then is using a functionfunction 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 fetchProgressfetchProgress is a useStateuseState 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: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!

✅ – Ygg – 22-32 Mar 8

  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>

✅ – Ygg – 22-32 Mar 8

✅ – Ygg – 22-32 Mar 8

Continue the conversation

Reactiflux

Continue the conversation

Reactiflux