constructClassInstance() — react Function Reference

Architecture documentation for the constructClassInstance() function in ReactFizzClassComponent.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ constructClassInstance() — react Function Reference

Dependency Diagram

graph TD
  9d40edf8_5d66_7ab9_02a2_af23fe8e212a["constructClassInstance()"]
  8f850c79_0562_f37f_80ff_563c50cd0996["ReactFizzClassComponent.js"]
  9d40edf8_5d66_7ab9_02a2_af23fe8e212a -->|defined in| 8f850c79_0562_f37f_80ff_563c50cd0996
  style 9d40edf8_5d66_7ab9_02a2_af23fe8e212a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-server/src/ReactFizzClassComponent.js lines 170–311

export function constructClassInstance(
  ctor: any,
  props: any,
  maskedLegacyContext: any,
): any {
  let context = emptyContextObject;
  const contextType = ctor.contextType;

  if (__DEV__) {
    if ('contextType' in ctor) {
      const isValid =
        // Allow null for conditional declaration
        contextType === null ||
        (contextType !== undefined &&
          contextType.$$typeof === REACT_CONTEXT_TYPE);

      if (!isValid && !didWarnAboutInvalidateContextType.has(ctor)) {
        didWarnAboutInvalidateContextType.add(ctor);

        let addendum = '';
        if (contextType === undefined) {
          addendum =
            ' However, it is set to undefined. ' +
            'This can be caused by a typo or by mixing up named and default imports. ' +
            'This can also happen due to a circular dependency, so ' +
            'try moving the createContext() call to a separate file.';
        } else if (typeof contextType !== 'object') {
          addendum = ' However, it is set to a ' + typeof contextType + '.';
        } else if (contextType.$$typeof === REACT_CONSUMER_TYPE) {
          addendum = ' Did you accidentally pass the Context.Consumer instead?';
        } else {
          addendum =
            ' However, it is set to an object with keys {' +
            Object.keys(contextType).join(', ') +
            '}.';
        }
        console.error(
          '%s defines an invalid contextType. ' +
            'contextType should point to the Context object returned by React.createContext().%s',
          getComponentNameFromType(ctor) || 'Component',
          addendum,
        );
      }
    }
  }

  if (typeof contextType === 'object' && contextType !== null) {
    context = readContext((contextType: any));
  } else if (!disableLegacyContext) {
    context = maskedLegacyContext;
  }

  const instance = new ctor(props, context);

  if (__DEV__) {
    if (
      typeof ctor.getDerivedStateFromProps === 'function' &&
      (instance.state === null || instance.state === undefined)
    ) {
      const componentName = getComponentNameFromType(ctor) || 'Component';
      if (!didWarnAboutUninitializedState.has(componentName)) {
        didWarnAboutUninitializedState.add(componentName);
        console.error(
          '`%s` uses `getDerivedStateFromProps` but its initial state is ' +
            '%s. This is not recommended. Instead, define the initial state by ' +
            'assigning an object to `this.state` in the constructor of `%s`. ' +
            'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
          componentName,
          instance.state === null ? 'null' : 'undefined',
          componentName,
        );
      }
    }

    // If new component APIs are defined, "unsafe" lifecycles won't be called.
    // Warn about these lifecycles if they are present.
    // Don't warn about react-lifecycles-compat polyfilled methods though.
    if (
      typeof ctor.getDerivedStateFromProps === 'function' ||
      typeof instance.getSnapshotBeforeUpdate === 'function'
    ) {