@lil_web

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

Я проходил собеседование в один известный сервис такси. Меня попросили написать компонент поля ввода. Я сделал это:
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. Понимаю, что преждевременные оптимизации зачастую — зло.
  • Вопрос задан
  • 56 просмотров
Решения вопроса 1
E1ON
@E1ON
web, gamedev, anime, science
Пригласить эксперта
Ваш ответ на вопрос

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

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