can't pass a function as prop, there's always a warning?

Question

this is my code:

const handleNotification = React.useCallback(
    type => {
      setSuccess(type);
      setTimeout(() => reset(), 1500);
    },
    [reset]
  );
  const sendRequest = React.useCallback(
    async () => {
      // don't send again while we are sending
      if (isSending) return;
      // update state
      setIsSending(true);
      // send the actual request
      try {
        await axios({
          method: "post",
          url: NONCOM_SEND_MAIL_URL,
          headers: {},
          data: {
            clientId,
            userId,
            email,
            subject: "Non-Compliant Certificate",
            templateCode: "REQNOTMET",
            entityId: entity_id
          }
        });
        handleNotification(true);
      } catch (e) {
        setError(e);
        handleNotification(false);
      }
      // once the request is sent, update state again
      if (isMounted.current)
        // only update if we are still mounted
        setIsSending(false);
    },
    [isSending, clientId, userId, email, entity_id, handleNotification]
  ); // update the callback if the state changes

I am getting this warning:

The 'reset' function makes the dependencies of useCallback Hook (at line 35) change on every render. Move it inside the useCallback callback. Alternatively, wrap the 'reset' definition into its own useCallback() Hook

as you can see i have already wrapped it inside useCallback? what did i do wrong in this case? reset is function prop in this component. why does this not work?

React doesn't like async functions passed to hooks. Instead, try wrapping the async function inside the function that is passed to the `useCallback` hook and then call it or write it as an IIFE. Something like this: `const sendRequest = React.useCallback(() => (async() => { ... };)(););` — Chunky Chunk, Feb 03 '20 at 22:11
Since `reset()` comes via props from the parent, like any prop it can (potentially) change each render, so best practice is to have it in the dependency list. See this question [Omit function props from the dependencies list in React.useEffect](https://stackoverflow.com/questions/58759239/omit-function-props-from-the-dependencies-list-in-react-useeffect) for an example on change in the parent. — Richard Matsen, Feb 04 '20 at 00:23
***Move it inside the useCallback callback*** means move the definition inside, i.e no longer pass as a prop but define it where it's used (if that's even possible for you). — Richard Matsen, Feb 04 '20 at 00:25
***wrap the 'reset' definition into its own useCallback() Hook*** again means moving the definition inside this component and no longer pass it via props. You are *using* it in your useCallback for `handleNotification()`, but this message means *defining it* in another useCallback (i.e `const reset = useCallback(...`) — Richard Matsen, Feb 04 '20 at 00:28

can't pass a function as prop, there's always a warning?

0 Answers0