miliko0022
@miliko0022
Краткие личные сведения, включая интересующую вас

Когда использовать useCallback, useMemo и useEffect?

В чем основное различие между useCallback, useMemo и useEffect. Приведите примеры использования useCallback, useMemo и useEffect.
  • Вопрос задан
  • 53 просмотра
Решения вопроса 1
@LEXA_JA
useEffect - это хук, который позволяет использовать сайд эффект. В классах его аналогом было использование componentDidMount, componentDidUpdate и componentWillUnmount. В нем можно делать подписки, отправлять запросы управлять анимацией и т. д.
const [data, setData] = useState(null);

useEffect(() => {
  const controller = new AbortController()
  fetchData(controller.signal).then(setData)

  return () => controller.abort()
}, [fetchData, setData])


useCallback и useMemo предназначены для оптимизации. useCallback получает на функцию и массив аргументов, и возвращает одну и туже функцию, до тех пор, пока аргументы не изменились. useMemo отличается тем, что он возвращает не саму функцию, а результат её выполнения. По большому счету они являются взаимозаменямыми.
Таким образом, useMemo используется для сохранения результатов тяжёлых вычислений, например обработка массива.
const data = useMemo(() => array.map(mapper).filter(predicate).reduce(reducer), [array])

А useCallback используется, когда важна постоянность ссылок на функцию. Например, когда мы передаём ссылку в компонент, который использует React.PureComponent или React.memo, или, когда функция используется в качестве аргумента в других руках
const handler = useCallback(() => {
  // что-то сделать 
}, [])

useEffect(() => {
  handler(value)
  // если не использовать useCallback, эффект будет срабатывать постоянно 
}, [handler, value])
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы