Вариант использования для useLayoutEffect + useState против useMemo?

Question

[miliko mikoyan]

Я видел этот ответ: useMemo vs. useEffect + useState , и он хорошо его подводит useEffect, но в моем случае я хочу выполнить дорогостоящую операцию, которая изменит DOM как можно раньше. Все useMemo()равно будет рекомендовано вместо useLayoutEffect()обновления состояния? Отражает ли двойной рендеринг эффекта -> обновление состояния какое-либо повышение производительности?

useLayoutEffect() сценарий:

useLayoutEffect(() => {
    const tokens = expensiveOperationGeneratingClasses(param1)
    setTokens(tokens)
}, 
[param1])

 render (
  <>
   {
       tokens.map(token => <span className={token.id}/>)
   }
  </>
 )

useMemo сценарий:

const tokens = useMemo(() => {
     return expensiveOperationGeneratingClasses(param1)
},
[param1]

 render (
  <>
   {
       tokens.map(token => <span className={token.id}/>)
   }
  </>
 )

На самом деле я понял, что я не делаю DOM-операции, а просто генерирую имена классов перед рендерингом тегов, чтобы избежать мерцания, поэтому я думаю, что мне лучше использовать useMemo, я прав?

Comments

[Антон Спирин]

А какую конкретно операцию хотите совершить?

[miliko mikoyan]

Антон Спирин Я хочу изменить имена классов<span> тегов после выполнения множества операций RegEx над текстом.

[Антон Спирин]

miliko mikoyan, тут лучше пример кода, так как useMemo вызывается или возвращает значение во время вызова функционального компонента до отрисовки, а useLayoutEffect синхронно срабатывает сразу после. У этих хуков разные цели и последнему рекомендуют предпочитать useEffect.

[miliko mikoyan]

Антон Спирин, значит здесь лучше useMemo,