React.jsにてスライダーをスムーズに動かしたい

Question

前提

家電をコントロールできるWebアプリのフロントエンド側をReact.jsを使用し作成しています。

実現したいこと

ライトの明るさを変更できるスライダー（LightSliderBar.js）があるのですが
スライダーを動かした時、なぜかスライダーがほとんど固まってしまい動かせないのを
スムーズに動かせるようにしたい。

発生している問題・エラーメッセージ

スライダーを動かした時、なぜかスライダーがほとんど固まってしまい動かせない。

サンプル動画

該当のソースコード

const DiscoverOffice = () => {
    
    const [light, setLight] = useState([]);
    
    const getDevices = async(data) => {
      await axios.get('xxx.com',
        {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${cookies.get('accesstoken')}`
          },
        })
        .then(result => {
          setLight(result.data.attributes.light);  
        })
        .catch(err => {
          console.log(err);
        });
    }

return (
    
            {light.map((item,i) => 
            
            <LightSliderBarDiscoverOffice item={item}/>
            
            )}
    
      );
}
export default DiscoverOffice;

const LightSliderBar = ({ item }) => {
    
    const cookies = new Cookies();
    const entity_id = item.entity_id;
    const [light, setLight] = useState([]);
    const [brightness_value, setBrightnessValue] = useState(item.brightness);
    
    
    const lightOn = async(data) => {
      console.log("Body sent to server", {
      entity_id: entity_id, 
      brightness: brightness_value
    })
      await axios.post('xxx.com',
        {
          entity_id: entity_id, 
          brightness: brightness_value
        },
        {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${cookies.get('accesstoken')}`
          },
        })
        .then(result => {
          console.log('Turn on!');
          getDevices();
        })
        .catch(err => {
          console.log('Turn on Missed!');
        });
    }
    
    const getDevices = async(data) => {
      await axios.get('xxx.com',
        {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${cookies.get('accesstoken')}`
          },
        })
        .then(result => {
          console.log(result.data)
          setLight(result.data.attributes.light);  
          setBrightnessValue(result.data.attributes.light.filter(c => c.entity_id === entity_id).map((item,i) =>  item.brightness)[0]);  
        })
        .catch(err => {
          console.log(err);
        });
    }
    


    useEffect(() => {
      getDevices();
      }, []);

return (
  <div>
      <input className="range-input" type="range" name="speed" min="0" max="100" id="slider"
      value={brightness_value} onChange={lightOn} style={{ background: gradient, }}></input>

  </div>
);
};

export default LightSliderBar;

Answer 1

関係あるか分からないですがスライダーがわずかでも動くたびに外部リクエストが発生してませんか？