checkShouldComponentUpdate() — react Function Reference

Architecture documentation for the checkShouldComponentUpdate() function in ReactFiberClassComponent.js from the react codebase.

Function javascript BabelCompiler Validation calls 1 called by 2

Entity Profile

BabelCompiler→ Validation→ checkShouldComponentUpdate() — react Function Reference

Dependency Diagram

graph TD
  2b0ae04e_0543_188d_43fc_818335c01e4c["checkShouldComponentUpdate()"]
  3805476a_1924_0e35_fff7_6afad197a523["ReactFiberClassComponent.js"]
  2b0ae04e_0543_188d_43fc_818335c01e4c -->|defined in| 3805476a_1924_0e35_fff7_6afad197a523
  40e9392c_b382_4ef8_9ede_8ac85559673c["resumeMountClassInstance()"]
  40e9392c_b382_4ef8_9ede_8ac85559673c -->|calls| 2b0ae04e_0543_188d_43fc_818335c01e4c
  d93c8e6d_2cc8_2077_fe19_1d954fc83959["updateClassInstance()"]
  d93c8e6d_2cc8_2077_fe19_1d954fc83959 -->|calls| 2b0ae04e_0543_188d_43fc_818335c01e4c
  88d91075_df31_e6fc_5535_80030045f42a["setIsStrictModeForDevtools()"]
  2b0ae04e_0543_188d_43fc_818335c01e4c -->|calls| 88d91075_df31_e6fc_5535_80030045f42a
  style 2b0ae04e_0543_188d_43fc_818335c01e4c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberClassComponent.js lines 245–294

function checkShouldComponentUpdate(
  workInProgress: Fiber,
  ctor: any,
  oldProps: any,
  newProps: any,
  oldState: any,
  newState: any,
  nextContext: any,
) {
  const instance = workInProgress.stateNode;
  if (typeof instance.shouldComponentUpdate === 'function') {
    let shouldUpdate = instance.shouldComponentUpdate(
      newProps,
      newState,
      nextContext,
    );
    if (__DEV__) {
      if (workInProgress.mode & StrictLegacyMode) {
        setIsStrictModeForDevtools(true);
        try {
          // Invoke the function an extra time to help detect side-effects.
          shouldUpdate = instance.shouldComponentUpdate(
            newProps,
            newState,
            nextContext,
          );
        } finally {
          setIsStrictModeForDevtools(false);
        }
      }
      if (shouldUpdate === undefined) {
        console.error(
          '%s.shouldComponentUpdate(): Returned undefined instead of a ' +
            'boolean value. Make sure to return true or false.',
          getComponentNameFromType(ctor) || 'Component',
        );
      }
    }

    return shouldUpdate;
  }

  if (ctor.prototype && ctor.prototype.isPureReactComponent) {
    return (
      !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
    );
  }

  return true;
}