RootSelector() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ RootSelector() — react Function Reference

Dependency Diagram

graph TD
  755e47c0_e5c9_31fe_5b64_14dd71e4ab41["RootSelector()"]
  56e5ec4a_e49d_d34a_3ddb_87540ffc05ef["RootSelector.js"]
  755e47c0_e5c9_31fe_5b64_14dd71e4ab41 -->|defined in| 56e5ec4a_e49d_d34a_3ddb_87540ffc05ef
  style 755e47c0_e5c9_31fe_5b64_14dd71e4ab41 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js lines 16–50

export default function RootSelector(_: {}): React.Node {
  const {profilingData, rootID, setRootID} = useContext(ProfilerContext);

  const options = [];
  if (profilingData !== null) {
    profilingData.dataForRoots.forEach((dataForRoot, id) => {
      options.push(
        <option key={id} value={id}>
          {dataForRoot.displayName}
        </option>,
      );
    });
  }

  const handleChange = useCallback(
    ({currentTarget}: $FlowFixMe) => {
      setRootID(parseInt(currentTarget.value, 10));
    },
    [setRootID],
  );

  if (profilingData === null || profilingData.dataForRoots.size <= 1) {
    // Don't take up visual space if there's only one root.
    return null;
  }

  return (
    <Fragment>
      <div className={styles.Spacer} />
      <select value={rootID} onChange={handleChange}>
        {options}
      </select>
    </Fragment>
  );
}