Why does this custom hook return indefined in react?

Question

i am creating a custom hook in React, this is my code:

import {useEffect} from 'react';

const useFetch = (url) => {
    useEffect(() => {
        const fetchData = () => {
            const data = url + "TEST";
            return data;
        }
        fetchData();
    })
}

export default useFetch;

It now returns some dummy value but that is just because of testing purposes.

Here is where i invoke my custom hook:

const Data = useFetch("https://customapiurlrandom.com/");
 useEffect(() => {
 console.log(Data);
}, [])

The thing is, when i check my console i see undefined. And i can't find out why.

Any ideas? Thanks in advance.

Are you doing a fetch() inside of fetchData()? Your useFetch() doesn't return anything either — Nick Parsons
– Nick Parsons, Commented Mar 3, 2021 at 8:47
You're not returning anything. And you should use useState with useEffect — Roberto Zvjerković
– Roberto Zvjerković, Commented Mar 3, 2021 at 8:50
@NickParsons the final goal is to do a fetch inside fetchData indeed, how would i make my useFetch return FetchData(); ? — Rowan van Zijl
– Rowan van Zijl, Commented Mar 3, 2021 at 8:58
Exactly what @ritaj said. Check here for a complete example reactjs.org/docs/hooks-custom.html — Stavros Angelis
– Stavros Angelis, Commented Mar 3, 2021 at 8:58

Tam Nguyen · Accepted Answer · 2021-03-03 08:59:36Z

2

Your custom hook didn't return anything. You should add a state to keep the value and return it

import {useEffect, useState} from 'react';

const useFetch = (url) => {
    const [data, setData] = useState(null);

    useEffect(() => {
        const fetchData = () => {
            const data = url + "TEST";
            return data;
        }
        setData(fetchData());
    },[url, setData]);

    return data;
}

export default useFetch;

And then use like this

const Data = useFetch("https://customapiurlrandom.com/");
useEffect(() => {
    console.log(Data);
}, [Data])

answered Mar 3, 2021 at 8:59

Tam Nguyen

1814 bronze badges

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

1 Comment

Rowan van Zijl Over a year ago

Thanks for answering! This works. I find it so difficult working with normal logic inside React... because, why do i need state for this? State is used for the state of components right? And when de state changes the component re-renders. So why would state be needed here?

Collectives™ on Stack Overflow

Why does this custom hook return indefined in react?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related