Skip to content

CE-2952: useUniqueKeys hook for react key prop + sonarqube

Max Frederiksen requested to merge CE-2952 into main

Adds a new hook that we should ideally use in order to have unique keys for the React key prop. This hook was created to keep consistency across our applications.

The inspiration for this function is based on different articles I read, but mostly this one: https://sipodsoftware.com/definitive-guide-to-react-key-prop/

Here's another read on nanoid vs uuid: https://medium.com/@razvanst/unique-identifiers-uuid-vs-nanoid-8d8626589aed

Basically it's good to have a standard approach for handling keys. Since we don't always have ID's connected to our data (which is understandable since we mostly have listings and not any sorting/re-ordering of data), this would be a good approach to at least not use indexes which Sonarqube is complaining about.

Follow-ups:

  • Implement this function wherever we use the React key prop
  • Add typing for modules coming from common in “typings.d.ts” to fix syntax highlighting & more
Edited by Max Frederiksen

Merge request reports