React: Not able to render react-rating-star component with correct value

The react-rating-stars-component is a simple and customizable star rating component for React projects. It allows users to easily add interactive star ratings to their applications.

Description

This component provides a straightforward way to implement star ratings, with support for half stars and custom characters, enhancing the user experience with visually appealing and functional rating systems.

Usage Examples

Here is an example demonstrating how to use the component:

Basic Implementation:

import ReactStars from "react-rating-stars-component";
import React from "react";
import { render } from "react-dom";
const ratingChanged = (newRating) => {
  console.log(newRating);
};
render(
  <ReactStars
    count={5}
    onChange={ratingChanged}
    size={24}
    isHalf={true}
    emptyIcon={<i className="far fa-star"></i>}
    halfIcon={<i className="fa fa-star-half-alt"></i>}
    fullIcon={<i className="fa fa-star"></i>}
    activeColor="#ffd700"
  />,
  document.getElementById("where-to-render")
);

Key Features

The component offers a variety of customizable props:

• count: Specifies the total number of stars.
• value: Sets the initial rating value.
• char: Allows using a custom character for the star.
• color: Sets the color of inactive stars.
• activeColor: Sets the color of selected/active stars.
• size: Controls the size of the stars.
• edit: Determines if the rating is selectable or just for display.
• isHalf: Enables or disables half-star ratings.
• emptyIcon, halfIcon, filledIcon: Allows using custom elements for star icons.
• a11y: Makes the component accessible and controllable via keyboard.
• onChange: A callback function invoked when the rating changes.

Problem:

When integrating react-rating-stars-component with Firestore, the rating may not render correctly on the initial page load, even though the data is correctly fetched. This can happen because the useEffect hook updates the rating state after the initial render, and React may not re-render the component immediately.

Solution:

To ensure the ReactStars component always receives the correct, updated rating value, you can use a loading state. This way, the component only renders after the data is fetched and avoids the race condition.

Also Read:

React Performance

Here’s an optimized example:

import ReactStars from "react-rating-stars-component";
import React, { useState, useEffect } from "react";
import { db } from './firebaseConfig'; // Import your Firestore configuration

function MusicTrackRating({ track, spotifyId, id }) {
    const [rating, setRating] = useState(0);
    const [loading, setLoading] = useState(true); // Loading state
    useEffect(() => {
        const fetchRating = async () => {
            try {
                const docSnap = await db.collection("userData").doc(spotifyId).get();
                const songInfo = docSnap.data()?.[id.id]; // Optional chaining

                if (songInfo?.rating !== undefined) {
                    setRating(songInfo.rating);
                }
            } catch (error) {
                console.error("Error fetching rating:", error);
            } finally {
                setLoading(false); // Set loading to false after fetching
            }
        };

        fetchRating();
    }, [spotifyId, id.id]);

    const ratingChanged = (newRating) => {
        console.log(newRating);
        // Update Firestore with the new rating
    };

    if (loading) {
        return 
Loading rating...
;
    }
    return (
        

            

                {track.name}
                {track.album?.artists[0].name}
                }
                    halfIcon={}
                    fullIcon={}
                    activeColor="#ffd700"
                />
            
        
    );
}
export default MusicTrackRating;

By using a loading state and ensuring that ReactStars only renders after the data is fetched, you eliminate the race condition and ensure the component always displays the correct rating.