Repository: apache/superset
File: superset-frontend/src/dashboard/components/SliceHeader/index.tsx (TypeScript)

Code before:
      handleToggleFullSize,
      isFullSize,
      chartStatus,
      formData,
      width,
      height,
    },
    ref,
  ) => {
    const SliceHeaderExtension = extensionsRegistry.get(
      'dashboard.slice.header',
    );
    const uiConfig = useUiConfig();
    const dashboardPageId = useContext(DashboardPageIdContext);
    const [headerTooltip, setHeaderTooltip] = useState<ReactNode | null>(null);
    const headerRef = useRef<HTMLDivElement>(null);
    // TODO: change to indicator field after it will be implemented
    const crossFilterValue = useSelector<RootState, any>(
      state => state.dataMask[slice?.slice_id]?.filterState?.value,
    );
    const isCrossFiltersEnabled = useSelector<RootState, boolean>(
      ({ dashboardInfo }) => dashboardInfo.crossFiltersEnabled,
    );

    const chart = useSelector<RootState, Chart>(
      state => state.charts[slice.slice_id],
    );

    const theme = useTheme();

    const firstQueryResponse = chart.queriesResponse?.[0];

    const rowLimit = Number(formData.row_limit || -1);
    const sqlRowCount = Number(firstQueryResponse?.sql_rowcount || 0);

    const canExplore = !editMode && supersetCanExplore;

    useEffect(() => {
      const headerElement = headerRef.current;
      if (canExplore) {
        setHeaderTooltip(getSliceHeaderTooltip(sliceName));
      } else if (
        headerElement &&
        (headerElement.scrollWidth > headerElement.offsetWidth ||
          headerElement.scrollHeight > headerElement.offsetHeight)
      ) {
        setHeaderTooltip(sliceName ?? null);
      } else {
        setHeaderTooltip(null);
      }
    }, [sliceName, width, height, canExplore]);

Review comment (suggestion):
We need the chart object only for the first query response right? If so, can we change this selector to `state.charts[id].queriesResponse?.[0]`?
Selecting the whole chart object will trigger an unnecessary rerender every time any field in the chart changes, and we only care about the queries response here

Code after:
      addDangerToast,
      handleToggleFullSize,
      isFullSize,
      chartStatus,
      formData,
      width,
      height,
    },
    ref,
  ) => {
    const SliceHeaderExtension = extensionsRegistry.get(
      'dashboard.slice.header',
    );
    const uiConfig = useUiConfig();
    const dashboardPageId = useContext(DashboardPageIdContext);
    const [headerTooltip, setHeaderTooltip] = useState<ReactNode | null>(null);
    const headerRef = useRef<HTMLDivElement>(null);
    // TODO: change to indicator field after it will be implemented
    const crossFilterValue = useSelector<RootState, any>(
      state => state.dataMask[slice?.slice_id]?.filterState?.value,
    );
    const isCrossFiltersEnabled = useSelector<RootState, boolean>(
      ({ dashboardInfo }) => dashboardInfo.crossFiltersEnabled,
    );

    const firstQueryResponse = useSelector<RootState, QueryData | undefined>(
      state => state.charts[slice.slice_id].queriesResponse?.[0],
    );

    const theme = useTheme();

    const rowLimit = Number(formData.row_limit || -1);
    const sqlRowCount = Number(firstQueryResponse?.sql_rowcount || 0);

    const canExplore = !editMode && supersetCanExplore;

    useEffect(() => {
      const headerElement = headerRef.current;
      if (canExplore) {
        setHeaderTooltip(getSliceHeaderTooltip(sliceName));
      } else if (
        headerElement &&
        (headerElement.scrollWidth > headerElement.offsetWidth ||
          headerElement.scrollHeight > headerElement.offsetHeight)
      ) {
        setHeaderTooltip(sliceName ?? null);
      } else {
        setHeaderTooltip(null);
      }
    }, [sliceName, width, height, canExplore]);