useCallback with empty dependencies, then what is passed as callback param?

Question

I am not very new to React but below code is hard to understand.

const UIContext = React.createContext();
const initialFilter = { ... };

export function UIProvider({ children }) {
  const [queryParams, setQueryParamsBase] = useState(initialFilter);

  const setQueryParams = useCallback((nextQueryParams) => { // <- my problem is here
    setQueryParamsBase((prevQueryParams) => {
      ... // some operations
      return nextQueryParams;
    });
  }, []);
  
  const value = {
    queryParams,
    setQueryParamsBase,
    setQueryParams,
  };

  return (
    <UIContext.Provider value={value}>
      {children}
    </UIContext.Provider>
  );
}

I know useCallback but in the above code a variable called nextQueryParams is passed as a parameter of the callback.

What is that nextQueryParams? The variable name sounds like related to query params, however I couldn't find what is passed as a parameter to the callback from React documentation.

Please help me if anyone knows this.

Answer 1

useCallback just takes a function. Literally just a plain old function. It doesn't take a special function that has pre-defined arguments or anything.

So setQueryParams is passed to the UIContext.Provider component through the value object prop. And inside that component it may use that function while passing an argument, like so setQueryParams(someValue). That someValue will become the nextQueryParams argument in the function inside useCallback.