Let's say we have a react component with a useState inside it.
const expensiveCalculation = () => {
// ...
}
export default function AboutPage() {
const [state, setState] = useState(expensiveCalculation())
return (
// ...
);
}
We initiate the state with the result of the expensiveCalculation
function.
Every time the component re-renders, the function expensiveCalculation
will run even though we only need it's result as the initial value of useState. The function's result will not be used.
To avoid the expensive calculation during re-renders, pass the function itself without calling it. react is smart enough to invoke the function itself on mount and not every render.
const expensiveCalculation = () => {
// ...
}
export default function AboutPage() {
const [state, setState] = useState(expensiveCalculation)
return (
// ...
);
}
Top comments (2)
Is this anything like useCallback?
No, useCallback solves a very different problem.
UseCallback caches a function's definition.
The tip explained in the article "caches" a function's result