diff --git a/examples/bpk-component-calendar/examples.js b/examples/bpk-component-calendar/examples.js
index da30eb94ec..1c55d81248 100644
--- a/examples/bpk-component-calendar/examples.js
+++ b/examples/bpk-component-calendar/examples.js
@@ -249,14 +249,42 @@ const WeekExample = () => {
     DateComponent: DummyDateComponent,
     dateModifiers: {},
     dates: [
-      new Date(1980, 5, 10),
-      new Date(1980, 5, 11),
-      new Date(1980, 5, 12),
-      new Date(1980, 5, 13),
-      new Date(1980, 5, 14),
-      new Date(1980, 5, 15),
-      new Date(1980, 5, 16),
-    ].map(startOfDay),
+      {
+        val: startOfDay(new Date(1980, 5, 10)),
+        customLabel: 'Saturday, 10 May 1980',
+        isoLabel: '1980-05-10',
+      },
+      {
+        val: startOfDay(new Date(1980, 5, 11)),
+        customLabel: 'Sunday, 11 May 1980',
+        isoLabel: '1980-05-11',
+      },
+      {
+        val: startOfDay(new Date(1980, 5, 12)),
+        customLabel: 'Monday, 12 May 1980',
+        isoLabel: '1980-05-12',
+      },
+      {
+        val: startOfDay(new Date(1980, 5, 13)),
+        customLabel: 'Tuesday, 13 May 1980',
+        isoLabel: '1980-05-13',
+      },
+      {
+        val: startOfDay(new Date(1980, 5, 14)),
+        customLabel: 'Wednesday, 14 May 1980',
+        isoLabel: '1980-05-14',
+      },
+      {
+        val: startOfDay(new Date(1980, 5, 15)),
+        customLabel: 'Thursday, 15 May 1980',
+        isoLabel: '1980-05-15',
+      },
+      {
+        val: startOfDay(new Date(1980, 5, 16)),
+        customLabel: 'Friday, 16 May 1980',
+        isoLabel: '1980-05-16',
+      },
+    ],
     daysOfWeek: weekDays,
     formatDateFull: (d) => d.toString(),
     preventKeyboardFocus: false,
