React: Implementing a hook to fetch data and return loading state

Question

I'm trying to implement a hook (useFetch(route, dependencies=[])) which will be used to fetch data and return a scalar value, loading, which is used to determine if the user is currently fetching new data.

This works as expected on the initial render (as the default state for loading is true).

The problem occurs on every subsequent render. Due to the loading state being currently set to false (after the initial render), the loading state will remain false for an extra render cycle before it is updated to true at the top of the useEffect().

How can I prevent that extra loading=false render cycle, so the component I use this useFetch() in is immediately aware that data is currently being fetched and that I can display the '...loading' text in the render() (without having to render twice to get to this point).

useFetch

function useFetch(route, successHandler, dependencies = []) {
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        setLoading(true);
        fetch(route,
            {
                method: 'POST',
                body: JSON.stringify({}),
                headers: {"Content-Type": "application/json"}
            })
            .then(res => res.json())
            .then(
                () => {
                  // Set state data from component here 
                  successHandler();
                }, 
                () => {/*...*/})
            .finally(() => {
                setLoading(false);
            });
    }, dependencies);
    return loading;
}

Component

function Component(){
  const [toggle, setToggle] = useState(false);
  const [options, setOptions] = useState({});
  const loading = useFetch('endpoint', 
    () => setOptions({foo: 'bar'}), 
    [toggle]);

  return <div>
    <button onClick={()=>{setToggle(!toggle)}}>Trigger useFetch()</button>
    {loading ? '...loading': options.foo}
  </div>;
}

Any help or design suggestions would be appreciated,

Praneeth Paruchuri · Accepted Answer · 2019-09-12 15:40:33Z

2

Your code has two mistakes:

const loading = useFetch('endpoint', 
    () => setOptions({foo: 'bar'}), 
    [toggle]);

The dependency array should be the variables that are used in the useEffect, in your case it can be [route]
[toggle] as a dependency parameter will send [false] or [true], depending on your state variable. Which won't be under control of the useEffect of the hook you created.

Check out this example, it might help you understand better:

edited Sep 12, 2019 at 15:40

answered Sep 12, 2019 at 15:11

Praneeth Paruchuri

1,0225 silver badges12 bronze badges

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

4 Comments

Miroslav Glamuzina Over a year ago

I wouldn't want toggle to be under the control of the useEffect, i intend for it to be used to trigger that useEffect instead. Does that go against the hooks rules?

Praneeth Paruchuri Over a year ago

Yep. It does. You need to use the variables that are used in the useEffect hook or an empty array.

Praneeth Paruchuri Over a year ago

Check the example I added.

Miroslav Glamuzina Over a year ago

Thank you for the fiddle, checking it out now

Collectives™ on Stack Overflow

React: Implementing a hook to fetch data and return loading state

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