Clarification: Wrapping Intl.NumberFormatter format function in an atom/atomFamily

[peterpme]

Hello!

I've been trying to figure out how I could wrap Intl.NumberFormatter in an atom/atomFamily. I know functions need to be wrapped in an object like this: const fn = atom({ fn: () => {} })

My ideal scenario would be something like this:

function Display() {
  const formatter = useAtomValue(numberFormatter({ maximumFractionDigits: 8 }))
  return <p>{formatter.format(100)}</p>
}

or this

const format = useAtomValue(numberFormatter({ maximumFractionDigits: 8 }))
return <p>{format(100)}</p>

Weirdly, any version I try ends up in a "maximum callstack exceeded" error:

const formatterAtom = atomFamily((options: Intl.NumberFormatOptions) => {
  return atom(() => {
    const formatter = new Intl.NumberFormat(navigator.language, options);
    return {
      format: (value: number) => {
        const str = formatter.format(value);
        return str;
      },
    };
  });
});

I feel like I'm very close but I'm getting something wrong. Does anyone know? Thank you!

[rothsandro]

The object passed to atomFamily changes on every render, this creates a new atom on every render resulting in this error. Either pass a stable object - with useMemo or move it out of the component if it doesn't depend on props/state - or use the areEqual argument with a custom compare function as shown in the docs: https://jotai.org/docs/utilities/family

[dmaskasky]

function createMemoizedNumberFormatterFamily(): (
  options: Intl.NumberFormatOptions
) => Atom<Intl.NumberFormat> {
  const numberFormatterFamily = atomFamily(
    (options: Intl.NumberFormatOptions): Atom<Intl.NumberFormat> => {
      const formatObjAtom = atom({
        fn: new Intl.NumberFormat(navigator.language, options),
      });
      return atom((get) => get(formatObjAtom).fn);
    }
  );
  const keyMap = new Map<string, Intl.NumberFormatOptions>();
  return function getNumberFormatAtom(options: Intl.NumberFormatOptions) {
    const keyString = stableStringify(options);
    if (!keyMap.has(keyString)) {
      keyMap.set(keyString, options);
    }
    const stableOptions = keyMap.get(keyString)!;
    return numberFormatterFamily(stableOptions);
  };
}

function stableStringify(obj: unknown): string {
  if (Array.isArray(obj)) {
    return JSON.stringify(obj.map(stableStringify));
  }
  if (typeof obj === "object" && obj !== null) {
    const sortedKeys = Object.keys(obj).sort();
    const sortedObj: Record<string, string> = {};
    for (const key of sortedKeys) {
      sortedObj[key] = stableStringify(obj[key]);
    }
    return JSON.stringify(sortedObj);
  }
  return JSON.stringify(obj);
}

const numberFormatterFamily = createMemoizedNumberFormatterFamily();

[peterpme]

Hi @rothsandro and @dmaskasky I think I was able to get it working with both of your examples put together, thank you!
I think areEqual is exactly what I was missing. I whipped up an areEqual function for now.

@dmaskasky although I can see what stableStringify and numberFormatter are doing, I couldn't exactly figure out how to use that in a react component since numberFormatter looks like a function and using _numberFormatter directly did not utilize those functions. Am I missing something?

Here's what I did get working and I feel like these are functionally equivalent. Both memoAtom and atomAtom will re-use the same instance if it's already being created:

const areEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
const atomAtom = atomFamily((options) => {
  const formatObjAtom = atom({
    fn: new Intl.NumberFormat(navigator.language, options),
  });
  return atom((get) => get(formatObjAtom).fn);
}, areEqual);

const memoAtom = atomFamily((options) => {
  const formatObjAtom = useMemo(() => {
    return new Intl.NumberFormat(navigator.language, options)
  }, [options])

  return atom(() => {
    return {
      format: (value: number) => {
        return formatObjAtom.format(value)
      }
    }
  })
}, areEqual);

Follow up thoughts:

• Both memoAtom and atomAtom will re-use the same instance if it's already been created. Both return an fn key.
• Would there be an argument for why I would choose one over the other? My gut says to go with an atom
• Unrelated question, but this is a fascinating development for me: can I use useEffect and hooks inside an atomFamily? Pardon my ignorance but I never knew this was possible!

Thanks again!

[dmaskasky]

I don't think you can use a useMemo inside atomFamily. That would violate rules of hooks.

[peterpme]

I didn't think so myself, but it seemed to work! That being said, I will opt for the atom example instead.

[dmaskasky]

