Skip to content

[scheduler] Remove unnecessary useMemo usages #20133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 30, 2025
Merged

[scheduler] Remove unnecessary useMemo usages #20133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...er-headless/src/calendar-grid/current-time-indicator/CalendarGridCurrentTimeIndicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const CalendarGridCurrentTimeIndicator = React.forwardRef(
[position],
);

const props = React.useMemo(() => ({ style }), [style]);
const props = { style };

const isOutOfRange =
adapter.isBefore(nowForColumn, columnStart) || adapter.isAfter(nowForColumn, columnEnd);
Expand Down
2 changes: 1 addition & 1 deletion packages/x-scheduler-headless/src/calendar-grid/day-cell/CalendarGridDayCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const CalendarGridDayCell = React.forwardRef(function CalendarGridDayCell
const { ref: listItemRef, index } = useCompositeListItem();
const dropTargetRef = useDayCellDropTarget({ value, addPropertiesToDroppedEvent });

const props = React.useMemo(() => ({ role: 'gridcell' }), []);
const props = { role: 'gridcell' };
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I saw components on Base UI (e.g PreviewCardBackdrop) where we just inline the props object inside useRenderElement() instead of creating a props variable before.

No strong preference here 👍

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was wondering the same, I wasn't sure if it helps with readability. If the props object grows I would prefer to have it in a separate object to not pollute the useRenderElement call. But in these cases it's probably the same. Up to what you prefer, as you will be reading this code more often :) cc @mui/explore

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will leave this for future refactor, for now, let's just remove the unneeded useMemos.


