Exploring more about reducers, pure functions,side-effects ,useEffect() ,async calls and context..!

There are few new things related to reducers, pure functions,side-effects,useEffect() , async calls and context which I came across while building my e-commerce application. Let’s see them one by one.

React provides us with several hooks to manage our application state. Two of them are useState() and useReducer(). useState and useReducer basically both do the job of providing the states and a function to update /set the state. So what exactly should be used ? Should we use useState() or should we use uesReducer() if both of them do the same task! 🤔

Why should we use useReducer()?

useReducer is better to use when the current state depends on the previous state.

It can be used when the state consists of more than primitive values like nested object or arrays.

useReducer gives you more control over state management and helps in optimizing performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

Reducers are pure functions. This means they have no sideeffects and they return same outcome given the same input. They do not mutate the outside objects . Always remember that we should not mutate the original state in reducer functions.

handling sort()

sort is an impure function unlike map and filter which are pure,as it mutates the original array and do not return a new array. As a workaround for this, instead of sorting data like

data.sort((a,b)=>return a-b )

we can do something like this

[…data].sort((a,b)=>return a-b ) This will return a new sorted array and we are not mutating the original data.

Well e-commerce app can have multiple states and managing them all can be tedious job at times. Context API can be used in this situations for avoiding prop dilling and making state management easy!.

CONTEXT API

Context API is a built-in React tool used for state management. It majorly solves the problem of prop drilling.

To use Context:-

1. Create Context
2. Create Provider for Context
3. Consume data in Context

Context can be used while

1. Setting up dark and light modes in application.
2. Adding localization to React apps.
3. Adding authentication.

Why do we use IIFE inside useEffect()???

Most of the time things that we do inside an useEffect() are making async calls for fetching data from apis or backend. While doing this you might have came accross this warning,

Warning: usEffect function must return a cleanup function or nothing .Promises and useEffect (async() are not supported)

When we use async function inside an useEffect ,it returns a promise .But useEffect doesnt expect a callback function to return a promise ,rather it expects that nothing is returned or else a function is returned.

As a workaround for this warning,we can use self invoking async function inside useEffect()

To make it more cleaner ,you could define a function and then call it.

So this was all that I learnt while developing my ecommerce app. Lots and lots of new things where encountered by me and I have tried sharing few of them above .

Thanks for reading it till the end.

Happy coding! Happy learning! 😃

Feel free to connect with me on Twitter , LinkedIn ,and Github