@dmaskasky although I can see what stableStringify and numberFormatter are doing, I couldn't exactly figure out how to use that in a react component since numberFormatter looks like a function and using _numberFormatter directly did not utilize those functions. Am I missing something?

Happy to explain my code. Here's a simple codesandbox to start 😊.

I realize I should have taken more time to prepare my answer. There were several mistakes in my original solution. I've corrected them now.

createMemoizedNumberFormatterFamily doesn't accept any arguments. It sets up initial conditions (map + atomFamily), to be used later. This is the key component of memoizing the Intl.NumberFormatOptions. The key observation is that Intl.NumberFormatOptions is a serializable object. JSON.stringify is decent option but a stable stringify is best - it protects against some edge cases where the order in which props are created differ, resulting on a different string representation.

createMemoizedNumberFormatterFamily returns a "family" that accepts NumberFormatOptions. Since these are memoized, it is safe to construct and pass object to in in render without needing useMemo.

Let me know if you have any further questions.

---

You implementation looks mostly correct. But I'm concerned about the useMemo inside the atomFamily. The atomFamily callback will be called on every render if you are passing a new object each time, but this defeats the purpose of memoization. In other words, you would need to violate the rules of hooks to achieve memoization.

I think along the lines of what you have built, something like this could work:
1.

const areEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
const formatFamily = atomFamily((options) => {
  const formatObjAtom = atom({
    fn: new Intl.NumberFormat(navigator.language, options),
  });
  return atom((get) => get(formatObjAtom).fn);
}, areEqual);

function Display() {
  const formatter = useAtomValue(formatFamily({ maximumFractionDigits: 8 }))
  return <p>{formatter.format(100)}</p>
}

const formatFamily = atomFamily((options) => {
  const formatObjAtom = atom({
    fn: new Intl.NumberFormat(navigator.language, options),
  });
  return atom((get) => get(formatObjAtom).fn);
});

const displayFormatAtom = formatFamily({ maximumFractionDigits: 8 })

function Display() {
  const formatter = useAtomValue(displayFormatAtom)
  return <p>{formatter.format(100)}</p>
}

const formatFamily = atomFamily((options) => {
  const formatObjAtom = atom({
    fn: new Intl.NumberFormat(navigator.language, options),
  });
  return atom((get) => get(formatObjAtom).fn);
});


function Display() {
  const displayOptions = useMemo(() => ({ maximumFractionDigits: 8 }),[])
  const formatter = useAtomValue(formatFamily(displayOptions))
  return <p>{formatter.format(100)}</p>
}

const formatFamily = atomFamily((options) => {
  const formatObjAtom = atom({
    fn: new Intl.NumberFormat(navigator.language, options),
  });
  return atom((get) => get(formatObjAtom).fn);
});


function Display() {
  const displayFormatAtom = useMemo(() => formatFamily({ maximumFractionDigits: 8 }),[])
  const formatter = useAtomValue(displayFormatAtom)
  return <p>{formatter.format(100)}</p>
}

[peterpme]

Hi @dmaskasky thank you so much for your help! I hadn't even thought about #2 (or even 3/4).

Option 1 feels like the best of both worlds for me so that's what I'm going to run with for now. Thanks again!

[peterpme]

After reviewing your codesandbox example with the memoizedAtomFamily, why do that vs something like this?

const areEqual = (a, b) => stableStringify(a) === stableStringify(b) // convert to stableStringify
const formatFamily = atomFamily((options) => {
  const formatObjAtom = atom({
    fn: new Intl.NumberFormat(navigator.language, options),
  });
  return atom((get) => get(formatObjAtom)); // dropped the fn here and returns the object
}, areEqual);

function Display() {
  const formatter = useAtomValue(formatFamily({ maximumFractionDigits: 8 }))
  return <p>{formatter.format(100)}</p>
}

I would assume that with a stableStringify function there would be no additional need for a memoizedAtomFamily? Is there something I'm overlooking?

If I were to answer this on my own: It looks like an alternative approach to areEqual. Instead of that, you're relying on an internal cache to return the correct atomFamily. Does that sound right?

Thank you!

[dmaskasky]

I maintain jotai-family, the next generation of the utility. There are plans to deprecate atomFamily in jotai/utils.

We're not really happy with how bloated the atomFamily api has become. I'm not sure whether we will keep areEqual. It's convenient, but it doesn't really feel necessary. Much of the bloat for this library is the same situation.

Feedback is always welcome. If you find it to be strictly necessary, this is helpful to know. Let me know if you have any other questions.

[peterpme]

That is very good to know. Thank you!