React: Slider with custom hook not working properly

Question

I am trying to create a custom hook with a slider ui element. My goal is to be able to access the slider value from the parent element so as to update some other ui parts.

However, it seems that the slider values do not update correctly: when the user tries to drag the slider tooltip it only moves one step. It seems like the mouse events stop being tracked after useEffect gets called.

What can I do to fix this and have a smooth dragging behaviour?

Here is my code (sandbox):

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './demo';

ReactDOM.render(<Demo />, document.querySelector('#root')); 

demo.js

import React, { useEffect } from "react";
import useSlider from "./slider";

function CustomizedSlider() {
  const [CustomSlider, sliderValue] = useSlider("Slider", 50);

  useEffect(() => {
    console.log("Slider value: " + sliderValue);
  }, [sliderValue]);

  return <CustomSlider />;
}

export default CustomizedSlider;

slider.js

import React, { useState } from "react";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Slider from "@material-ui/core/Slider";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({...
}));

const PrettoSlider = withStyles({...
})(Slider);

export default function useSlider(label, defaultState) {
  const classes = useStyles();
  const [state, setState] = useState(defaultState);

  const CustomSlider = () => {
    return (
      <Paper className={classes.root}>
        <div className={classes.margin} />
        <Typography gutterBottom>{label}</Typography>
        <PrettoSlider
          valueLabelDisplay="auto"
          aria-label="pretto slider"
          defaultValue={50}
          value={state}
          onChange={(event, v) => {
            setState(v);
          }}
        />
      </Paper>
    );
  };

  return [CustomSlider, state];
}

Thanks a lot for your help!

Answer 1

The issue is that your CustomSlider is a new component type for each render due to it being a unique function each time. This causes it to unmount/remount with each render rather than just re-render which will cause all sorts of issues (as you've seen).

Rather than a custom hook, I think you really just want a custom component. Below is one way you could structure it with only minimal changes to your initial code.

demo.js

import React, { useEffect } from "react";
import CustomSlider from "./CustomSlider";

function CustomizedSlider() {
  const [value, setValue] = React.useState(50);

  useEffect(() => {
    console.log("Slider value: " + value);
  }, [value]);

  return <CustomSlider label="Slider" value={value} setValue={setValue} />;
}

export default CustomizedSlider;

CustomSlider.js

import React from "react";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Slider from "@material-ui/core/Slider";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({
  root: {
    width: 300 + 24 * 2,
    padding: 24
  },
  margin: {
    height: theme.spacing(1)
  }
}));

const PrettoSlider = withStyles({
  root: {
    color: "#a2df77",
    height: 8
  },
  thumb: {
    height: 24,
    width: 24,
    backgroundColor: "#fff",
    border: "2px solid currentColor",
    marginTop: -8,
    marginLeft: -12,
    "&:focus,&:hover,&$active": {
      boxShadow: "inherit"
    }
  },
  active: {},
  valueLabel: {
    left: "calc(-50% + 4px)"
  },
  track: {
    height: 8,
    borderRadius: 4
  },
  rail: {
    height: 8,
    borderRadius: 4
  }
})(Slider);

const CustomSlider = ({ label, value, setValue }) => {
  const classes = useStyles();
  return (
    <Paper className={classes.root}>
      <div className={classes.margin} />
      <Typography gutterBottom>{label}</Typography>
      <PrettoSlider
        valueLabelDisplay="auto"
        aria-label="pretto slider"
        defaultValue={50}
        value={value}
        onChange={(event, v) => {
          setValue(v);
        }}
      />
    </Paper>
  );
};
export default CustomSlider;