const [A, setA] = useState(0); const [B, setB] = useState(0); const incrementA = () => { setA(A + 1); }; const incrementB = () => { setB(B + 1); }; - in this when someone calls a function incrementA then it will increase the value of A by 1. But with this function incrementB will be recreated in memory (remember I am not saying it will be executed) only recreated so this will not show any effect on screen but it decreases performance of website or app(react native). But if you do as shown below incrementB will not be recreated when a is updated. const [A, setA] = useState(0); const [B, setB] = useState(0); const incrementA = () => { setA(A + 1); }; const incrementB = useCallback(() => { setB(B + 1); }, [B]);
Can you explain with another example useCallback hook?
const [A, setA] = useState(0);
const [B, setB] = useState(0);
const incrementA = () => {
setA(A + 1);
};
const incrementB = () => {
setB(B + 1);
}; - in this when someone calls a function incrementA then it will increase the value of A by 1. But with this function incrementB will be recreated in memory (remember I am not saying it will be executed) only recreated so this will not show any effect on screen but it decreases performance of website or app(react native). But if you do as shown below incrementB will not be recreated when a is updated.
const [A, setA] = useState(0);
const [B, setB] = useState(0);
const incrementA = () => {
setA(A + 1);
};
const incrementB = useCallback(() => {
setB(B + 1);
}, [B]);