DEV Community

useReducer instead of useState while calling APIs!

Yogini Bende on April 27, 2021

Hello folks! It’s been a while since React has introduced Hooks and we all fell in love with it’s patterns and ease of use. Though this is the ca...

Read full post

Diogo Goncalves • Apr 28 '21

I'd say use swr (swr.vercel.app/) when calling APIs, it returns the data, error, and if it's loading (plus cache, deduplication, etc). Here's a snippet from their website:

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Mike Bybee • Apr 28 '21 • Edited

Or React Query. But yes, separate server fetching from local state.

David Leuliette 🤖 • Apr 28 '21 • Edited

@stereoplegic
Do you know what are the differences between swr and react-query?

I use both and I have no idea how to pitch the differences 😆

Mike Bybee • Apr 28 '21

Tanner Linsley (author of React Query) details the differences here (also comparing Apollo and RTK Query) much better than I can: react-query.tanstack.com/comparison

RexGalilae • Apr 28 '21

This! No need to reinvent the wheel every time you want an API dependent state variable

Yogini Bende • Apr 29 '21

I have used react query and it is quite good. I didn't know about swr though. Will check this out. Thanks for sharing

Benjamin • Apr 29 '21

I fully agree. Don't reinvent the wheel. There's also URQL if you're dealing with GraphQL
formidable.com/open-source/urql/do...

Jose Arteaga • Apr 29 '21

Great post! it helped a lot to understand much better useReducer. Now, I'll try to put it into practice to remember its usage. Just quick question. Can I have more than one useReducer inside the Function Component? Because in the example there is just one and you call the dispatch method, however if you have more than one useReducer, how I can make the difference which I am working with? Thanks!!

Bradley Pitts • May 2 '21

While it is possible to use more than one useReducer for the state of a component. I would recommend against it as each use of the useReducer hook will return it's own state object and dispatcher. Instead design the single reducer to control the whole state of the component. Any defined action in the reducer should return the whole state of the component with any expected updates as per that defined action.

Jose Arteaga • May 3 '21

Very clear your explanation Bradley, got it! Thanks so much!

Anton T • May 3 '21

To help understand hooks, you might wanna look up array destructuring (similar to object destructuring). In short - you can use whatever names you like when destructuring an array, so just use different names for your second useReducer hook!

const [state, dispatch] = useReducer(userDetailsReducer, initialState);
const [likeState, likesDispatch] = useReducer(userLikesReducer, initialLikesState);

Jose Arteaga • May 5 '21

Thanks @antontsvil ! That helped me as well to understand that it is possible! great example!

Comment hidden by post author - thread only accessible via permalink

Elektronik Sigara Antalya • May 3 '21

Antalya elektronik sigara bayisi olarak son güncel teknolojiyi takip ediyor ve sağlam işe yarayan ürünleri sizlere sunuyoruz. Ekibimiz bu konuda bir hayli mesai harcamakta ve pod mod Antalya Antalya firması olarak olabildiğince hızlı kargo çıkarmaktayız. En iyi pod mod elektronik sigara modelleriniz Antalya merkez dahil tüm ilçelere dağıtım yapmaktayız.

Yogini Bende • May 4 '21

Wrong article to post your advertisement sir!

Comment hidden by post author - thread only accessible via permalink

Ravirajtambile • May 4 '21

Nice🖤
Two line shayari in Marathi

Beautiful
Motivational Quotes in Marathi

Comment hidden by post author - thread only accessible via permalink

Ravirajtambile • May 4 '21

Best 💟
50+ WhatsApp Status in Hindi

Nice🖤
Two line shayari in Marathi

Yuki Shibata • Apr 27 '21

Thank you for the awesome post!
This makes my understanding of the useReducer deepen.

I've wondered that Is that a usual way to define an API-call function IN the useEffect hooks??

Yogini Bende • Apr 27 '21

If you don't need to use it outside the hook, there is no harm in declaring it inside. The only purpose of declaring a function there is to enable async-await. But again.. its our choice 😇

Yuki Shibata • Apr 27 '21

That makes sense!
Thank you for answering🙌

Abiola • Apr 27 '21

Nice and informative post!

I would also want to avoid using useReducer to manage local state if I am using Redux for 'global' state management, it obviously can get confusing.

Ricardo • Apr 27 '21

Great post! Thanks for sharing.

sndp • May 1 '21

Great post. Simple and Nice. Btw, I always check if async await call returned data and ready to render because sometimes it says UserDetails.map is not a function. This way very helpful.

Hashim Lokasher • Apr 27 '21

Great Post

Z4ck987 • Apr 27 '21

I think Yogesh Chavan must use this when he create another tutorial next time.. 😀

Babajide Ibiayo • Apr 28 '21

Excellent Article...thanks for sharing.

I noticed you dispatched a action of type ACTIONS.SUCCESS in the event of an Error response status. Is this a typo?

Yogini Bende • Apr 28 '21

Good catch! It was a type.. fixed it 😇
Thank you 🙌

Peter • Jul 16 '21

What do you think about calling API directly inside of reducer functions?

Ruben Ruvalcaba • Apr 29 '21

Great tip. I've faced many times updating more than one state and never felt well updating each one separately. This technique is lengthy but cleaner and prioritize separatation of concerns.
Thanks!

Some comments have been hidden by the post's author - find out more