diff --git a/packages/bpk-component-calendar/src/BpkCalendarDate.tsx b/packages/bpk-component-calendar/src/BpkCalendarDate.tsx
index c16d5c8c4c..3a0b70033e 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarDate.tsx
+++ b/packages/bpk-component-calendar/src/BpkCalendarDate.tsx
@@ -52,6 +52,7 @@ export type Props = DefaultProps & {
 
 type DefaultProps = {
   className?: string | null;
+  isoLabel?: string;
   isBlocked?: boolean;
   isFocused?: boolean;
   isKeyboardFocusable?: boolean;
@@ -185,6 +186,7 @@ class BpkCalendarDate extends PureComponent<Props> {
     }
 
     delete buttonProps.preventKeyboardFocus;
+    delete buttonProps.isoLabel;
 
     return (
       <button
diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx b/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx
index 77085f5319..a2a3ab103f 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx
+++ b/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx
@@ -20,17 +20,17 @@ import type { ElementType } from 'react';
 import { Component } from 'react';
 
 import { cssModules, isDeviceIos } from '../../bpk-react-utils';
+import deferCallback from '../../bpk-react-utils/src/deferCallback';
 
 import { addCalendarGridTransition } from './BpkCalendarGridTransition';
 import BpkCalendarWeek from './BpkCalendarWeek';
 import { CALENDAR_SELECTION_TYPE } from './custom-proptypes';
 import {
   addMonths,
-  formatIsoDate,
-  getCalendarMonthWeeks,
+  getCalendar,
+  getCalendarNoCustomLabel,
   isSameMonth,
 } from './date-utils';
-import { memoize } from './utils';
 
 import type { DateModifiers, SelectionConfiguration } from './custom-proptypes';
 
@@ -79,8 +79,14 @@ export type Props = DefaultProps & {
   weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 };
 
+export type DateProps = {
+  val: Date;
+  customLabel: string | Date;
+  isoLabel: string;
+};
+
 type State = {
-  calendarMonthWeeks: Date[][];
+  calendarMonthWeeks: DateProps[][];
 };
 /*
   BpkCalendarGrid - the grid representing a whole month
@@ -110,15 +116,28 @@ class BpkCalendarGrid extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    // We cache expensive calculations (and identities) in state
     this.state = {
-      calendarMonthWeeks: getCalendarMonthWeeks(
+      // Do not run expensive date formatting in the constructor
+      calendarMonthWeeks: getCalendarNoCustomLabel(
         props.month,
         props.weekStartsOn,
       ),
     };
   }
 
+  componentDidMount(): void {
+    // Defer expensive date formatting until after render to improve INP.
+    deferCallback(() =>
+      this.setState({
+        calendarMonthWeeks: getCalendar(
+          this.props.month,
+          this.props.weekStartsOn,
+          this.props.formatDateFull,
+        ),
+      }),
+    );
+  }
+
   UNSAFE_componentWillReceiveProps(nextProps: Props) {
     // We cache expensive calculations (and identities) in state
     if (
@@ -126,9 +145,10 @@ class BpkCalendarGrid extends Component<Props, State> {
       nextProps.weekStartsOn !== this.props.weekStartsOn
     ) {
       this.setState({
-        calendarMonthWeeks: getCalendarMonthWeeks(
+        calendarMonthWeeks: getCalendar(
           nextProps.month,
           nextProps.weekStartsOn,
+          nextProps.formatDateFull,
         ),
       });
     }
@@ -142,7 +162,6 @@ class BpkCalendarGrid extends Component<Props, State> {
       dateModifiers,
       dateProps,
       focusedDate,
-      formatDateFull,
       ignoreOutsideDate,
       isKeyboardFocusable,
       markOutsideDays,
@@ -166,12 +185,11 @@ class BpkCalendarGrid extends Component<Props, State> {
         <div>
           {calendarMonthWeeks.map((dates) => (
             <BpkCalendarWeek
-              key={formatIsoDate(dates[0])}
+              key={dates[0].isoLabel}
               month={month}
               dates={dates}
               onDateClick={onDateClick}
               onDateKeyDown={onDateKeyDown}
-              formatDateFull={memoize(formatDateFull)}
               DateComponent={DateComponent}
               dateModifiers={dateModifiers!}
               preventKeyboardFocus={preventKeyboardFocus}
diff --git a/packages/bpk-component-calendar/src/BpkCalendarWeek-test.tsx b/packages/bpk-component-calendar/src/BpkCalendarWeek-test.tsx
index 56ce74e004..f5f94a8c22 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarWeek-test.tsx
+++ b/packages/bpk-component-calendar/src/BpkCalendarWeek-test.tsx
@@ -38,14 +38,42 @@ const initialProps: Props = {
   DateComponent: DummyDateComponent,
   dateModifiers: {},
   dates: [
-    new Date(1980, 4, 31),
-    new Date(1980, 5, 1),
-    new Date(1980, 5, 2),
-    new Date(1980, 5, 3),
-    new Date(1980, 5, 4),
-    new Date(1980, 5, 5),
-    new Date(1980, 5, 6),
-  ].map(startOfDay),
+    {
+      val: startOfDay(new Date(1980, 4, 31)),
+      customLabel: 'Wednesday, 31 April 1980',
+      isoLabel: '1980-04-31',
+    },
+    {
+      val: startOfDay(new Date(1980, 5, 1)),
+      customLabel: 'Thursday, 1 May 1980',
+      isoLabel: '1980-05-01',
+    },
+    {
+      val: startOfDay(new Date(1980, 5, 2)),
+      customLabel: 'Friday, 2 May 1980',
+      isoLabel: '1980-05-02',
+    },
+    {
+      val: startOfDay(new Date(1980, 5, 3)),
+      customLabel: 'Saturday, 3 May 1980',
+      isoLabel: '1980-05-03',
+    },
+    {
+      val: startOfDay(new Date(1980, 5, 4)),
+      customLabel: 'Sunday, 4 May 1980',
+      isoLabel: '1980-05-04',
+    },
+    {
+      val: startOfDay(new Date(1980, 5, 5)),
+      customLabel: 'Monday, 5 May 1980',
+      isoLabel: '1980-05-05',
+    },
+    {
+      val: startOfDay(new Date(1980, 5, 6)),
+      customLabel: 'Tuesday, 6 May 1980',
+      isoLabel: '1980-05-06',
+    },
+  ],
   formatDateFull: (d: Date) => d.toString(),
   preventKeyboardFocus: false,
   markToday: true,
diff --git a/packages/bpk-component-calendar/src/BpkCalendarWeek.tsx b/packages/bpk-component-calendar/src/BpkCalendarWeek.tsx
index d628e95a15..70c8f15031 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarWeek.tsx
+++ b/packages/bpk-component-calendar/src/BpkCalendarWeek.tsx
@@ -33,6 +33,7 @@ import {
   endOfMonth,
 } from './date-utils';
 
+import type { DateProps } from './BpkCalendarGrid';
 import type {
   DateModifiers,
   SelectionConfiguration,
@@ -40,7 +41,6 @@ import type {
   SelectionConfigurationRange,
 } from './custom-proptypes';
 
-
 import STYLES from './BpkCalendarWeek.module.scss';
 
 const getClassName = cssModules(STYLES);
@@ -103,7 +103,6 @@ function getSelectedDate(
  * Gets the correct selection type for the current date
  * @param {Date} date the current date of the calendar
  * @param {Object} selectionConfiguration the current selection configuration
- * @param {Function} formatDateFull function to format dates
  * @param {Date} month the current month of the calendar
  * @param {Number} weekStartsOn index of the first day of the week
  * @param {Boolean} ignoreOutsideDate ignore date outside current month
@@ -112,7 +111,6 @@ function getSelectedDate(
 function getSelectionType(
   date: Date,
   selectionConfiguration: SelectionConfiguration,
-  formatDateFull: (d: Date) => Date | string,
   month: Date,
   weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6,
   ignoreOutsideDate: boolean,
@@ -130,8 +128,7 @@ function getSelectionType(
   if (
     selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single &&
     selectionConfiguration.date &&
-    (selectionConfiguration.date === formatDateFull(date) ||
-      formatDateFull(selectionConfiguration.date) === formatDateFull(date))
+    isSameDay(date, selectionConfiguration.date)
   ) {
     return SELECTION_TYPES.single;
   }
@@ -171,10 +168,10 @@ function getSelectionType(
     ) {
       return SELECTION_TYPES.middle;
     }
-    if (startDate && formatDateFull(startDate) === formatDateFull(date)) {
+    if (sameStartDay) {
       return SELECTION_TYPES.start;
     }
-    if (endDate && formatDateFull(endDate) === formatDateFull(date)) {
+    if (sameEndDay) {
       return SELECTION_TYPES.end;
     }
   }
@@ -196,11 +193,11 @@ const singleDateHandler = (props: Props, nextProps: Props) => {
 
   if (
     ((nextSelectConfig.date &&
-      isSameWeek(nextSelectConfig.date, nextProps.dates[0], {
+      isSameWeek(nextSelectConfig.date, nextProps.dates[0].val, {
         weekStartsOn: nextProps.weekStartsOn,
       })) ||
       (currentSelectConfig.date &&
-        isSameWeek(currentSelectConfig.date, props.dates[0], {
+        isSameWeek(currentSelectConfig.date, props.dates[0].val, {
           weekStartsOn: props.weekStartsOn,
         }))) &&
     currentSelectConfig.date !== nextSelectConfig.date
@@ -237,8 +234,7 @@ const rangeDateHandler = (props: Props, nextProps: Props) => {
 export type Props = DefaultProps & {
   DateComponent: ElementType;
   dateModifiers: DateModifiers;
-  dates: Date[];
-  formatDateFull: (date: Date) => Date | string;
+  dates: DateProps[];
   preventKeyboardFocus: boolean;
   markToday: boolean;
   markOutsideDays: boolean;
@@ -283,7 +279,6 @@ class BpkCalendarWeek extends Component<Props> {
     const shallowProps = [
       'DateComponent',
       'dateModifiers',
-      'formatDateFull',
       'isKeyboardFocusable',
       'markOutsideDays',
       'markToday',
@@ -305,11 +300,11 @@ class BpkCalendarWeek extends Component<Props> {
     // we'll render, component should update.
     if (
       ((nextProps.focusedDate &&
-        isSameWeek(nextProps.focusedDate, nextProps.dates[0], {
+        isSameWeek(nextProps.focusedDate, nextProps.dates[0].val, {
           weekStartsOn: nextProps.weekStartsOn,
         })) ||
         (this.props.focusedDate &&
-          isSameWeek(this.props.focusedDate, this.props.dates[0], {
+          isSameWeek(this.props.focusedDate, this.props.dates[0].val, {
             weekStartsOn: this.props.weekStartsOn,
           }))) &&
       this.props.focusedDate !== nextProps.focusedDate
@@ -363,7 +358,6 @@ class BpkCalendarWeek extends Component<Props> {
       dateModifiers,
       dateProps,
       focusedDate,
-      formatDateFull,
       ignoreOutsideDate,
       isKeyboardFocusable,
       markOutsideDays,
@@ -380,7 +374,7 @@ class BpkCalendarWeek extends Component<Props> {
 
     if (ignoreOutsideDate) {
       const daysOutside = this.props.dates.map((date) =>
-        isSameMonth(date, month),
+        isSameMonth(date.val, month),
       );
 
       const shouldRender = daysOutside.reduce(or);
@@ -395,13 +389,12 @@ class BpkCalendarWeek extends Component<Props> {
         {this.props.dates.map((date) => {
           const isBlocked =
             minDate && maxDate
-              ? !isWithinRange(date, { start: minDate, end: maxDate })
+              ? !isWithinRange(date.val, { start: minDate, end: maxDate })
               : false;
 
           const dateSelectionType = getSelectionType(
-            date,
+            date.val,
             selectionConfiguration!,
-            formatDateFull,
             month,
             weekStartsOn,
             ignoreOutsideDate!,
@@ -410,25 +403,26 @@ class BpkCalendarWeek extends Component<Props> {
           return (
             <DateContainer
               className={cellClassName}
-              isEmptyCell={!isSameMonth(date, month) && ignoreOutsideDate!}
+              isEmptyCell={!isSameMonth(date.val, month) && ignoreOutsideDate!}
               isBlocked={isBlocked}
-              key={date.getDate()}
+              key={date.val.getDate()}
               selectionType={dateSelectionType}
             >
               <DateComponent
-                date={date}
+                date={date.val}
                 modifiers={dateModifiers}
-                aria-label={formatDateFull(date)}
+                aria-label={date.customLabel}
                 onClick={onDateClick}
                 onDateKeyDown={onDateKeyDown}
                 preventKeyboardFocus={preventKeyboardFocus}
                 isKeyboardFocusable={isKeyboardFocusable}
-                isFocused={focusedDate && isSameDay(date, focusedDate)}
-                isSelected={getSelectedDate(date, selectionConfiguration!)}
+                isFocused={focusedDate && isSameDay(date.val, focusedDate)}
+                isSelected={getSelectedDate(date.val, selectionConfiguration!)}
                 isBlocked={isBlocked}
-                isOutside={markOutsideDays && !isSameMonth(date, month)}
-                isToday={markToday && isToday(date)}
+                isOutside={markOutsideDays && !isSameMonth(date.val, month)}
+                isToday={markToday && isToday(date.val)}
                 selectionType={dateSelectionType}
+                isoLabel={date.isoLabel}
                 {...dateProps}
               />
             </DateContainer>
diff --git a/packages/bpk-component-calendar/src/composeCalendar.tsx b/packages/bpk-component-calendar/src/composeCalendar.tsx
index 178f3e618b..3293bbf677 100644
--- a/packages/bpk-component-calendar/src/composeCalendar.tsx
+++ b/packages/bpk-component-calendar/src/composeCalendar.tsx
@@ -211,7 +211,7 @@ const composeCalendar = (
           DateComponent={CalendarDate}
           dateModifiers={dateModifiers}
           daysOfWeek={daysOfWeek}
-          formatDateFull={formatDateFull}
+          formatDateFull={memoize(formatDateFull)}
           formatMonth={memoize(formatMonth)}
           month={month}
           onDateClick={onDateClick}
diff --git a/packages/bpk-component-calendar/src/date-utils.ts b/packages/bpk-component-calendar/src/date-utils.ts
index 6d6a101efb..b3db6189d3 100644
--- a/packages/bpk-component-calendar/src/date-utils.ts
+++ b/packages/bpk-component-calendar/src/date-utils.ts
@@ -20,8 +20,8 @@ import { addDays } from 'date-fns/addDays';
 import { addMonths } from 'date-fns/addMonths';
 import { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths';
 import { endOfMonth } from 'date-fns/endOfMonth';
-import { format }from 'date-fns/format';
-import { getDay  }from 'date-fns/getDay';
+import { format } from 'date-fns/format';
+import { getDay } from 'date-fns/getDay';
 import { isAfter } from 'date-fns/isAfter';
 import { isBefore } from 'date-fns/isBefore';
 import { isSameDay } from 'date-fns/isSameDay';
@@ -38,6 +38,7 @@ import { setYear } from 'date-fns/setYear';
 import { startOfDay } from 'date-fns/startOfDay';
 import { startOfMonth } from 'date-fns/startOfMonth';
 
+import type { DateProps } from './BpkCalendarGrid';
 import type { DaysOfWeek } from './custom-proptypes';
 
 const ONE_MINUTE_IN_MS = 60 * 1000;
@@ -97,7 +98,23 @@ function startOfWeek(
   return [date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()];
 }
 
-function getCalendarMonthWeeks(date: Date, weekStartsOn: number) {
+function getCalendarNoCustomLabel(date: Date, weekStartsOn: number) {
+  return getCalendarMonthWeeks(date, weekStartsOn);
+}
+
+function getCalendar(
+  date: Date,
+  weekStartsOn: number,
+  formatDate: (d: Date) => Date | string,
+) {
+  return getCalendarMonthWeeks(date, weekStartsOn, formatDate);
+}
+
+function getCalendarMonthWeeks(
+  date: Date,
+  weekStartsOn: number,
+  formatDate?: (d: Date) => Date | string,
+): DateProps[][] {
   let [year, month, day] = startOfWeek(
     date.getFullYear(),
     date.getMonth(),
@@ -110,7 +127,12 @@ function getCalendarMonthWeeks(date: Date, weekStartsOn: number) {
   for (let i = 0; i < 6; i += 1) {
     const currWeek = [];
     for (let j = 0; j < 7; j += 1) {
-      currWeek.push(dateAtStartOfDay(year, month, day));
+      const currDate = dateAtStartOfDay(year, month, day);
+      currWeek.push({
+        val: currDate,
+        isoLabel: formatIsoDate(currDate),
+        customLabel: formatDate ? formatDate(currDate) : '',
+      });
       [year, month, day] = addDay(year, month, day);
     }
     weeksInMonth.push(currWeek);
@@ -196,7 +218,8 @@ const formatIsoDate = (date: Date) => format(date, 'yyyy-MM-dd');
 const formatIsoMonth = (date: Date) => format(date, 'yyyy-MM');
 
 export {
-  getCalendarMonthWeeks,
+  getCalendar,
+  getCalendarNoCustomLabel,
   getFirstDayOfWeekend,
   getLastDayOfWeekend,
   getMonthsInRange,
diff --git a/packages/bpk-component-carousel/src/utils.test.tsx b/packages/bpk-component-carousel/src/utils-test.tsx
similarity index 83%
rename from packages/bpk-component-carousel/src/utils.test.tsx
rename to packages/bpk-component-carousel/src/utils-test.tsx
index bce8802c0b..f0fb0856d2 100644
--- a/packages/bpk-component-carousel/src/utils.test.tsx
+++ b/packages/bpk-component-carousel/src/utils-test.tsx
@@ -16,14 +16,17 @@
  * limitations under the License.
  */
 
-import { renderHook } from '@testing-library/react'
+import { renderHook } from '@testing-library/react';
 
 import { useScrollToInitialImage } from './utils';
 
 describe('useScrollToInitialImage', () => {
   it('should scroll to initial image on mount', () => {
+    const element = document.createElement('div');
+    element.scrollIntoView = jest.fn();
+
     const imagesRef = {
-      current: [document.createElement('div'), document.createElement('div')],
+      current: [element, document.createElement('div')],
     };
     const initialImageIndex = 0;
 
diff --git a/packages/bpk-react-utils/index.ts b/packages/bpk-react-utils/index.ts
index 5345efabc7..26c22c1cee 100644
--- a/packages/bpk-react-utils/index.ts
+++ b/packages/bpk-react-utils/index.ts
@@ -44,7 +44,7 @@ export {
   isDeviceIos,
   isRTL,
   BpkDialogWrapper,
-  setNativeValue
+  setNativeValue,
 };
 export default {
   Portal,
@@ -58,5 +58,5 @@ export default {
   isDeviceIos,
   isRTL,
   BpkDialogWrapper,
-  setNativeValue
+  setNativeValue,
 };
diff --git a/packages/bpk-react-utils/src/__mocks__/deferCallback.ts b/packages/bpk-react-utils/src/__mocks__/deferCallback.ts
new file mode 100644
index 0000000000..d788e3b284
--- /dev/null
+++ b/packages/bpk-react-utils/src/__mocks__/deferCallback.ts
@@ -0,0 +1,29 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Mock deferCallback to immediately invoke the callback. This ensures that
+ * asynchronous state updates triggered by `deferCallback` run before asserting.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
+ * @param {function} callback - callback to execute, value cannot be returned.
+ * You'll typically want to wrap the callback `setState` to update React state.
+ * @returns {void}
+ */
+export default function deferCallback(callback: () => void) {
+  callback();
+}
diff --git a/packages/bpk-react-utils/src/deferCallback-test.ts b/packages/bpk-react-utils/src/deferCallback-test.ts
new file mode 100644
index 0000000000..1444b07597
--- /dev/null
+++ b/packages/bpk-react-utils/src/deferCallback-test.ts
@@ -0,0 +1,49 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import deferCallback from './deferCallback';
+
+jest.unmock('./deferCallback');
+
+describe('deferCallback', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should use requestIdleCallback if available', () => {
+    const callback = jest.fn();
+    window.requestIdleCallback = jest.fn();
+
+    deferCallback(callback);
+
+    expect(window.requestIdleCallback).toHaveBeenCalledWith(callback, {
+      timeout: 500,
+    });
+  });
+
+  it('should use setTimeout if requestIdleCallback is not available', () => {
+    const callback = jest.fn();
+    // @ts-expect-error - setTimeout should never be undefined in a browser context.
+    window.requestIdleCallback = undefined;
+    jest.spyOn(window, 'setTimeout');
+
+    deferCallback(callback);
+
+    expect(window.setTimeout).toHaveBeenCalledWith(callback, 0);
+  });
+});
diff --git a/packages/bpk-react-utils/src/deferCallback.ts b/packages/bpk-react-utils/src/deferCallback.ts
new file mode 100644
index 0000000000..8517008e42
--- /dev/null
+++ b/packages/bpk-react-utils/src/deferCallback.ts
@@ -0,0 +1,38 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Defer a task until the browser is idle, or till the next "tick" if the
+ * browser does not support the idle callback API. This is useful for deferring
+ * computationally heavy, non-essential tasks to keep the UI responsive. If the
+ * task has not completed within the timeout, it will be executed regardless.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
+ * @param {function} callback - callback to execute, value cannot be returned.
+ * You'll typically want to wrap the callback `setState` to update React state.
+ * @returns {void}
+ */
+const deferCallback = (callback: () => void) => {
+  if (window.requestIdleCallback) {
+    window.requestIdleCallback(callback, { timeout: 500 });
+  } else {
+    setTimeout(callback, 0);
+  }
+};
+
+export default deferCallback;
diff --git a/scripts/jest/setup.js b/scripts/jest/setup.js
index 1f5461a346..ecf96a801c 100644
--- a/scripts/jest/setup.js
+++ b/scripts/jest/setup.js
@@ -19,7 +19,7 @@
 import 'jest-axe/extend-expect';
 import '@testing-library/jest-dom';
 import 'raf/polyfill';
-import { TextEncoder } from 'util'
+import { TextEncoder } from 'util';
 
 import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
 
@@ -32,5 +32,7 @@ jest.doMock('react', () => {
   }
   return mockActualReact;
 });
-global.TextEncoder = TextEncoder; 
+global.TextEncoder = TextEncoder;
 registerRequireContextHook();
+
+jest.mock('../../packages/bpk-react-utils/src/deferCallback');