I am learning about the useCallback hook in React. There is an online demo accessible at https://codesandbox.io/s/red-sun-mw86q2?file=/src/App.js that I'm working with, and I've run into an issue - why is 'App is re-rendering' still being printed to the console when I click the button a second time? Can someone explain this for me this case, thanks!
-
1Thanks for sharing example code. it will render when you put state at dependency of your useCallback fun.Yewin– Yewin2023-07-27 04:25:11 +00:00Commented Jul 27, 2023 at 4:25
Add a comment
|
1 Answer
re-render useCallback()
Hi, you should try to put your state data inside of dependency of usecallback function.
pls try like this, it will re-render.
const increment = useCallback(
function () {
setCount(count + 1);
},
[count]
);
ref: docs. if you want a state or props to be reactive value, you should put that variable at dependency like useCallback(fun, [var1, var2])
useCallback(fn, dependencies)
4 Comments
Shane
Thank you for your explanation. I understand the normal usage is what you described. However, in my example, when I click the button for the second time, the old and new value of count are both 1. So the component should not re-render in this case, right?
Yewin
I see now what you mean. I saw a question same as your meaning.
Yewin
here the question, hope that help you. https://stackoverflow.com/questions/76483739/react-updating-a-components-state-with-the-same-value-triggers-a-render
Shane
Thanks! I've read that question and related answers. I also found another similar question here: https://stackoverflow.com/questions/57652176/react-hooks-usestate-setvalue-still-rerender-one-more-time-when-value-is-equal. After reading @sophiebits's comment(if what she said is correct🙂), I understand that this is because the updates are not processed until the render phase.