Best practice for handling constants in React Hooks

Question

With React Hooks, what is the best practice for storing a constant that requires significant computation to initialize but then doesn't change across re-renders?

Option 1: Constant Outside of Hook Definition

const x = heavyCalculation();
export default function MyHook() {
  return <div>x</div>
}

Option 2: useMemo

export default function MyHook() {
  const x = useMemo(() => heavyCalculation(), [])
  return <div>x</div>
}

Option 3: useRef

export default function MyHook() {
  const x = useRef(heavyCalculation())
  return <div>x</div>
}

I like Option 1, but I don't know if it's considered the best for hooks stylistically.

codereview.stackexchange.com is meant for such discussions, on stackoverflow they are considered offtopic. — Deykun
– Deykun, Commented Oct 20, 2020 at 18:59
@Deykun please look at the CR Help center again: It's OK to ask "Does this code follow common best practices?", but not "What is the best practice regarding X?". — Sᴀᴍ Onᴇᴌᴀ
– Sᴀᴍ Onᴇᴌᴀ, Commented Oct 20, 2020 at 19:02

CertainPerformance · Accepted Answer · 2020-10-20 20:10:04Z

3

Option 1 works, but it's not particularly flexible - what if multiple instances were rendered at a given time, and they didn't all share the same heavyCalculation result? But if you can count on the value only having to be computed exactly once, across all components, go for it.

Option 2 is the right choice, but note that you can simplify it to:

export default function MyHook() {
  const x = useMemo(heavyCalculation, [])
  return <div>{x}</div>
}

(also note that you do need {x}, not just x, to show the x result)

Option 3 will not work, since heavyCalculation will be invoked on every render. (You'd also have to reference x.current, not just x)

edited Oct 20, 2020 at 20:10

answered Oct 20, 2020 at 18:42

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Best practice for handling constants in React Hooks

Option 1: Constant Outside of Hook Definition

Option 2: useMemo

Option 3: useRef

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Option 1: Constant Outside of Hook Definition

Option 2: useMemo

Option 3: useRef

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related