formatters-provider

Since: ver.10.0.0

When dealing with numerous Formatter components (or hooks) on the same page you might face performance issues due to the number of instances of Internationalization objects created since each usage of a formatter will create a new instance.

On the majority of the cases, these instances could be shared between the components (or hooks) and save the browser precious resources.

In order to solve that we created the FormattersProvider component, which will take care of only creating and storing new internationalization instances if they are unique.

The formatter components (and hooks) sharing a same provider will search for the formatter they need in the FormattersProvider first, before creating a new instance for themselves.

There are virtually no downsides to using the provider, unless you intend to use only a few (less than 10) formatters on the page.

Example

Although we use a total of 13 formatter components on this example, there are only 5 instances stored in the provider and being used to format the dates and durations.

You can verify it by using the the React Developer Tools plugin and inspecting the FormatterProvider state.

Just wrap all the formatters with the FormattersProvider component and let it shine:

import { FormattersProvider, Box, Connection, ConnectionTitle, ConnectionStop, ConnectionTime, Duration, DateTime } from '@flixbus/honeycomb-react';
import { Icon, IconArrowRightArcDots, IconCalendar } from '@flixbus/honeycomb-icons-react';

<FormattersProvider>
  <Connection title={<ConnectionTitle text={<DateTime dateFormat="day, Mon D YYYY" date={new Date('2024-05-17T19:10:00')} />} plusDays="+1 day" />}>
    <ConnectionStop station="Berlin Alexanderplatz" time={<ConnectionTime time={<DateTime displayTime date={new Date('2024-05-17T19:10:00')} />} />} />
    <ConnectionStop
      station="Berlin Airport BER, T 1/2"
      time={
        <ConnectionTime time={(<>
          <Duration label="Duration: " duration={{ minutes: 5 }} />
          {' '}
          <DateTime displayTime date={new Date('2024-05-17T19:50:00')} />
        </>)} />
      }
    />
    <ConnectionStop station="Halle" time={<ConnectionTime time={<DateTime displayTime date={new Date('2024-05-17T22:00:00')} />} />} />
  </Connection>
  <Box small appearance="dimmed">
    <Icon InlineIcon={IconArrowRightArcDots} /> Transfer time: <Duration duration={{ hours: 2, minutes: 35 }} />
  </Box>
  <Connection>
    <ConnectionStop station="Halle" time={<ConnectionTime time={<DateTime displayTime date={new Date('2024-05-18T00:35:00')} />} />} />
    <ConnectionStop
      station="Bayreuth main station"
      time={
        <ConnectionTime time={(<>
          <Duration label="Duration: " duration={{ minutes: 5 }} />
          {' '}
          <DateTime displayTime date={new Date('2024-05-18T03:00:00')} />
        </>)} />
      }
    />
    <ConnectionStop
      station="Nuremberg"
      time={
        <ConnectionTime time={(<>
          <Duration label="Duration: " duration={{ minutes: 10 }} />
          {' '}
          <DateTime displayTime date={new Date('2024-05-18T04:10:00')} />
        </>)} />
      }
    />
    <ConnectionStop station={<strong>Munich Fröttmaning</strong>} time={<ConnectionTime time={<strong><DateTime displayTime date={new Date('2024-05-18T06:10:00')} /></strong>} />} />
  </Connection>
  <Box small appearance="dimmed">
    <Icon InlineIcon={IconCalendar} /> Arrival on <DateTime dateFormat="day, Mon D" date={new Date('2024-05-18T06:10:00')} />
  </Box>
</FormattersProvider>
import { FormattersProvider, Box, Connection, ConnectionTitle, ConnectionStop, ConnectionTime, Duration, DateTime } from '@flixbus/honeycomb-react';
import { Icon, IconArrowRightArcDots, IconCalendar } from '@flixbus/honeycomb-icons-react';

<FormattersProvider>
  <Connection title={<ConnectionTitle text={<DateTime dateFormat="day, Mon D YYYY" date={new Date('2024-05-17T19:10:00')} />} plusDays="+1 day" />}>
    <ConnectionStop station="Berlin Alexanderplatz" time={<ConnectionTime time={<DateTime displayTime date={new Date('2024-05-17T19:10:00')} />} />} />
    <ConnectionStop
      station="Berlin Airport BER, T 1/2"
      time={
        <ConnectionTime time={(<>
          <Duration label="Duration: " duration={{ minutes: 5 }} />
          {' '}
          <DateTime displayTime date={new Date('2024-05-17T19:50:00')} />
        </>)} />
      }
    />
    <ConnectionStop station="Halle" time={<ConnectionTime time={<DateTime displayTime date={new Date('2024-05-17T22:00:00')} />} />} />
  </Connection>
  <Box small appearance="dimmed">
    <Icon InlineIcon={IconArrowRightArcDots} /> Transfer time: <Duration duration={{ hours: 2, minutes: 35 }} />
  </Box>
  <Connection>
    <ConnectionStop station="Halle" time={<ConnectionTime time={<DateTime displayTime date={new Date('2024-05-18T00:35:00')} />} />} />
    <ConnectionStop
      station="Bayreuth main station"
      time={
        <ConnectionTime time={(<>
          <Duration label="Duration: " duration={{ minutes: 5 }} />
          {' '}
          <DateTime displayTime date={new Date('2024-05-18T03:00:00')} />
        </>)} />
      }
    />
    <ConnectionStop
      station="Nuremberg"
      time={
        <ConnectionTime time={(<>
          <Duration label="Duration: " duration={{ minutes: 10 }} />
          {' '}
          <DateTime displayTime date={new Date('2024-05-18T04:10:00')} />
        </>)} />
      }
    />
    <ConnectionStop station={<strong>Munich Fröttmaning</strong>} time={<ConnectionTime time={<strong><DateTime displayTime date={new Date('2024-05-18T06:10:00')} /></strong>} />} />
  </Connection>
  <Box small appearance="dimmed">
    <Icon InlineIcon={IconCalendar} /> Arrival on <DateTime dateFormat="day, Mon D" date={new Date('2024-05-18T06:10:00')} />
  </Box>
</FormattersProvider>