Can initializing useState with a value act as a cache and prevent recomputing that value?

Question

This may be a simple question but in our UI app we have a pattern my team has used to wrap an object of translation strings from i18next into a state which is never updated. The idea is, the translation function is used to generate the translations once and set into a state that is never updated, thus, when page re-renders for other reasons, it never re-calls the functions.

  const [translations] = useState({
    header: translate('translation.string.goes.here')
    welcomeMessage: translate('translation.string.goes.here')
  });

so then we can do something like translations.header and if page re-renders, the translate method isnt called anymore and basically, in a sense, caching the translations.

Is our assumption correct that translate will not be called again on re-renders?

Consider asking about your specific case if you need more relevant answer. What is translate and where does it come from? Is it react.i18next.com/latest/usetranslation-hook ? Why is useState used if it's not updated? — Estus Flask
– Estus Flask, Commented Jul 8 at 20:49

gmoniava · Accepted Answer · 2025-07-08 20:13:26Z

when page re-renders for other reasons, it never re-calls the functions.

You are wrong it does re-call them (the whole object is also recreated) just the result is discarded. Here is explanation on that.

If you really want it to be called once you could pass a initializer function to useState but it should be pure - which in your case it seems it is not.

So if you really want to avoid calls to translate on every re-render, maybe you can just store them in a variable declared outside your component - or store in ref using such approach:

function Video() {
  const playerRef = useRef(null);
  if (playerRef.current === null) {
    playerRef.current = new VideoPlayer();
  }
...

This pattern is allowed based on the docs:

Normally, writing or reading ref.current during render is not allowed. However, it’s fine in this case because the result is always the same, and the condition only executes during initialization so it’s fully predictable.

You could also have considered useMemo but again the calculateValue function it receives should be pure which IMHO your function is not.

Michał Turczyn · Accepted Answer · 2025-07-16 15:47:04Z

0

General rule of thumb is that if something does not ever change, then it should be extracted out of component totally (even creating it more than once is redundant, if it's not changing).

So not only it should not be kept in the component, it should never be used as state.

So i suggest doing something like:

export const header = translate('translation.string.goes.here')
export const welcomeMessage = translate('translation.string.goes.here')

answered Jul 16 at 15:47

Michał Turczyn

41.2k18 gold badges58 silver badges87 bronze badges

1 Comment

Tanner Summers Jul 17 at 16:08

It make sense. As a way to prevent recreation

Collectives™ on Stack Overflow

Can initializing useState with a value act as a cache and prevent recomputing that value?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related