vendredi 22 octobre 2021

Is useMemo usefull rendering a prop value?

What's the difference between those two patterns ? Is the useMemo usefull ?

Will the number of rerenders change ?

1 - Just rendering a modified prop

const Component = ({ myObject }) => {
  const computedValue = changeMyValueWithSomeCalculus(myObject.value)
  return (
    <div>
       {computedValue}
    </div>
  )
};

2 - Using useMemo

const Component = ({ myObject }) => {
  const computedValue = useMemo(() => {
    return changeMyValueWithSomeCalculus(myObject.value);
  }, [myObject.value]);

  return (
    <div>
       {computedValue}
    </div>
  )
};

I've ran into this SO question very instructive but doesn't help me out with this choice !

Aucun commentaire:

Enregistrer un commentaire