SuspenseTreeOperations() — react Function Reference

Architecture documentation for the SuspenseTreeOperations() function in index.js from the react codebase.

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ SuspenseTreeOperations() — react Function Reference

Dependency Diagram

graph TD
  c7ffc988_67fa_348a_9bbf_8e228a49a4ce["SuspenseTreeOperations()"]
  a48cc242_4b50_fd09_0e8c_65edf69b7004["index.js"]
  c7ffc988_67fa_348a_9bbf_8e228a49a4ce -->|defined in| a48cc242_4b50_fd09_0e8c_65edf69b7004
  7d51fcbe_16f5_9ae5_5715_b6fb65651a69["useTestSequence()"]
  c7ffc988_67fa_348a_9bbf_8e228a49a4ce -->|calls| 7d51fcbe_16f5_9ae5_5715_b6fb65651a69
  style c7ffc988_67fa_348a_9bbf_8e228a49a4ce fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shell/src/app/SuspenseTree/index.js lines 92–213

function SuspenseTreeOperations() {
  const initialChildren: any[] = [
    suspenseTreeOperationsChildren.a,
    suspenseTreeOperationsChildren.b,
    suspenseTreeOperationsChildren.c,
    suspenseTreeOperationsChildren.d,
    suspenseTreeOperationsChildren.e,
  ];
  const [children, dispatch] = useReducer(
    (
      pendingState: any[],
      action: 'toggle-mount' | 'reorder' | 'reorder-within-filtered',
    ): React$Node[] => {
      switch (action) {
        case 'toggle-mount':
          if (pendingState.length === 5) {
            return [
              suspenseTreeOperationsChildren.a,
              suspenseTreeOperationsChildren.b,
              suspenseTreeOperationsChildren.c,
              suspenseTreeOperationsChildren.d,
            ];
          } else {
            return [
              suspenseTreeOperationsChildren.a,
              suspenseTreeOperationsChildren.b,
              suspenseTreeOperationsChildren.c,
              suspenseTreeOperationsChildren.d,
              suspenseTreeOperationsChildren.e,
            ];
          }
        case 'reorder':
          if (pendingState[1] === suspenseTreeOperationsChildren.b) {
            return [
              suspenseTreeOperationsChildren.a,
              suspenseTreeOperationsChildren.c,
              suspenseTreeOperationsChildren.b,
              suspenseTreeOperationsChildren.d,
              suspenseTreeOperationsChildren.e,
            ];
          } else {
            return [
              suspenseTreeOperationsChildren.a,
              suspenseTreeOperationsChildren.b,
              suspenseTreeOperationsChildren.c,
              suspenseTreeOperationsChildren.d,
              suspenseTreeOperationsChildren.e,
            ];
          }
        case 'reorder-within-filtered':
          if (pendingState[4] === suspenseTreeOperationsChildren.e) {
            return [
              suspenseTreeOperationsChildren.a,
              suspenseTreeOperationsChildren.b,
              suspenseTreeOperationsChildren.c,
              suspenseTreeOperationsChildren.d,
              suspenseTreeOperationsChildren.eReordered,
            ];
          } else {
            return [
              suspenseTreeOperationsChildren.a,
              suspenseTreeOperationsChildren.b,
              suspenseTreeOperationsChildren.c,
              suspenseTreeOperationsChildren.d,
              suspenseTreeOperationsChildren.e,
            ];
          }
        default:
          return pendingState;
      }
    },
    initialChildren,
  );

  return (
    <>
      <button onClick={() => dispatch('toggle-mount')}>Toggle Mount</button>
      <button onClick={() => dispatch('reorder')}>Reorder</button>
      <button onClick={() => dispatch('reorder-within-filtered')}>
        Reorder Within Filtered
      </button>