Хук useCallback оптимизирует компонент, если мы не передаём функцию в пропсе?

Question

[lil_web]

Я проходил собеседование в один известный сервис такси. Меня попросили написать компонент поля ввода. Я сделал это:

import React, { useState } from 'react';

const Input = () => {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return <input type="text" value={value} onChange={handleChange} />;
};

export default Input;

Собеседующие кивнули, но заметили проблему в оптимизации: «При каждом перерендере компонента будет заново создаваться функция-обработчик ввода».

Я не знал, как исправить. Мне показали правильное решение:

import React, { useState, useCallback } from 'react';

const Input = () => {
  const [value, setValue] = useState('');

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

  return <input type="text" value={value} onChange={handleChange} />;
};

export default Input;

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

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

Подскажите, пожалуйста. Хук useCallback оптимизирует компонент, если мы не передаём функцию в пропсе?

P. S. Понимаю, что преждевременные оптимизации зачастую — зло.

Comments

[dmitry-toster]

обычная инлайновая функция очищается сборщиком мусора, чего не скажешь о useCallback. в вашем же примере handleChange это песчинка в пустыне. профит с этого хука вы получите когда функция действительно будет содержать в себе какие-то тяжелые вычисления

[lil_web]

dmitry-toster, спасибо! А как это проверить, чтобы доказать коллегам?

Answer 1

[Loli E1ON]

Comments

[lil_web]

Я задал вопрос, потому что не понял документацию. Хук useCallback оптимизирует компонент, если мы не передаём функцию в пропсе?

[Robur]

lil_web, если вкратце - то да, оптимизирует функция перестает создаваться в памяти заново на каждый рендер вне зависимости от того используется она в пропсах или нет.

Но если подробнее, это не важно, потому что если у вас компонент рендерится столько раз что создание новой функции вызывает какие-то серьезные проблемы, то у вас проблемы в первую очередь с рендером, и намного серьезнее, чем с этой функцией. Для собеса такой вопрос нормальный, просто чтобы выяснить в курсе ли вы как оно все работает, на практике так делать не имеет смысла почти никогда.

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

[lil_web]

Robur, понял, спасибо!

[lil_web]

Robur, > если вкратце - то да, оптимизирует функция перестает создаваться в памяти заново на каждый рендер вне зависимости от того используется она в пропсах или нет.

А как это проверить, чтобы доказать коллегам?

[Robur]

lil_web, коллегам надо дать прочитать документацию, где это прямо написано. функция memoized, и дать погуглить что это такое.

Но если прямо хочется проверить - возьмите handleChange, сохраните куда-нибудь, в следующий раз сравните старое и новое значение. Если это одна и та же ссылка - значит новая функция не была создана, то есть она создалась только один раз на первом рендере, в последующие вызовы новая уже не создается (собственно это и есть работа memoized)

[lil_web]

Robur, спасибо!

Я понял, что на практике так делать не имеет смысла почти никогда, но хочется закрепить теорию.

У нас есть функция-обработчик отправки формы. Получается, она создаётся заново при каждом новом символе в поле?

const handleSubmit = useCallback(() => {
  console.log(value);
}, [value]);

[Robur]

так делать не имеет смысла почти никогда,

Если ради оптимизации без причин. смысл когда это надо делать описан в документации.

Получается, она создаётся заново при каждом новом символе в поле?

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