Digamos que tengo la siguiente función de cálculo pesado:
function heavyCalculator(str:string):string{ //Do some heavy calculation return result; } function SomeComponent({prop1,prop2,prop3,prop4}:Props){ useEffect(()=>{ const result = heavyCalculator(prop3); //How should i store the result? },[prop3]) return <span>{resultFromHeavyCalculation}</span>; }¿Cómo debo almacenar el resultado del cálculo de manera que no se vuelva a calcular en cada cambio de render/propiedad?
¿Debo usar "useMemo" o usar "useState" y configurarlo dentro de "useEffect" solo cuando se cambia prop3?
Este es básicamente el caso de uso principal para useMemo . Aunque su enfoque con useEffect(() => ..., [prop3]) también funcionaría si almacena el resultado en una variable useState , useMemo requeriría menos repetitivo:
function SomeComponent({prop1,prop2,prop3,prop4}:Props){ const resultFromheavyCalculation = useMemo(() => heavyCalculator(prop3), [prop3]) return <span>{resultFromHeavyCalculation}</span>; }Puede obtener más información sobre useMemo en la documentación oficial . El ejemplo allí es en realidad muy similar al que está proporcionando.
Si realmente te propones evitar useMemo a toda costa, la respuesta sería:
function SomeComponent({prop1,prop2,prop3,prop4}:Props){ const [resultFromHeavyCalculation, setResultFromHeavyCalculation] = useState(); useEffect(()=>{ const result = heavyCalculator(prop3); setResultFromHeavyCalculation(result); },[prop3]), [prop3]) return <span>{resultFromHeavyCalculation}</span>; }