Best way to create utility functions for use in async and sync components.

[jamiematthews21]

I'm currently in the process of added next-intl to our project. We have a utility function that allows us to format a distance. This function takes two parameters, the unit system, which is either metric or imperial, and whether the unit of measure should be abbreviated (e.g. metres vs m). The returned output should be a string such as "3m" or "3 feet" etc.

I was able to create a hook function that encloses useTranslations():

export function useFormatDistance() {
    const t = useTranslations("unit_formats");

    return ({ distance, unitSystem, useAbbreviation }: FormatOptions) => {
        // ... formatting logic
    };
}

This solution works perfectly, however it cannot be used within async components as I'm using useTranslations() instead of await getTranslations(). As far as I can tell, it is not possible to pass the results of get/useTranslations() to utility functions as no TypeScript type is provided for that, which is by design.

Is the solution to have two functions, one for async components and one for not, which then called a shared formatDistance() function and they pass in each of the required translations individually?

function formatDistance ({ distance, unitSystem, useAbbreviation, translations }: FormatOptionsWithTranslations) {
    // ... formatting logic
} 

export function useFormatDistance() {
    const t = useTranslations("unit_formats");

    return ({ distance, unitSystem, useAbbreviation }: FormatOptions) => {
        const translations = { ... } // include all translations that the `formatDistance()` may require. 
        formatDistance({distance, unitSystem, useAbbreviation, translations});
    };
}

export async function getFormatDistance() {
    const t = await getTranslations("unit_formats");

    return ({ distance, unitSystem, useAbbreviation }: FormatOptions) => {
        const translations = { ... } // include all translations that the `formatDistance()` may require. 
        formatDistance({distance, unitSystem, useAbbreviation, translations});
    };
}

The downside of this is composing the translations object to pass to the formatDistance() function can become extremely bulky and tedious and every utility function we want to support in async and non-async components requires 3 functions. Passing the t objects would be far easier, if that was a supported option.

Any input would be greatly appreciated 😊

[amannn]

This is a good question, yes! The fact that hooks can currently not be called in async components unfortunately makes this a bit unwieldy.

Would it really help though to pass a t function to formatDistance? You could read the translations there, but the call to useTranslations / getTranslations would still have to happen in a separate function and the behavior needs to be forked to either use a hook or await from the promise-returning getTranslations. There also needs to be a strong guarantee that {use,get}Translations was called for unit_formats, any other t function wouldn't work.

Depending on your use case, maybe a component like <FormatDistance /> could work to encapsulate the logic? This could be rendered in both async and non-async components.

[jamiematthews21]

Correct me if I'm wrong, but I think if it were possible to pass the t function from both useTranslations() or await getTranslations(), these functions could be refactored into something like:

export function formatDistance({ distance, unitSystem, useAbbreviation, t }: FormatOptions) {
    // ... formatting logic that returns string based on values from t
}

Then either async or non-async components calling this code just needs to pass the t object which they get via useTranslations() or await getTranslations():

export async function AsyncComponent() {
    const t = await getTranslations();
    ...

    return (
        <>
            ...
            {formatDistance({ distance, unitSystem, useAbbreviation: true, t })}
        </>
    )
} 

This would then allow for a single use function where the translations just need to be passed in from the Component calling it.

The idea of using a <FormatDistance /> I think would also work for us, but I can see there may be scenarios where someone else in a similar situation may want to get the result of formatDistance() and then either pass that into a second function or do more with it before rendering it as a React component.

[amannn]

Yep, that's true. The t function needs to be unscoped in this case though, containing all possible translations. That in turn could make the usage of t harder in the calling component, if it also has to render translations. This sounds like an indicator to me that t should really be retrieved as part of your format distance utility (whether it's an async function, hook or component).

Personally, I like to use async components rather sparingly for data fetching and typically leave all rendering behavior to non-async components. This has the nice side effect that aspects like testing, isolated rendering in Storybook etc., work without tradeoffs. In this case it'd also help to offer a single useDistanceFormatter hook.

I'm a bit bullish on creating t directly at call sites, because there's a plan to use this information in the future for compiler-based tree shaking (see #1).

If you really prefer to pass the t function, there's nothing stopping you from doing this from the JavaScript side—you'd only have to silence TypeScript I guess.

[jamiematthews21]

Thanks for the information. I think the plan for our team is to use our useFormatDistance() hook going forward and then wrap it in a component if we need to use it in an async component 😁 Thank you for your help today and spending the time to answer my questions, it's been a great help. Looking forward to seeing how next-intl progresses, so far I've been very impressed

[amannn]

Sounds great! Cool, glad to be of help and thank you for the thoughtful, critical questions! 🙌