During the job interview, I was asked how to optimize a component in React.
So I answered with an example of using useCallback and useMemo hooks.
Because whenever a components re-renders, functions and variables declared inside of the component are newly created which results in those newly created values occupying memory space.
However, with a help of those two hooks, it is possible to save memory because using useCallback and useMemo prevents creating the function and variable again and again by saving and reusing the previous result, as long as a state inside the dependency array is not changed during the component re-rendering.
So far, this was my answer. But the interviewer said useCallback does not prevent creating a function. Even if useCallback is used, a function is still created.
I do not get this part. How is the function created again inside the useCallback hook?
Is there something I'm missing about useCallback and useMemo?
The useCallback hook is used when you have a component in which the child is rerendering again and again without need. Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed.
The React useCallback Hook returns a memoized callback function. Think of memoization as caching a value so that it does not need to be recalculated. This allows us to isolate resource intensive functions so that they will not automatically run on every render.
The key takeaway here is that useCallback returns you a new version of your function only when its dependencies change, saving your child components from automatically re-rendering every time the parent renders.
Yes they are called on each render, in the first render it initialise a memory cell, on re-render it read the value of the current cell : When you call a Hook like useState(), it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one.
useCallback
in action:In the example bellow: useCallback
will prevent newly changeWithUseCallback
re-create every new render, result that Child1
never gets re-render because it's props (changeWithUseCallback) never re-created.
Otherwise, in the Child2
component, its prop (changeWithoutUseCallback) is always re-created during renders, so the component itself will re-render.
Please note that React.memo will skip rendering the component if its props have not changed
So I would say that you are right about useCallback
that it will keep the function/variable reference during renders, or prevent creating new function/variable
during renders.
function App() {
const [value, setValue] = React.useState(0);
const changeWithUseCallback = React.useCallback(() => {
console.log("onChangeChild");
}, []);
const changeWithoutUseCallback = () => {
console.log("onChangeChild");
};
return (
<div className="App">
<button type="button" onClick={() => setValue(value + 1)}>
Change value
</button>
<h1>{value}</h1>
<Child1 onChange={changeWithUseCallback} />
<Child2 onChange={changeWithoutUseCallback} />
</div>
);
}
const Child1 = React.memo(({ onChange }) => {
console.log("Child1 render!!!");
return null;
});
const Child2 = React.memo(({ onChange }) => {
console.log("Child2 render!!!");
return null;
});
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With