Fixed ReviewsList keys and links #812
Conversation
| export default function ReviewItem({ review }: ReviewItemProps) { | ||
| const router = useRouter() | ||
|
|
||
| function handleListItemClick() { |
There was a problem hiding this comment.
This function has been changed, the rest of the file is the same as it was when the component was in ReviewsList.tsx
| @@ -24,7 +22,7 @@ export default function ReviewsList({ isActive = true, kind = 'all' }: ReviewsLi | |||
| } else { | |||
| setFilteredReviews(reviews.filter((filteredReview) => filteredReview.kind === kind)) | |||
| } | |||
| }, [reviews, setFilteredReviews, kind]) | |||
There was a problem hiding this comment.
For some reason having the setState function in the dependency array was causing too many rerenders. Not sure why that would happen as it should be stable.
The React docs on hooks state the following: "React guarantees that setState function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list."
So I've removed it as it's unnecessary and was causing issues.
| @@ -36,49 +34,12 @@ export default function ReviewsList({ isActive = true, kind = 'all' }: ReviewsLi | |||
| {filteredReviews.length === 0 && <EmptyBlob text='No reviews found' />} | |||
| <List> | |||
| {filteredReviews.map((review) => ( | |||
| <ReviewItem key={review.semver} review={review} /> | |||
There was a problem hiding this comment.
review.semver isn't a unique key because:
a. Access request reviews don't have a semver
b. Releases can have two reviews with the same semver
c. Release for different models could have the same semver
No description provided.