ProfilerSettings() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ ProfilerSettings() — react Function Reference

Dependency Diagram

graph TD
  a66dc8f3_2b55_5566_3949_6275bbdbf560["ProfilerSettings()"]
  72d8a743_dd0b_d899_708b_6790db5d2e86["ProfilerSettings.js"]
  a66dc8f3_2b55_5566_3949_6275bbdbf560 -->|defined in| 72d8a743_dd0b_d899_708b_6790db5d2e86
  style a66dc8f3_2b55_5566_3949_6275bbdbf560 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js lines 19–107

export default function ProfilerSettings(_: {}): React.Node {
  const {
    isCommitFilterEnabled,
    minCommitDuration,
    setIsCommitFilterEnabled,
    setMinCommitDuration,
  } = useContext(ProfilerContext);
  const store = useContext(StoreContext);

  const recordChangeDescriptionsSubscription = useMemo(
    () => ({
      getCurrentValue: () => store.recordChangeDescriptions,
      subscribe: (callback: Function) => {
        store.addListener('recordChangeDescriptions', callback);
        return () => store.removeListener('recordChangeDescriptions', callback);
      },
    }),
    [store],
  );
  const recordChangeDescriptions = useSubscription<boolean>(
    recordChangeDescriptionsSubscription,
  );

  const updateRecordChangeDescriptions = useCallback(
    ({currentTarget}: $FlowFixMe) => {
      store.recordChangeDescriptions = currentTarget.checked;
    },
    [store],
  );
  const updateMinCommitDuration = useCallback(
    (event: SyntheticEvent) => {
      const newValue = parseFloat(event.currentTarget.value);
      setMinCommitDuration(
        Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue,
      );
    },
    [setMinCommitDuration],
  );
  const updateIsCommitFilterEnabled = useCallback(
    (event: SyntheticEvent) => {
      const checked = event.currentTarget.checked;
      setIsCommitFilterEnabled(checked);
      if (checked) {
        if (minCommitDurationInputRef.current !== null) {
          minCommitDurationInputRef.current.focus();
        }
      }
    },
    [setIsCommitFilterEnabled],
  );

  const minCommitDurationInputRef = useRef<HTMLInputElement | null>(null);

  return (
    <div className={styles.SettingList}>
      <div className={styles.SettingWrapper}>
        <label className={styles.SettingRow}>
          <input
            type="checkbox"
            checked={recordChangeDescriptions}
            onChange={updateRecordChangeDescriptions}
            className={styles.SettingRowCheckbox}
          />
          Record why each component rendered while profiling
        </label>
      </div>

      <div className={styles.SettingWrapper}>
        <label className={styles.SettingRow}>
          <input
            checked={isCommitFilterEnabled}
            onChange={updateIsCommitFilterEnabled}
            type="checkbox"
            className={styles.SettingRowCheckbox}
          />
          Hide commits below
          <input
            className={styles.Input}
            onChange={updateMinCommitDuration}
            ref={minCommitDurationInputRef}
            type="number"