How to reuse data fetching logic from api using react custom hooks

Question

I have two components rendering different UI based on user type. Both components have nearly 50% similar logic of fetching data from api, connecting to store.

I tried, reusing the login by creating custom hook.

const { products, loading} = useFetchProducts(userId);

and now I can define a useFetchProducts reducer

  const useFetchProducts= (userId) => {
   const [ loading, setLoading ] = useState(false);
   const [ products, setProducts ] = useState(null);

   useEffect(() => {
       setLoading(true);
         fetchUserProducts(userId).then((res) => {
           setLoading(false);
           setProducts(res.data);  
     }); 
   }, [])
 }

How do I return products and loading state to my component from this reducer to hide or show a loader as well as to show list of products,

you can pass the props in other component through import in parent class — lovepreet singh
– lovepreet singh, Commented Jun 12, 2019 at 10:04
My question here is this, how to get state of loader in the component where I a using this custom hook. How to pass state from custom hook to component? — shubham choudhary
– shubham choudhary, Commented Jun 12, 2019 at 10:06
you can import spinner component in parent class, then setState and pass the state value in spinner component as a props through custom hooks — lovepreet singh
– lovepreet singh, Commented Jun 12, 2019 at 10:19
useEffect(() => { setLoading(true); fetchUserProducts(userId).then((res) => { setLoading(false); setProducts(res.data); }); }, []) render(){ return ( // pass here hooks state value <spinner value={hooks state value} /> — lovepreet singh
– lovepreet singh, Commented Jun 12, 2019 at 10:20

Shubham Khatri · Accepted Answer · 2019-06-12 10:21:22Z

3

You simply need to return the values from the custom hook.

const useFetchProducts= (userId) => {
   const [ loading, setLoading ] = useState(false);
   const [ products, setProducts ] = useState(null);

   useEffect(() => {
       setLoading(true);
         fetchUserProducts(userId).then((res) => {
           setLoading(false);
           setProducts(res.data);  
     }); 
   }, [])
   return {loading, products}
 }

It will work because when the data is available it will cause a re-render and due to that, the component in which you use the custom hook will re-render causingthe update

answered Jun 12, 2019 at 10:21

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

1 Comment

shubham choudhary Over a year ago

yes thanks , this makes somesense now. I will try this out now.

Amit Chauhan · Accepted Answer · 2019-06-12 10:42:24Z

1

You need to return value from your custom hook.

const useFetchProducts= (userId) => {
   const [ loading, setLoading ] = useState(false);
   const [ products, setProducts ] = useState(false);

   useEffect(() => {
       setLoading(true);
         fetchUserProducts(userId).then((res) => {
           setLoading(false);
           setProducts(res.data);  
     }); 
   }, [])
   return { products, loading }
 }

edited Jun 12, 2019 at 10:42

answered Jun 12, 2019 at 10:11

Amit Chauhan

7,0192 gold badges26 silver badges39 bronze badges

2 Comments

shubham choudhary Over a year ago

How can you be sure it will only return data once useEffect finishes its call. I don't think this will work.this will only return { products: false, loading: false}

Amit Chauhan Over a year ago

It will return updated data in each render. your useEffect will cause re-render when you set products and loading values. so in next render you will get updated loading and products.

Collectives™ on Stack Overflow

How to reuse data fetching logic from api using react custom hooks

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related