Question 418803 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why usecallback is triggered but the dependencies are not updated?

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 ?

Tags:

3

Answers


  1. 0

    This is an interesting problem, and I can see why it’s confusing. Since your useCallback depends on windowSize, it should only trigger when windowSize changes. But from what you’re describing, it sounds like something else might be causing the callback to run.

    One thing to watch out for is whether the parent component re-renders whenever you update searchValue. Even though searchValue isn’t part of the useCallback dependency array, a re-render at the parent level could cause the function to be re-invoked.

    It might help to log both windowSize and searchValue to figure out what’s actually triggering the callback. Also, double-check how windowSize is being updated—it’s possible something subtle is happening there.

    Let me know if this helps or if you want to share more of the code. Happy to help dig into it!

    Login or Signup to reply.
  2. 0

    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]);
    Login or Signup to reply.
  3. 0

    one thing to keep in mind is that
    useCallback Does Not Prevent Invocation so tahe useCallback hook ensures that the function references remains 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 are to to only call a function once

    just have a useEffect function with empty dependency array , even thew the compiler is throw a small warning its ok.

    in case this solution does not satisfy you , you can also use memo

    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 maybe using a more robust react redux toolkit which will help you managing state and renders only the component it store the state at but its a bit stiff curve to learn , but I truly recommend 🙂 keep coding dude let me know if that helped you , upvote if it did and mark as answer 🙂 will help me get to 900 points

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search