Repository: twentyhq/twenty
File: packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContent.tsx (TypeScript)

Code before:
    [isRowSelectedFamilyState, store],
  );

  const recordTableScrollWrapperId = `record-table-scroll-${recordTableId}`;

  const { visibleRecordFields } = useRecordTableContextOrThrow();

  const setRecordTableHoverPosition = useSetAtomComponentState(
    recordTableHoverPositionComponentState,
    recordTableId,
  );

  const isSomeCellInEditMode = useAtomComponentSelectorCallbackState(
    isSomeCellInEditModeComponentSelector,
    recordTableId,
  );

  const handleMouseLeave = useCallback(() => {
    const cellInEditMode = store.get(isSomeCellInEditMode);

    if (!cellInEditMode) {
      setRecordTableHoverPosition(null);
    }
  }, [store, isSomeCellInEditMode, setRecordTableHoverPosition]);

  const lastHoverPositionRef = useRef<TableCellPosition | null>(null);

  const handleDelegatedMouseMove = useCallback(
    (event: React.MouseEvent) => {
      const target = event.target as HTMLElement;
      const cellElement = target.closest<HTMLElement>(
        '[id^="record-table-cell-"]',
      );

      if (!cellElement) {
        return;
      }

      const idParts = cellElement.id.split('-');
      const column = parseInt(idParts[3], 10);
      const row = parseInt(idParts[4], 10);

      if (isNaN(column) || isNaN(row)) {
        return;
      }

      const lastPosition = lastHoverPositionRef.current;

      if (lastPosition?.column === column && lastPosition?.row === row) {
        return;
      }

Review comment (refactor):
can we re-implement this without using useRef. Also, we should leverage html data-attributes rather than extracting from id

Code after:
  );

  const recordTableScrollWrapperId = `record-table-scroll-${recordTableId}`;

  const { visibleRecordFields } = useRecordTableContextOrThrow();

  const recordTableHoverPositionCallbackState =
    useAtomComponentStateCallbackState(
      recordTableHoverPositionComponentState,
      recordTableId,
    );

  const isSomeCellInEditMode = useAtomComponentSelectorCallbackState(
    isSomeCellInEditModeComponentSelector,
    recordTableId,
  );

  const handleMouseLeave = useCallback(() => {
    const cellInEditMode = store.get(isSomeCellInEditMode);

    if (!cellInEditMode) {
      store.set(recordTableHoverPositionCallbackState, null);
    }
  }, [store, isSomeCellInEditMode, recordTableHoverPositionCallbackState]);

  const handleDelegatedMouseMove = useCallback(
    (event: React.MouseEvent) => {
      if (store.get(isSomeCellInEditMode)) {
        return;
      }

      const target = event.target as HTMLElement;
      const cellElement = target.closest<HTMLElement>(
        '[data-record-table-col]',
      );

      if (!cellElement) {
        return;
      }

      const column = Number(cellElement.dataset.recordTableCol);
      const row = Number(cellElement.dataset.recordTableRow);

      if (isNaN(column) || isNaN(row)) {
        return;
      }

      const lastPosition = store.get(recordTableHoverPositionCallbackState);

      if (lastPosition?.column === column && lastPosition?.row === row) {
        return;