LayoutDispatch() — react Function Reference

Architecture documentation for the LayoutDispatch() function in SuspenseTab.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ LayoutDispatch() — react Function Reference

Dependency Diagram

graph TD
  8b5c7c5d_b45e_6199_6330_c2a4c76cb353["LayoutDispatch()"]
  3249b7c1_ae10_2672_10ce_a66fd0ee6f60["SuspenseTab.js"]
  8b5c7c5d_b45e_6199_6330_c2a4c76cb353 -->|defined in| 3249b7c1_ae10_2672_10ce_a66fd0ee6f60
  style 8b5c7c5d_b45e_6199_6330_c2a4c76cb353 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js lines 67–97

type LayoutDispatch = (action: LayoutAction) => void;

function ToggleUniqueSuspenders() {
  const store = useContext(StoreContext);
  const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);

  const {uniqueSuspendersOnly} = useContext(SuspenseTreeStateContext);

  function handleToggleUniqueSuspenders() {
    const nextUniqueSuspendersOnly = !uniqueSuspendersOnly;
    // TODO: Handle different timeline modes (e.g. random order)
    const nextTimeline = store.getEndTimeOrDocumentOrderSuspense(
      nextUniqueSuspendersOnly,
    );
    suspenseTreeDispatch({
      type: 'SET_SUSPENSE_TIMELINE',
      payload: [nextTimeline, null, nextUniqueSuspendersOnly],
    });
  }

  return (
    <Toggle
      isChecked={uniqueSuspendersOnly}
      onChange={handleToggleUniqueSuspenders}
      title={
        'Filter Suspense which does not suspend, or if the parent also suspend on the same.'
      }>
      <ButtonIcon type={uniqueSuspendersOnly ? 'filter-on' : 'filter-off'} />
    </Toggle>
  );
}