React Hooks - использовать функцию обратного вызова

Question

Я пишу свой продукт в React Hooks, и да, я просто новичок в этом.

Сегодня у меня есть математика о производительности useCallback. Это заставляет меня задуматься о том, использовать useCallback или не использовать.

Пусть посмотрит. Как мы знаем, useCallback используется для повышения производительности.

function MainScreen() {
  const [email, setEmail] = useState("");
  const [pwd, setPwd] = useState(""):

  const onAuthenticate = useCallback(() => {
    MyApi.authenticate(email, pwd);
  }, [email, pwd]);

  return <div>
    <MyCustomButton onPress={onAuthenticate}>LOGIN</MyCustomButton>
  </div>;
}

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

Позже я нашел способ, вынуть электронную почту и pwd в зависимости и использовать useRef длясохранить значение адреса электронной почты и пароля.

function MainScreen() {
  const [email, setEmail] = useState("");
  const [pwd, setPwd] = useState(""):

  const emailRef = useRef(email);
  const pwdRef = useRef(pwd);

  const onAuthenticate = useCallback(() => {
    MyApi.authenticate(emailRef.current, pwdRef.current);
  }, []);

  useEffect(() => {
    emailRef.current = email;
    pwdRef.current = pwd;
  }, [email, pwd]);

  return <div>
    <MyCustomButton onPress={onAuthenticate}>LOGIN</MyCustomButton>
  </div>;
}

При таком подходе он останавливает рендеринг в MyCustomButton каждый раз, когда изменяется адрес электронной почты или пароль.

Действительно ли это лучше с точки зрения производительности и стоимости? Как вы думаете, ребята?

Спасибо, что поделились.

Answer 1

Поскольку вы выполняете только вызов API, я рекомендую не использовать useCallback(). Сделайте вместо этого нормальную функцию.

Возможно, вы делаете преждевременную оптимизацию. Оптимизацию производительности следует выполнять только в том случае, если вы выполняете тяжелые вычисления в своем приложении и вам необходимо запоминать свои значения.

Можно увидеть подробное сравнение обычной функции с функцией, которая использует useCallback(). с здесь.

Answer 2

Вопрос, который я вижу с кодом не с useCallback - это с useState.

1004 * Правило большого пальца в реакции (используете ли вы крюки или нет) является то, что государство оказывает непосредственное влияние на то, что отображается. Если вы изменяете состояние, это означает, что компонент должен быть перерисован.

Это обоснование - то, что заставляет ваш компонент повторно визуализироваться при использовании useState. React предполагает, что email и password - это вещи, которые изменяют то, как должен выглядеть ваш компонент, поэтому он перерисовывается всякий раз, когда вы изменяете одно из их значений.

Если вы на самом деле не используете email и pwd в MyCustomButton, тогда использование useRef вместо useState имеет больше смысла.

Однако то, как вы используете его во втором примере кода, не слишкомсмысл: вы комбинируете useState и useRef, чтобы при изменении email (что будет иметь место при использовании setEmail, вы обновите ссылку с тем же значением. Единственное преимущество, которое вы получаете издело в том, что onAuthenticate не восстанавливается каждый раз.

Было бы более выгодно полностью пропустить useState, но из кода, который вы разместили, трудно фактически предложить другое решение, так как это не яснокак / когда email и pwd фактически установлены.