I have a dependencies windowSize. I also have a search input field where I update the search state. if I tip something in my search state my sites get rerendert of course because I update a state. But I have a function wrapped in useCallback but the problem is, it get triggered. So why it gets triggered ? it should only triggered when the dependencie/state windowSize gets changed.
const [searchValue, setSearchValue] = useState<string>('');
useEffect(() => {
gridRef.current?.recomputeGridSize();
console.log('TRIGGER WINDOW SIZE')
}, [windowSize]);
const calculateColumnCount = useCallback((width: number) => {
console.log('CALLBACK FUNC')
return Math.floor(width / itemMinWidth);
}, [windowSize])
const columnCount = numColumns ?? calculateColumnCount(containerWidth);
I put only the important things in the snipped. If you want I can share the full code.
what I am doing wrong ?
0
One thing to keep in mind is that
theuseCallback hook does not prevent invocation, it ensures that the function references remain stable across renders as long as its dependencies (windowSize in your case) do not change.
this line
const columnCount = numColumns ?? calculateColumnCount(containerWidth);
executes whenever numColumns is falsy. This execution is independent of whether the useCallback reference changed.
The second point to keep in mind is
State changes cause re-renders. When you update the searchValue state by typing in the search input field, it causes a re-render of the component. During the re-render, if numColumns is falsy, the calculateColumnCount function is invoked again.
https://react.dev/learn/updating-objects-in-state
So if your intentions is to call a function just once, have a useEffect function with empty dependency array (It’s okay even if the compiler throws a small warring).
In case this solution does not satisfy you, you can also use the useMemo hook
const [searchValue, setSearchValue] = useState<string>('');
useEffect(() => {
gridRef.current?.recomputeGridSize();
console.log('TRIGGER WINDOW SIZE');
}, [windowSize]);
const calculateColumnCount = useCallback((width: number) => {
console.log('CALLBACK FUNC');
return Math.floor(width / itemMinWidth);
}, [windowSize]);
// Memoize the column count to avoid unnecessary recalculations
const columnCount = useMemo(() => {
return numColumns ?? calculateColumnCount(containerWidth);
}, [numColumns, containerWidth, calculateColumnCount]);
Or consider using react redux toolkit which will help you manage state effectively. Its learning curve might be stiff, but I truly recommend 🙂
keep coding dude and have fun 🙂
1
Your function gets triggered because of:
const columnCount = numColumns ?? calculateColumnCount(containerWidth);
When u do useCallback it would create a function that gets recreated if dependency of useCallback is changed. When specified like that in a body of component columnCount would be called every rerender.
If you want prevent a call u have to useMemo:
const columnCount = useMemo(() => numColumns ?? calculateColumnCount(containerWidth), [numColumns, containerWidth]);