Эффективнее ли проверять существование свойств функций перед их вызовом в React или предоставлять для них пустую функцию в качестве опоры по умолчанию?

Question

• 1000

VS

const Component = ({
  callGA=()=>{},
  handlerClick=()=>{},
  onClick=()=>{},
  to='/',
  gaData={},
})=>{
  const handleComposedClick = () => {
    callGA(gaData, to);
    handlerClick();
    onClick();
  }
  return <button onClick={handleComposedClick}>...</button>
}

Answer 1

Метод-1: Проверка при условии: (Быстрее)

const { foo } = props;
if (foo) {
  foo();
}

Метод-2: Пустая функция как значение по умолчанию: (Медленнее)

const { foo = () => {} } = props;
foo();

Method-1 (if-check) быстрее (более эффективно) при многократном выполнении (~ 50+); и Метод-2 быстрее при выполнении несколько (1 или 2) раз.

JS на скамейке: https://jsbench.me/4bkdj9r61i

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

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

Но я бы посоветовал использовать Method-1 (if-check) , потому что if будет проверять все ложные (null, undefined, '', 0, false et c) значения, тогда как Method-2 ( функция по умолчанию) будет защищать только тогда, когда значение не передано, что означает undefined.

Кроме того, если вы хотите проверять только значения null и undefined и ваш инструментарий поддерживает это , вы можете использовать опциональную цепочку : foo?.()

Answer 2

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