I have a slider component nested in a form in my app. The slider adjusts parameters that live in a
Normally, the slider would be controlled, its values set by the props passed down from the
. When the slider is moved,
would dispatch an action to update the
, and the slider values would change.
However, in this case, this solution poses problems:
- The slider has 100+ steps, so dragging it 50% across means dozens
and dozens of
- Since the slider itself isn't connected to the
forces a re-render on the parent, as
are changing. This eviscerates performance.
So, I've implemented a partial solution:
- the slider values live in the slider's state, so dragging it just re-renders the slider with
event--which fires when the user releases the mouse after dragging the slider,
es the new values to the
However, the parent has a "reset" button that should set the slider's values to their initial state.
So, how can I communicate to the slider component from the parent that it's time to reset values?