const contextValue: CalendarGridDayCellContext = React.useMemo(
() => ({
Expand Down
4 changes: 1 addition & 3 deletions ...uler-headless/src/calendar-grid/day-event-placeholder/CalendarGridDayEventPlaceholder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import { useRenderElement } from '../../base-ui-copy/utils/useRenderElement';
import { BaseUIComponentProps } from '../../base-ui-copy/utils/types';
import { useEvent } from '../../utils/useEvent';

const EVENT_PLACEHOLDER_PROPS = { style: { pointerEvents: 'none' as const } };

export const CalendarGridDayEventPlaceholder = React.forwardRef(
function CalendarGridDayEventPlaceholder(
componentProps: CalendarGridDayEventPlaceholder.Props,
Expand All @@ -27,7 +25,7 @@ export const CalendarGridDayEventPlaceholder = React.forwardRef(
return useRenderElement('div', componentProps, {
state,
ref: [forwardedRef],
props: [elementProps, EVENT_PLACEHOLDER_PROPS],
props: [elementProps, { style: { pointerEvents: 'none' as const } }],
});
},
);
Expand Down
15 changes: 5 additions & 10 deletions packages/x-scheduler-headless/src/calendar-grid/day-event/CalendarGridDayEvent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ import { useEventCalendarStoreContext } from '../../use-event-calendar-store-con
import { useCalendarGridDayCellContext } from '../day-cell/CalendarGridDayCellContext';
import { useCalendarGridRootContext } from '../root/CalendarGridRootContext';

const EVENT_STYLE_WHILE_DRAGGING = { pointerEvents: 'none' as const };

export const CalendarGridDayEvent = React.forwardRef(function CalendarGridDayEvent(
componentProps: CalendarGridDayEvent.Props,
forwardedRef: React.ForwardedRef<HTMLDivElement>,
Expand Down Expand Up @@ -127,14 +125,11 @@ export const CalendarGridDayEvent = React.forwardRef(function CalendarGridDayEve

const columnHeaderId = getCalendarGridHeaderCellId(rootId, cellIndex);

const props = React.useMemo(
() => ({
id,
'aria-labelledby': `${columnHeaderId} ${id}`,
style: hasPlaceholder ? EVENT_STYLE_WHILE_DRAGGING : undefined,
}),
[hasPlaceholder, columnHeaderId, id],
);
const props = {
id,
'aria-labelledby': `${columnHeaderId} ${id}`,
style: hasPlaceholder ? { pointerEvents: 'none' as const } : undefined,
};

const contextValue: CalendarGridDayEventContext = React.useMemo(
() => ({ ...draggableEventContextValue, getSharedDragData }),
Expand Down
2 changes: 1 addition & 1 deletion packages/x-scheduler-headless/src/calendar-grid/day-row/CalendarGridDayRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const CalendarGridDayRow = React.forwardRef(function CalendarGridDayRow(
...elementProps
} = componentProps;

const props = React.useMemo(() => ({ role: 'row' }), []);
const props = { role: 'row' };
const cellsRefs = React.useRef<(HTMLDivElement | null)[]>([]);

const contextValue: CalendarGridDayRowContext = React.useMemo(
Expand Down
13 changes: 5 additions & 8 deletions packages/x-scheduler-headless/src/calendar-grid/header-cell/CalendarGridHeaderCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,11 @@ export const CalendarGridHeaderCell = React.forwardRef(function CalendarGridHead
const { ref: listItemRef, index } = useCompositeListItem();
const id = getCalendarGridHeaderCellId(rootId, index);

const props = React.useMemo(
() => ({
role: 'columnheader',
id,
'aria-label': `${adapter.formatByString(date.value, ariaLabelFormat)}`,
}),
[adapter, date, id, ariaLabelFormat],
);
const props = {
role: 'columnheader',
id,
'aria-label': `${adapter.formatByString(date.value, ariaLabelFormat)}`,
};

const state: CalendarGridHeaderCell.State = React.useMemo(
() => ({
Expand Down
2 changes: 1 addition & 1 deletion packages/x-scheduler-headless/src/calendar-grid/header-row/CalendarGridHeaderRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const CalendarGridHeaderRow = React.forwardRef(function CalendarGridHeade
...elementProps
} = componentProps;

const props = React.useMemo(() => ({ role: 'row' }), []);
const props = { role: 'row' };
const cellsRefs = React.useRef<(HTMLDivElement | null)[]>([]);

const element = useRenderElement('div', componentProps, {
Expand Down
2 changes: 1 addition & 1 deletion packages/x-scheduler-headless/src/calendar-grid/root/CalendarGridRoot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const CalendarGridRoot = React.forwardRef(function CalendarGridRoot(

const id = useId(idProp);

const props = React.useMemo(() => ({ role: 'grid', id }), [id]);
const props = { role: 'grid', id };

const contextValue: CalendarGridRootContext = React.useMemo(() => ({ id }), [id]);

Expand Down
2 changes: 1 addition & 1 deletion packages/x-scheduler-headless/src/calendar-grid/time-column/CalendarGridTimeColumn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const CalendarGridTimeColumn = React.forwardRef(function CalendarGridTime
[isCurrentDay],
);

const props = React.useMemo(() => ({ role: 'gridcell' }), []);
const props = { role: 'gridcell' };

const contextValue: CalendarGridTimeColumnContext = React.useMemo(
() => ({
Expand Down
2 changes: 1 addition & 1 deletion ...er-headless/src/calendar-grid/time-event-placeholder/CalendarGridTimeEventPlaceholder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const CalendarGridTimeEventPlaceholder = React.forwardRef(
[position, duration],
);

const props = React.useMemo(() => ({ style }), [style]);
const props = { style };

const { state } = useEvent({ start, end });

Expand Down
5 changes: 1 addition & 4 deletions packages/x-scheduler-headless/src/calendar-grid/time-event/CalendarGridTimeEvent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,10 +135,7 @@ export const CalendarGridTimeEvent = React.forwardRef(function CalendarGridTimeE

const columnHeaderId = getCalendarGridHeaderCellId(rootId, columnIndex);

const props = React.useMemo(
() => ({ id, style, 'aria-labelledby': `${columnHeaderId} ${id}` }),
[style, columnHeaderId, id],
);
const props = { id, style, 'aria-labelledby': `${columnHeaderId} ${id}` };

const contextValue: CalendarGridTimeEventContext = React.useMemo(
() => ({ ...draggableEventContextValue, getSharedDragData }),
Expand Down
2 changes: 1 addition & 1 deletion packages/x-scheduler-headless/src/timeline/cell/TimelineCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const TimelineCell = React.forwardRef(function TimelineCell(
} = componentProps;

// TODO: Add aria-colindex using Composite.
const props = React.useMemo(() => ({ role: 'cell' }), []);
const props = { role: 'cell' };

return useRenderElement('div', componentProps, {
ref: [forwardedRef],
Expand Down
2 changes: 1 addition & 1 deletion packages/x-scheduler-headless/src/timeline/event-row/TimelineEventRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const TimelineEventRow = React.forwardRef(function TimelineEventRow(
} = componentProps;

// TODO: Add aria-rowindex using Composite.
const props = React.useMemo(() => ({ role: 'row' }), []);
const props = { role: 'row' };

const contextValue: TimelineEventRowContext = React.useMemo(() => ({ start, end }), [start, end]);

Expand Down
2 changes: 1 addition & 1 deletion packages/x-scheduler-headless/src/timeline/event/TimelineEvent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const TimelineEvent = React.forwardRef(function TimelineEvent(
[position, duration],
);

const props = React.useMemo(() => ({ style }), [style]);
const props = { style };

const { state } = useEvent({ start, end });

Expand Down
2 changes: 1 addition & 1 deletion packages/x-scheduler-headless/src/timeline/root/TimelineRoot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const TimelineRoot = React.forwardRef(function TimelineRoot(
...elementProps
} = componentProps;

const props = React.useMemo(() => ({ role: 'grid' }), []);
const props = { role: 'grid' };

const store = useRefWithInit(() => new Store<State>({ items: itemsProp })).current;

Expand Down
2 changes: 1 addition & 1 deletion packages/x-scheduler-headless/src/timeline/row/TimelineRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const TimelineRow = React.forwardRef(function TimelineRow(
} = componentProps;

// TODO: Add aria-rowindex using Composite.
const props = React.useMemo(() => ({ role: 'row' }), []);
const props = { role: 'row' };

return useRenderElement('div', componentProps, {
ref: [forwardedRef],
Expand Down
2 changes: 1 addition & 1 deletion packages/x-scheduler-headless/src/timeline/sub-grid/TimelineSubGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const TimelineSubGrid = React.forwardRef(function TimelineSubGrid<Item =
return childrenProp;
}, [childrenProp, items]);

const props = React.useMemo(() => ({ role: 'rowgroup', children }), [children]);
const props = { role: 'rowgroup', children };

return useRenderElement('div', componentProps, {
ref: [forwardedRef],
Expand Down
Loading