fix: RecordVersionsList fetch versions only once

[ptamarit]

❤️ Thank you for your contribution!

Description

Opening the landing page of any record currently fetches 4 times the list of versions from the API:

---

---

The problem is due to the fetchVersions and cancellableFetchVersions (wrongly named cancellableFetchCitation) functions being recreated at every render (when the state changes).

This pull request moves the fetching functions inside useEffect, so that they are created only within the scope of useEffect and don't need to be declared as a dependency. The version is now only fetched once (since the props on which recordDeserialized.links.versions and recid don't change).

Checklist

Ticks in all boxes and 🟢 on all GitHub actions status checks are required to merge:

• I'm aware of the code of conduct.
• I've created logical separate commits and followed the commit message format.
• I've added relevant test cases.
• I've added relevant documentation.
• I've marked translation strings.
• I've identified the copyright holder(s) and updated copyright headers for touched files (>15 lines contributions).
• I've NOT included third-party code (copy/pasted source code or new dependencies).
  • If you have added third-party code (copy/pasted or new dependencies), please reach out to an architect.

Frontend

• I've followed the CSS/JS and React guidelines.
• I've followed the web accessibility guidelines.
• I've followed the user interface guidelines.

Reminder

By using GitHub, you have already agreed to the GitHub’s Terms of Service including that:

1. You license your contribution under the same terms as the current repository’s license.
2. You agree that you have the right to license your contribution under the current repository’s license.

[slint]

LGTM, I assume passing the correct dependencies to useEffect is the main fix :)

[jrcastro2]

🚀 Nice fix!

[ptamarit]

LGTM, I assume passing the correct dependencies to useEffect is the main fix :)

• In theory, an empty array means no dependency and no need to re-run the effect again, so it's not 100% clear to me why it was running on every render.
• Had we not disabled the the ESLint warning, we would have had to define the fetching function as a dependency, and then it would have been clear that the useEffect would always be triggered due to the function being new at every render.
• Moving the fetch function inside the useEffect was enough to fix the problem, which means that the fact that this function was always a new version (and therefore different) was what was triggering the useEffect (even though it was not declared as a dependency).
• I decided to define the dependencies as it did not hurt and is the right thing to do.