Rating component dynamic value

[Chandler-Zhu]

I was using <SlRating /> component with usehook-ts, and I want to save the user's rating in localStorage so next time they visit the same page they can see the rating. Now the current behavior I am getting is after user interact with the rating component, when they come back again the value is always 5 out of 5 no matter what their input was.
my code:

import React from 'react';
import { useLocalStorage } from 'usehooks-ts';
import { useReadLocalStorage } from 'usehooks-ts';
const Movie = ({ movie }) => {
  const [rating, setRating] = useLocalStorage(`${movie.id}_rating`, 0);
  const localRating = useReadLocalStorage(`${movie.id}_rating`);
  const saveRating = (value) => {
    setRating(value);
  };
  return (
<div>
    <p className="self-start">How do you like this film ?</p>
    <div className="col-start-2 self-start -mt-10">
          <SlRating
            onSlChange={saveRating}
            value={localRating}
            precision={0.5}
            style={{ '--symbol-size': '2rem' }}
          />
        </div>
 </div>
  );
};

Also the value changes when I hover on the component without even clicking it, I don't know if this is the default bahavior but it feels unnatural

[claviska]

Now the current behavior I am getting is after user interact with the rating component, when they come back again the value is always 5 out of 5 no matter what their input was.

I suspect this is in your implementation, because the component will start with whatever value you provide either via attribute or property. This example starts with a value of 4:

https://codepen.io/claviska/pen/NWyoEzG?editors=1010

Also the value changes when I hover on the component without even clicking it, I don't know if this is the default bahavior but it feels unnatural

This isn't what's supposed to happen, and I'm not able to replicate it. Internally, there's value and displayValue. The former holds the current value while the latter holds the display value as you hover over the control. The sl-change event is only emitted when the actual value changes, as shown in the example above.

Sorry, this probably isn't incredibly helpful to you but I don't see anything wrong in the component itself.

[Chandler-Zhu]

Maybe I'll try manipulate the element directly, should I use querySelector or a ref in a react component ?

[Chandler-Zhu]

This is a repro of the behavior I am getting: https://codesandbox.io/s/solitary-pine-hjgqbg?file=/pages/index.js