React: using custom hook inside regular function

Question

I want to use my custom hook inside a regular function as follows, but React won't let me do that. I wonder if my useUrl custom hook is not valid or there is something wrong with calling the hook.

const handleAddFormation = async () => {
    console.log('add formation')

    await useUrl('POST', 'http://localhost:1337/formations', newFormationList)

    setNewFormationList([])
    setModalOpen(false)
}

My custom hook:

export default function useUrl(method, url, args) {
    const [data, setData] = useState([])
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        setLoading(true)
        axios({
            method,
            url,
            data: args
        })
        .then((res) => {
            setData(res.data)
            setLoading(false)
        })
        .catch((err) => {
            console.log(err)
            setLoading(false)
        })
    }, [])

    if (!loading) return data
}

This gives me the following error:

React Hook "useUrl" is called in function "handleAddFormation" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter

As the error message states, you can use custom hooks only in 2 cases , custom hooks inside another custom hook or inside the functional component . Your handleAddFormation is neither of those . — Shyam
– Shyam, Commented Aug 29, 2021 at 8:47
From what is understand you are trying to mimic something like this react-query.tanstack.com/guides/mutations . You need to make your custom hook to return a function which will run at the later point of time when you are doing create/update/delete operations . — Shyam
– Shyam, Commented Aug 29, 2021 at 8:51
@Shyam Yes, but how to point to a specific function within the custom hook file? For example I'd like to have one function for create and another one for delete. — Max
– Max, Commented Aug 29, 2021 at 9:54

Oro · Accepted Answer · 2021-08-29 08:48:12Z

6

From react doc,

Don’t call Hooks from regular JavaScript functions. Instead, you can:

✅ Call Hooks from React function components.

✅ Call Hooks from custom Hooks

Also, you don't need use await for custom hook

answered Aug 29, 2021 at 8:48

Oro

2,6561 gold badge10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Max Over a year ago

What should my code be in order to make this work?

Oro Over a year ago

move useUrl from your handler, and use value that was returned in your handler

Max Over a year ago

Makes sense, but I'd like to only make a post request in my handler, not everytime the components mounts.

Oro Over a year ago

in this case you should create a custom hook, which will return useCallback instead of value, and invoke it in your handler const getResource = useResourceCallback() const handleAddFormation = async () => { const data = await getResource() }

Collectives™ on Stack Overflow

React: using custom hook inside regular function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related