Updaters() — react Function Reference

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

Function javascript CompilerCore Gating

Entity Profile

CompilerCore→ Gating→ Updaters() — react Function Reference

Dependency Diagram

graph TD
  c92adb2b_6aa5_7e75_ad39_4a1fcc0e0fd3["Updaters()"]
  713a8fa9_e0b7_7bf4_9ecc_6b3d37f1650f["Updaters.js"]
  c92adb2b_6aa5_7e75_ad39_4a1fcc0e0fd3 -->|defined in| 713a8fa9_e0b7_7bf4_9ecc_6b3d37f1650f
  style c92adb2b_6aa5_7e75_ad39_4a1fcc0e0fd3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js lines 24–57

export default function Updaters({commitTree, updaters}: Props): React.Node {
  const {selectFiber} = useContext(ProfilerContext);

  const children =
    updaters.length > 0 ? (
      updaters.map((serializedElement: SerializedElement): React$Node => {
        const {displayName, id, key, type} = serializedElement;
        const isVisibleInTree =
          commitTree.nodes.has(id) && type !== ElementTypeRoot;
        if (isVisibleInTree) {
          return (
            <button
              key={id}
              className={styles.Updater}
              onClick={() => selectFiber(id, displayName)}>
              {displayName} {key ? `key="${key}"` : ''}
            </button>
          );
        } else {
          return (
            <div key={id} className={styles.UnmountedUpdater}>
              {displayName} {key ? `key="${key}"` : ''}
            </div>
          );
        }
      })
    ) : (
      <div key="none" className={styles.NoUpdaters}>
        (unknown)
      </div>
    );

  return <div className={styles.Updaters}>{children}</div>;
}