useCallback с аргументами, переданными в

Question

У меня есть <Tabs /> компонент в Material-UI, который имеет обработчик для изменения режима. Включенное изменение имеет эту подпись (по ссылке):

Подпись :
function(event: object, value: any) => void
событие: Источник события обратного вызова
значение : Мы по умолчанию используем индекс дочернего элемента (число)

Моя реализация выглядит примерно так:

<Tabs
  value={mode}
  onChange={handleChange}
/>
  <Tab id="choice1" value="one" label="Choice 1" />
  <Tab id="choice2" value="two" label="Choice 2" />
</Tabs>

Моя handleChange функция - это просто стрелка вокруг useState-like hook

const handleChangeMode = (event, newMode) => {
  setMode(newMode);
}

Чтобы избежать повторного создания этой стрелки fn каждый раз, я пытался сделать это:

const handleChangeMode = useCallback((event, newMode) => {
  setMode(newMode);
}, [setMode]);

, но я заметил, что вещь что больше всего меняет, новый режим не является частью deps, и, следовательно, возможно, не будет вести себя должным образом? Затем я изобразил это чудовище из своих самых мрачных снов:

const handleChangeMode = useCallback((event, newMode) => {
  useCallback(() => setMode(newMode), [setMode, newMode])();
}, [setMode]);

Это обратные вызовы до конца.

Ранее этот вопрос ( React hooks useCallback с параметрами внутри l oop) предложил не использовать useCallback в этом сценарии. Но так как это то, что можно вызывать снова и снова, похоже, это место для этого. Также пример с useMemo не позволяет понять, что я хочу зависеть от переменной, передаваемой в ловушку, что я даже не думаю, что работает в этом примере (например, я использую ловушку неправильно, а не зная, как использовать его для моего примера. Пример кода не работает, как я и подозревал)

Answer 1

Вы спрашиваете:

но я заметил, что вещь, которая больше всего меняется, новый режим не является частью deps, и, следовательно, возможно, не будет вести себя правильно?

const handleChangeMode = useCallback((event, newMode) => {
  setMode(newMode);
}, [setMode]);

Ответ: Нет, этот код будет работать правильно. Вам нужно добавлять реквизиты в зависимости, только если вы используете их непосредственно из компонента. Например:

const { mode } = props;
const handleChangeMode = useCallback((event) => {
  setMode(mode);
}, [setMode, mode]);

В вашем случае вы получаете newMode в качестве аргумента функции. Поэтому вам не нужно добавлять его в качестве зависимости.