結論：CSSを使う
100段階にしたスライダーを10個20個同画面で表示するとき
それだけならまだ特に問題はありません
つまみの上に、文字や画像を置いたとき。スライダーの値に応じて切り替えが必要だったとき。
useStateを利用するのもいいんですが、つまみがえらいちらつきます
この際CSSを使うということを考えてください
つまり、明示的に画像を置いて、それの切り替えをネストなしのif文や===で判定してしまうなど簡単な計算でオンオフを切り替えるのです
他対処法として
- 遅延
- 計算量削減
- 親から子へ渡す情報を整理する
ということがあります
が、根本的な解決にはなりません
ちらつきの原因は根本的な設計ミスかもしれません。
頑張ってuseEffectやuseStateを追加しても解決はなかなか厳しいです
自分は他の部分の設計を読み込む必要があるのかもしれないと調べてかなり時間をロスしてしまったので
この記事がピンポイントに誰かの助けになることを祈っております