validateHooksUsage() — react Function Reference

Source Code

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateHooksUsage.ts lines 91–430

export function validateHooksUsage(
  fn: HIRFunction,
): Result<void, CompilerError> {
  const unconditionalBlocks = computeUnconditionalBlocks(fn);

  const errors = new CompilerError();
  const errorsByPlace = new Map<t.SourceLocation, CompilerErrorDetail>();

  function recordError(
    loc: SourceLocation,
    errorDetail: CompilerErrorDetail,
  ): void {
    if (typeof loc === 'symbol') {
      errors.pushErrorDetail(errorDetail);
    } else {
      errorsByPlace.set(loc, errorDetail);
    }
  }

  function recordConditionalHookError(place: Place): void {
    // Once a particular hook has a conditional call error, don't report any further issues for this hook
    setKind(place, Kind.Error);

    const reason =
      'Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)';
    const previousError =
      typeof place.loc !== 'symbol' ? errorsByPlace.get(place.loc) : undefined;

    /*
     * In some circumstances such as optional calls, we may first encounter a "hook may not be referenced as normal values" error.
     * If that same place is also used as a conditional call, upgrade the error to a conditonal hook error
     */
    if (previousError === undefined || previousError.reason !== reason) {
      recordError(
        place.loc,
        new CompilerErrorDetail({
          category: ErrorCategory.Hooks,
          description: null,
          reason,
          loc: place.loc,
          suggestions: null,
        }),
      );
    }
  }
  function recordInvalidHookUsageError(place: Place): void {
    const previousError =
      typeof place.loc !== 'symbol' ? errorsByPlace.get(place.loc) : undefined;
    if (previousError === undefined) {
      recordError(
        place.loc,
        new CompilerErrorDetail({
          category: ErrorCategory.Hooks,
          description: null,
          reason:
            'Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values',
          loc: place.loc,
          suggestions: null,
        }),
      );
    }
  }
  function recordDynamicHookUsageError(place: Place): void {
    const previousError =
      typeof place.loc !== 'symbol' ? errorsByPlace.get(place.loc) : undefined;
    if (previousError === undefined) {
      recordError(
        place.loc,
        new CompilerErrorDetail({
          category: ErrorCategory.Hooks,
          description: null,
          reason:
            'Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks',
          loc: place.loc,
          suggestions: null,
        }),
      );
    }
  }

  const valueKinds = new Map<IdentifierId, Kind>();