Health Equity Tracker is a free-to-use data visualization platform that is enabling new insights into the impact of COVID-19 and other social and political determinants of health on historically underrepresented groups in the United States.
Currently, we have several instances in our codebase where key={index} is used when rendering lists with the .map() function. While using the index as a key works, it can lead to performance issues and bugs when the list changes. Using a unique identifier as the key is recommended to ensure that React can efficiently track which items have changed, added, or removed.
Background
Currently, we have several instances in our codebase where
key={index}is used when rendering lists with the .map() function. While using the index as a key works, it can lead to performance issues and bugs when the list changes. Using a unique identifier as the key is recommended to ensure that React can efficiently track which items have changed, added, or removed.Proposed Solution
Replace
indexwith unique keys.Screenshots / Mockups
If applicable, add images for mockup purposed
How will this move the needle on health equity?
Performance improvement for the site.