Реагировать 'useCallback' для обработчика событий

Question

У меня есть обработчик событий handleChange, который вызывается для каждого раскрывающегося списка (всего их 5), так как у меня есть родительско-дочерний компонент, т.е. в следующем фрагменте раскрывающийся список вызывается из родительского элемента и атрибутов. например, label и values заполняются с помощью props. Проблема в том, что у меня есть хранилище с избыточностью, компоненты рендерится несколько раз, и событие onchange вызывается так много раз. Чтобы ограничить рендеринг, я хотел использовать useCallback, но зависимость будет зависеть от того, изменяется или нет раскрывающееся значение, которое выбирает пользователь. Проблема у меня нет доступа к событию в зависимости.

import React, {useCallback} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

export default function SimpleSelect(props) {
  const classes = useStyles();
  const [age, setAge] = React.useState('');

  const handleChange = useCallback (event => {
    setAge(event.target.value);
  }, []);

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">{props.label}</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          onChange={handleChange}
        >
          {props.values}
        </Select>
      </FormControl>
    </div>
  );
}

Если я не ставлю никаких зависимостей, как указано выше, событие никогда не вызывается после того, как пользователь изменит значение. Он вызывается только при инициализации и рендеринге (выполняется системой).

Как видно из приведенной ниже ссылки на кодовый блок, вызывается обработчик, даже если я выбираю одно и то же значение из раскрывающегося списка, чтобы избежать этого. необходимо указать значение внутри раскрывающегося списка в качестве зависимости,

Ссылка

Answer 1

Вы правильно использовали useCallback. Единственная реальная зависимость для этого обратного вызова - это setAge, у которого есть идентификатор функции, который гарантированно не изменится useState, так что это безопасно.

Функция handleChange может быть одинаковой каждый раз, когда Компонент рендерится, потому что он не должен делать что-то другое, если установлены разные значения. Все, что для этого нужно - установить значение имени.

Если handleChange не вызывается, проблема, вероятно, в компоненте <Select>.