Repository: plotly/dash
File: components/dash-table/src/dash-table/components/ControlledTable/index.tsx (TypeScript)

Code before:
        if (fixed_columns || fixed_rows) {
            this.handleResizeIf(...R.values(this.props));
        }

        this.handleDropdown();
        this.adjustTooltipPosition();

        const {active_cell} = this.props;

        // Check if the focus is inside this table
        if (this.containsActiveElement()) {
            const active = this.getActiveCellAttributes();

            // If there is an active cell and it does not have focus -> transfer focus
            if (
                active &&
                active_cell &&
                (active.column_id !== active_cell?.column_id ||
                    active.row !== active_cell?.row)
            ) {
                const target = this.$el.querySelector(
                    `td[data-dash-row="${
                        active_cell.row
                    }"][data-dash-column="${CSS.escape(
                        active_cell.column_id
                    )}"]:not(.phantom-cell)`
                ) as HTMLElement;
                if (target) {
                    target.focus();
                }
            }
        }

        const {setState, uiCell, virtualization} = this.props;

        if (!virtualization) {
            return;
        }

        if (uiCell) {
            return;
        }

        const {r1c1} = this.refs as Refs;
        const contentTd = r1c1.querySelector('tr > td:first-of-type');

        if (!contentTd) {
            return;
        }

        const contentThs = r1c1.querySelectorAll('tr th:first-of-type');

Review comment (security):
That became a bit harder to read on multiple line, I would destructure the `active_cell` and put the escaped column id in a variable.

Code after:

        const {fixed_columns, fixed_rows} = this.props;

        if (fixed_columns || fixed_rows) {
            this.handleResizeIf(...R.values(this.props));
        }

        this.handleDropdown();
        this.adjustTooltipPosition();

        const {active_cell} = this.props;

        // Check if the focus is inside this table
        if (this.containsActiveElement()) {
            const active = this.getActiveCellAttributes();

            // If there is an active cell and it does not have focus -> transfer focus
            if (
                active &&
                active_cell &&
                (active.column_id !== active_cell?.column_id ||
                    active.row !== active_cell?.row)
            ) {
                const {column_id, row} = active_cell;
                const target = this.$el.querySelector(
                    `td[data-dash-row="${row}"]${columnSelector(column_id)}`
                ) as HTMLElement;
                if (target) {
                    target.focus();
                }
            }
        }

        const {setState, uiCell, virtualization} = this.props;

        if (!virtualization) {
            return;
        }

        if (uiCell) {
            return;
        }

        const {r1c1} = this.refs as Refs;
        const contentTd = r1c1.querySelector('tr > td:first-of-type');

        if (!contentTd) {
            return;
        }

        const contentThs = r1c1.querySelectorAll('tr th:first-of-type');