Как правильно использовать useCallback в React?

Question

[dmitry-toster]

я пытаюсь оптимизировать инлайновые функции, т.е такую запись

export default function({data, doSomething}) {
	return (
		<>
			{data.map(el => {
				<div onClick={() => doSomething(el.id)}>	
			})}
		</>
	)	
}

переделываю в такую:

export default function({data, doSomething}) {
	const handleClick = useCallback(id => doSomething(id), []);

	return (
		<>
			{data.map(el => {
				<div onClick={() => handleClick(el.id)}>	
			})}
		</>
	)	
}

и получаю ошибку:

Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

в массив зависимостей также пробовал передать data, результат тот же

Comments

[Салават Салахутдинов]

Навскидку уже вижу одну ошибку, в функции map вы не возвращаете значение:
Т.е, вместо

data.map(el => {
  <div onClick={() => handleClick(el.id)}>	
})

должно быть

data.map(el => {
  return <div onClick={() => handleClick(el.id)}>;
})

ну или

data.map(el => <div onClick={() => handleClick(el.id)}>)

Answer 1

[8XL]

function Child ({data, sayHi}) {

  const handleClick = useCallback(el => {
    sayHi(el)
  }, [])

  return (
    <div className="App">
      {data.map(el=>
        <div
          onClick={()=>handleClick(el)}
        >
          {el}
        </div>
      )}
    </div>
  )
}

export default function App() {
  const data = [1,2,3,4]
  
  const sayHi = (el) => {
    console.log('Hi '+ el)
  } 

  return (
    <Child data={data} sayHi={sayHi} />
  )
}

Вы обманываете, тут нет ошибки в хуке.

По-факту же ошибку вызывает doSomething( ), в которой, скорее всего, вызывается setState( ), который вызывает рендер и так далее до бесконечности, что не позволяет отрендерить.

Comments

[dmitry-toster]

если не использовать useCallback то ошибок doSomething никаких не вызывает и все работает как надо.
но все равно спасибо, поизучаю внимательней, что в том методе может быть подозрительного...

[8XL]

useCallback мемоизирует функцию. То есть с каждым новым рендером вы вызываете один и тот же setState.

А зачем вам в данной структуре useCallback вообще нужен? Выходит, что он не к месту. Тогдa уж он больше подходит для doSomething, либо стоит попробовать в зависимости добавить само состояние, при изменении которого и будет запускать вот это вот всё.

Answer 2

[Daniil]

Конкретно в твоем примере - useCallback не нужен. Перечитай это в документации.
Ты на каждый рендер вызываешь функцию `useCallback`и передаешь в неё свой хендлер. Когда ты так делаешь, жс вынужден создать функцию прежде чем передать её в useCallback
Мемоизация работает тут так, что если у тебя депсы не изменились, useCallback игнорит новый аргумент и возвращает тебе старый хендлер