[HOLD for payment 2024-08-02] Moize - general purpose memoization tool

[kacper-mikolajczak]

In order to properly evaluate if a new library can be added to package.json, please fill out this request form. It will be automatically assigned someone from our review team that will go through and vet the library.

In order to add any new production dependency, it must be approved by the App Deployer team. They will evaluate the library and decide if it's something we want to move forward with or if other alternatives should be explored.

Note: This is only for production dependencies. While we don't want people to add packages to dev-dependencies willy-nilly, we recognize that there isn't as great of a need there to secure them.

Name of library: Moize

Details

• Link to package: https://github.com/planttheidea/moize
• Problem solved by using this package: App as of now, does not have a standardized way of handling memoization outside of React. It boils down to using custom-made solutions like Maps or serialization. This is a problem because engineers implementing and reviewing solutions for memoization outside of React have to sink time into writing and creating a custom solution that may not be consistent with other places in the codebase. This leads to inconsistency, overhead, and at times sub-optimal solutions.
• Number of stars in GH: 880
• Number of monthly downloads: 222,725 weekly!
• Number of releases in the last year: 5
• Level of activity in the repo: 17 contributors, 313 deployments, 3 issues, 6 PRs
• Alternatives: List of alternatives and benchmarks
• Are security concerns brought up and addressed in the library's repo? No
• How many dependencies does this lib use that will be brought into our code? At most 1 (It uses 2 deps: fast-equals and micro-memoize but fast-equals is already used, not sure about micro-memoize)
• What will the effect be on the bundle size of our code? Bundlephobia report of current moize version

Issue Owner

Current Issue Owner: @puneetlath

[melvin-bot]

Triggered auto assignment to @puneetlath (AutoAssignerAppLibraryReview), see https://stackoverflowteams.com/c/expensify/questions/17737 for more details.

[melvin-bot]

New Library Review

• Are all the answers in the main description filled out properly and make sense?
• Who maintains the library and how well is it maintained?
• How viable are the alternatives?
• Should we build it ourselves instead?

Once these questions are answered, start a thread in #engineering-chat, ping the @app_deployers group, and call for a vote to accept the new library. Once the vote is complete, update this issue with the outcome and procede accordingly. Here is a sample post:

Hey @app_deployers,

There is a request to add a new library to App that we need to consider. Please look at this GH and then vote :+1: or :-1: on accepting this new library or not.

GH_LINK

[roryabraham]

After researching this, one of the things I like about moize is how the base API is extremely simple, but it's also configurable for just about any kind of memoization you might need.

[puneetlath]

App as of now, does not have a standardized way of handling memoization outside of React. It boils down to using custom-made solutions like Maps or serialization. This is a problem because engineers implementing and reviewing solutions for memoization outside of React have to sink time into writing and creating a custom solution that may not be consistent with other places in the codebase. This leads to inconsistency, overhead, and at times sub-optimal solutions.

Can you give some examples of such scenarios and where we encounter this problem?

[roryabraham]

Can you give some examples of such scenarios and where we encounter this problem?

Here are just a few examples of different caching solutions we've built ad-hoc:

• https://github.com/Expensify/react-native-onyx/blob/main/lib/OnyxCache.ts

• App/src/libs/Localize/index.ts

  Lines 68 to 73 in f5cf3fb

  	const translationCache = new Map<ValueOf<typeof CONST.LOCALES>, Map<TranslationPaths, string>>(
  	Object.values(CONST.LOCALES).reduce((cache, locale) => {
  	cache.push([locale, new Map()]);
  	return cache;
  	}, [] as Array<[ValueOf<typeof CONST.LOCALES>, Map<TranslationPaths, string>]>),
  	);

• Cache measured sizes in ThumbnailImage #40643

• App/src/libs/PersonalDetailsUtils.ts

  Lines 27 to 32 in 22f6d15

  	emailToPersonalDetailsCache = personalDetails.reduce((acc: Record<string, PersonalDetails>, detail) => {
  	if (detail?.login) {
  	acc[detail.login.toLowerCase()] = detail;
  	}
  	return acc;
  	}, {});

• [HOLD #42200] Fix Intl NumberFormat calls #40341

A case study I was involved with can be found in this PR. The diff in src/libs/Localize/index.ts could have been reduced to this:

const translateMemoized = moize(translate);
export {translateMemoized as translate};

and lots of discussion could have been avoided with this standardization.

[janicduplessis]

Other case I added recently that could use this

App/src/components/ThumbnailImage.tsx

Line 19 in e8ae3c5

const thumbnailDimensionsCache = new Map<string, {width: number; height: number}>();

[puneetlath]

@kacper-mikolajczak can you please post this in the #expensify-open-source channel in problem/solution format along with all the information provided in the OP? And cc @app-deployers on it. Thank you!

[kacper-mikolajczak]

Sure thing @puneetlath! Here is a P/S post.

[tgolen]

Number of releases in the last year: 5

From looking at https://github.com/planttheidea/moize/releases, it looks like the last release was May 2023, last year. Correct?

[puneetlath]

Looks like the discussion is ongoing.