optimizeForSSR() — react Function Reference

Architecture documentation for the optimizeForSSR() function in OptimizeForSSR.ts from the react codebase.

Function typescript BabelCompiler Optimization calls 5 called by 1

Entity Profile

BabelCompiler→ Optimization→ optimizeForSSR() — react Function Reference

Dependency Diagram

graph TD
  93674d7a_a49c_dadd_0d67_6c5e98450587["optimizeForSSR()"]
  1acbc29a_0c93_81f5_ff8e_d4434aae5ed9["OptimizeForSSR.ts"]
  93674d7a_a49c_dadd_0d67_6c5e98450587 -->|defined in| 1acbc29a_0c93_81f5_ff8e_d4434aae5ed9
  c3bc3875_256f_8f5e_7800_2f9c5bae65eb["runWithEnvironment()"]
  c3bc3875_256f_8f5e_7800_2f9c5bae65eb -->|calls| 93674d7a_a49c_dadd_0d67_6c5e98450587
  b2fc2985_a7ba_9865_c2a3_2a7531f27d44["eachInstructionValueOperand()"]
  93674d7a_a49c_dadd_0d67_6c5e98450587 -->|calls| b2fc2985_a7ba_9865_c2a3_2a7531f27d44
  41232a25_deb6_6e83_05a8_ae9f961656f7["eachTerminalOperand()"]
  93674d7a_a49c_dadd_0d67_6c5e98450587 -->|calls| 41232a25_deb6_6e83_05a8_ae9f961656f7
  be7548c2_b2e2_2b04_f6f0_8d2da9219b46["hasKnownNonRenderCall()"]
  93674d7a_a49c_dadd_0d67_6c5e98450587 -->|calls| be7548c2_b2e2_2b04_f6f0_8d2da9219b46
  c447b97e_0b8e_b187_e3a8_4be412d6f495["retainWhere()"]
  93674d7a_a49c_dadd_0d67_6c5e98450587 -->|calls| c447b97e_0b8e_b187_e3a8_4be412d6f495
  b8cba1e6_800c_20b1_4b82_b8a64c0513a8["isKnownEventHandler()"]
  93674d7a_a49c_dadd_0d67_6c5e98450587 -->|calls| b8cba1e6_800c_20b1_4b82_b8a64c0513a8
  style 93674d7a_a49c_dadd_0d67_6c5e98450587 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/packages/babel-plugin-react-compiler/src/Optimization/OptimizeForSSR.ts lines 42–243

export function optimizeForSSR(fn: HIRFunction): void {
  const inlinedState = new Map<IdentifierId, InstructionValue>();
  /**
   * First pass identifies useState/useReducer which can be safely inlined. Any use
   * of the hook return other than destructuring (with a specific pattern) prevents
   * inlining.
   *
   * Supported cases:
   * - `const [state, ] = useState( <primitive-array-or-object> )`
   * - `const [state, ] = useReducer(..., <value>)`
   * - `const [state, ] = useReducer[..., <value>, <init>]`
   */
  for (const block of fn.body.blocks.values()) {
    for (const instr of block.instructions) {
      const {value} = instr;
      switch (value.kind) {
        case 'Destructure': {
          if (
            inlinedState.has(value.value.identifier.id) &&
            value.lvalue.pattern.kind === 'ArrayPattern' &&
            value.lvalue.pattern.items.length >= 1 &&
            value.lvalue.pattern.items[0].kind === 'Identifier'
          ) {
            // Allow destructuring of inlined states
            continue;
          }
          break;
        }
        case 'MethodCall':
        case 'CallExpression': {
          const calleee =
            value.kind === 'CallExpression' ? value.callee : value.property;
          const hookKind = getHookKind(fn.env, calleee.identifier);
          switch (hookKind) {
            case 'useReducer': {
              if (
                value.args.length === 2 &&
                value.args[1].kind === 'Identifier'
              ) {
                const arg = value.args[1];
                const replace: LoadLocal = {
                  kind: 'LoadLocal',
                  place: arg,
                  loc: arg.loc,
                };
                inlinedState.set(instr.lvalue.identifier.id, replace);
              } else if (
                value.args.length === 3 &&
                value.args[1].kind === 'Identifier' &&
                value.args[2].kind === 'Identifier'
              ) {
                const arg = value.args[1];
                const initializer = value.args[2];
                const replace: CallExpression = {
                  kind: 'CallExpression',
                  callee: initializer,
                  args: [arg],
                  loc: value.loc,
                };
                inlinedState.set(instr.lvalue.identifier.id, replace);
              }
              break;
            }
            case 'useState': {
              if (
                value.args.length === 1 &&
                value.args[0].kind === 'Identifier'
              ) {
                const arg = value.args[0];
                if (
                  isPrimitiveType(arg.identifier) ||
                  isPlainObjectType(arg.identifier) ||
                  isArrayType(arg.identifier)
                ) {
                  const replace: LoadLocal = {
                    kind: 'LoadLocal',
                    place: arg,
                    loc: arg.loc,
                  };
                  inlinedState.set(instr.lvalue.identifier.id, replace);
                }