Реагировать на вызов ловушки внутри if (условие)?

Question

Неправильно ли использовать вызов ловушки React внутри условия?

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

import {useRouteMatch} from 'react-router-dom';

if (condition) {
  useRouteMatch("/blog/:slug");   //  <---- THIS IS WRONG AND IT BREAKS HOOK's RULES
}

Но это не вызывает никаких предупреждений, и, похоже, все работает нормально: не вызывает никаких предупреждений, и он работает нормально. Я знаю, что в большинстве случаев не имеет смысла вызывать ловушку внутри condition, но в данном случае это так, потому что это в основном вспомогательная функция, которая, вероятно, знает о некоторых Context.

ВОПРОС

Нарушает ли какое-либо правило крючка? Это нормально? Считается ли пребывание внутри if (condition) на верхнем уровне?

Answer 1

Этот фрагмент кода не нарушает правила ловушки, так как ловушка всегда выполняется в одном и том же порядке. Ловушка не записывается внутри условия if, вместо этого на основе возвращаемого значения useRouteMatch мы выполняем код внутри if condition`

import {useRouteMatch} from 'react-router-dom';

if (useRouteMatch("/blog/:slug")) {
  console.log("something");
}

Этот код эквивалентен:

import {useRouteMatch} from 'react-router-dom';

const isMatch = useRouteMatch("/blog/:slug");

if (isMatch) {
  console.log("something");
}

Answer 2

Второй фрагмент кода следует правилам хуков. Он всегда будет вызывать ловушку одинаковое количество раз. Лично я бы вытащил его перед оператором if, чтобы было понятнее, но это не является строго необходимым.

const match = useRouteMatch("/blog/:slug");
if (match) {
  console.log("something");
}

Answer 3

Что может быть лучше и понятнее, так это присвоить ловушку переменной.

const routeMatch = useRouteMatch("/blog/:slug");

if (routeMatch) {
   // do something
}