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 функция - это просто стрелка fn вокруг хука, подобного useState

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 useCallback с параметрами внутри цикла) предлагалось не использовать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как аргумент функции. Таким образом, вам не нужно добавлять его как зависимость.