Why pluralization matters in React

We often encounter apps that display awkward messages like:

You have 1 new message(s)

This is a telltale sign of a developer who hasn't thought carefully about user experience.

React apps often need to handle pluralization — for notification counts, list lengths, or search results. And it's not that hard to get pluralization right, especially if you only need your app in English. But there are plenty of bad practices new developers fall into, especially when building multilingual interfaces.

This guide covers how to handle English plurals cleanly, format numbers for different locales, and build a fully multilingual plural system in React and Next.js.

The problem with hard-coded plurals

Many projects — including surprisingly large and important ones — hard-code plural logic.

export default function Example({ n }) {
  return (
    <p>
      Displaying {n} item{n === 1 ? '' : 's'}
    </p>
  )
}

But pluralization is often more complex than just adding an "s" to the end of a word. Some nouns have irregular plural forms, like "child" and "children". Sometimes, other parts of the sentence also need to change to reflect the noun, like "is" and "are" depending on the count.

The table below illustrates some common scenarios:

Using conditional expressions quickly becomes unwieldy.

And it becomes a nightmare when you need to ship your app in other languages. What works for English often breaks completely in languages like Polish or Arabic, which have entirely different rules for handling quantities. Companies we work with often put off internationalization because of the pain of refactoring hardcoded UI like this.

How to handle plurals in English

In English, using the right plurals in your app is usually straightforward.

For simple noun pluralization, write a utility function:

export function pluralize(
  count: number,
  singular: string,
  plural: string = singular + 's'
) {
  return `${count === 1 ? singular : plural}`;
}

Now there is a single function for handling all your plural logic, and it works for irregular plurals too:

pluralize(2, 'user') // "users"
pluralize(2, 'person', 'people') // "people"
pluralize(2, 'child', 'children') // "children"

But what if you need more complicated logic, like:

"No one is watching"
"1 person is watching"
"2 people are watching"

At this stage, you should think seriously about a low-maintenance internationalization ("i18n") library.

Although developers often think that i18n libraries are only for multilingual interfaces, they can be very useful for plural and variable formatting even in single-language applications. Under the hood, most i18n libraries use JavaScript's built-in Intl.PluralRules API to determine the correct plural form for any language.

There are plenty of React i18n libraries, including ours, gt-react (or gt-next if you're using Next.js). Displaying an English plural using gt-react is simple:

import { Plural } from 'gt-react'

function Example({ count }) {
  return (
    <Plural n={count} zero={'No one is watching'} one={`${count} person is watching`}>
      {count} people are watching
    </Plural>
  )
}

UI is conditionally rendered based on the value of n.

Most libraries use JavaScript's Intl.PluralRules API to decide which plural form to display. This means that in English, you would use the name "one" to refer to a singular and "other" to refer to a plural. Our <Plural> component falls back to its children if the number provided to n doesn't match any of the provided props.

Using a library here is best practice even for English-only applications, and makes future internationalization much easier.

Pluralization in multilingual React apps (i18n)

If your app only serves English-speaking users, the approach above may be all you need — but most production apps eventually need to support multiple languages. That's where things get interesting.

• In Arabic, nouns have different forms depending on whether there are zero, one, two, or many of them
• In Spanish, German, and Italian, large numbers use periods instead of commas, so 1,000,000 becomes 1.000.000
• In Hindi, digits are grouped in pairs, so 1,000,000 would become 10,00,000

For an internationalized app, you should use a dedicated i18n library which will have its own documentation on how to handle plurals and number formatting.

Formatting numbers for different locales

You can use the Intl object to format numbers for any locale. The easiest way to do this is with the built-in toLocaleString() method.

By default, this will use the runtime's current locale:

const n = 1000000
n.toLocaleString() // displays 1,000,000 when the runtime locale is "en-US" (American English)
n.toLocaleString('de') // 1.000.000 because the locale has been specified as "de" (German)

gt-react also offers a <Num> component which relies on Intl.NumberFormat under the hood.

import { Num } from 'gt-react'

// displays 1,000,000 when the language is "en-US"
// displays 1.000.000 when the language is "de"
// displays 10,00,000 when the language is "hi"
export default function Example() {
  return <Num>1000000</Num>
}

Understanding plural forms across languages

The six plural forms supported by JavaScript's Intl.PluralRules API are: zero, one, two, few, many, other. Although English uses only one ("singular") and other ("plural"), languages like Arabic and Polish have more than just these two forms.

For example, an English-speaking user might expect:

"No one is watching"
"1 person is watching"
"2 people are watching"

Whereas an Arabic-speaking user might expect different expressions for singular, dual (when the count is exactly two things), and small and large plural forms:

"لا أحد يشاهد"
"1 شخص يشاهد"
"2 شخصان يشاهدان"
"3 أشخاص يشاهدون"
"11 شخصاً يشاهدون"

This is where an internationalization library becomes essential. Every language has its own logic for when and how to display plurals, so it's better to rely on a dedicated library to get it right.

A good i18n library will do two things:

1. Decide which plural form (one, many, other, etc.) to use based on the locale
2. Locate the translation in the right language which corresponds to that form

If you already have an internationalization library, check their docs for information on plural formatting. Almost all libraries have dedicated documentation on rendering plurals.

Full example: plurals in a multilingual React app

If you don't already have an internationalization library, consider gt-react!

gt-react's <Plural> component:

• Is a simple, declarative way to render plurals correctly in React
• Works natively with the <Num> formatting component
• Works natively with the <T> translation component, which integrates with our free translation service to generate plural forms automatically

Putting all the building blocks together, here's a complete multilingual component:

import { T, Plural, Num } from 'gt-react'

// Works out of the box in 100+ languages
function Example({ count }) {
  return (
    <T>
      <Plural
        n={count}
        zero={'No one is watching'}
        one={
          <>
            <Num>{count}</Num> person is watching
          </>
        }
      >
        <Num>{count}</Num> people are watching
      </Plural>
    </T>
  )
}

Next steps

Ready to handle plurals properly in your React app? Check out our quickstart guides:

• gt-react quickstart for React apps
• gt-next quickstart for Next.js apps
• <Plural> API reference for the full component API

Pluralization is one of the most common i18n challenges in React — getting it right from the start saves significant refactoring later.