Двойное отрицание

Двойное отрицание ухудшает читаемость: !isNotVisible нужно мысленно "переводить" каждый раз. Поэтому флаги лучше называть утвердительно: isVisible, isLoading, hasErrors. Это уменьшает количество логических ошибок в условиях и делает код понятнее на ревью.

const App = () => {
  const [isNotVisible, setIsNotVisible] = useState(false);
  const [isNotLoading, setIsNotLoading] = useState(true);
  const [hasNoErrors, setHasNoErrors] = useState(true);

  return (
    <div>
      {!isNotVisible && <div>Контент компонента</div>}
      {!isNotLoading && <LoadingSpinner />}
      {!hasNoErrors && <ErrorMessage />}
    </div>
  );
};

Теперь то же самое с позитивными именами:

const App = () => {
  const [isVisible, setIsVisible] = useState(true);
  const [isLoading, setIsLoading] = useState(false);
  const [hasErrors, setHasErrors] = useState(false);

  return (
    <div>
      {isVisible && <div>Контент компонента</div>}
      {isLoading && <LoadingSpinner />}
      {hasErrors && <ErrorMessage />}
    </div>
  );
};

Короткое правило:

• называйте булевы флаги утвердительно;
• старайтесь писать условия без ! перед отрицательным именем; Так вы изолируете сложность в одном месте и сохраняете читаемость в остальном коде приложения.