Optimize classnames and renderValue (#3992)

Author: nstepien

src/Cell.tsx

@@ -39,9 +39,7 @@ function Cell<R, SR>({
   const { cellClass } = column;
   className = getCellClassname(
     column,
-    {
-      [cellDraggedOverClassname]: isDraggedOver
-    },
+    isDraggedOver && cellDraggedOverClassname,
     typeof cellClass === 'function' ? cellClass(row) : cellClass,
     className
   );

src/DataGrid.tsx

@@ -1170,13 +1170,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
       // Scrollable containers without tabIndex are keyboard focusable in Chrome only if there is no focusable element inside
       // whereas they are always focusable in Firefox. We need to set tabIndex to have a consistent behavior across browsers.
       tabIndex={-1}
-      className={classnames(
-        rootClassname,
-        {
-          [viewportDraggingClassname]: isDragging
-        },
-        className
-      )}
+      className={classnames(rootClassname, isDragging && viewportDraggingClassname, className)}
       style={{
         ...style,
         // set scrollPadding to correctly scroll to non-sticky cells/rows

src/HeaderCell.tsx

@@ -116,13 +116,15 @@ export default function HeaderCell<R, SR>({
     sortDirection && !priority ? (sortDirection === 'ASC' ? 'ascending' : 'descending') : undefined;
   const { sortable, resizable, draggable } = column;
 
-  const className = getCellClassname(column, column.headerCellClass, {
-    [cellSortableClassname]: sortable,
-    [cellResizableClassname]: resizable,
-    [cellDraggableClassname]: draggable,
-    [cellDraggingClassname]: isDragging,
-    [cellOverClassname]: isOver
-  });
+  const className = getCellClassname(
+    column,
+    column.headerCellClass,
+    sortable && cellSortableClassname,
+    resizable && cellResizableClassname,
+    draggable && cellDraggableClassname,
+    isDragging && cellDraggingClassname,
+    isOver && cellOverClassname
+  );
 
   function onSort(ctrlClick: boolean) {
     if (onSortColumnsChange == null) return;

src/cellRenderers/renderValue.tsx

@@ -1,9 +1,5 @@
 import type { RenderCellProps } from '../types';
 
 export function renderValue<R, SR>(props: RenderCellProps<R, SR>) {
-  try {
-    return props.row[props.column.key as keyof R] as React.ReactNode;
-  } catch {
-    return null;
-  }
+  return props.row?.[props.column.key as keyof R] as React.ReactNode;
 }

src/utils/styleUtils.ts

@@ -38,37 +38,23 @@ export function getCellStyle<R, SR>(
   };
 }
 
-type ClassValue = Maybe<string> | Record<string, boolean> | false;
+type ClassValue = Maybe<string | false>;
 
 export function classnames(...args: readonly ClassValue[]) {
   let classname = '';
 
   for (const arg of args) {
-    if (arg) {
-      if (typeof arg === 'string') {
-        classname += ` ${arg}`;
-      } else if (typeof arg === 'object') {
-        for (const key in arg) {
-          if (arg[key]) {
-            classname += ` ${key}`;
-          }
-        }
-      }
+    if (typeof arg === 'string') {
+      classname += ` ${arg}`;
     }
   }
 
-  return classname.trimStart();
+  return classname.slice(1);
 }
 
 export function getCellClassname<R, SR>(
   column: CalculatedColumn<R, SR>,
   ...extraClasses: readonly ClassValue[]
 ): string {
-  return classnames(
-    cellClassname,
-    {
-      [cellFrozenClassname]: column.frozen
-    },
-    ...extraClasses
-  );
+  return classnames(cellClassname, column.frozen && cellFrozenClassname, ...extraClasses);
 }