Yeah, this article is based on Advance hooks, so I assume that you are aware of hooks and familiar with the usage of basic hooks like useState and useEffect. So if you don’t know about hooks you can look it up in the official React docs. But I’ll be nice😉, and give a quick introduction to hooks.

Hooks ???🤨

Hooks are the latest features released in React version 16.8.0. While developing React applications, we have been using classes for creating a stateful component, but this whole concept is about to change. Hooks are about to revolutionize on how the React code is to be written. Previously, we were not able to use state in the functional components but now with the help of hooks, we can hook state, lifecycle methods and other class-based features to functional components. In layman terms, Hooks put your functional components on steroids.

Learn more about React hooks:

So… classes won’t work ??

Naah, hooks are a brand new API, it doesn’t affect your previous knowledge. If you don’t like hooks(which I highly doubt) you can still go with your class based components like you used to.

What’s wrong with the class-based components?😒

I don’t know about you, but I do hate binding this every time I create a function. this still haunts me😨. Nothing is wrong, but why use something that confuses you when you can use something that’s easier to understand.
Functions are easy to comprehend than the classes(No debate in that).

If you don’t know about useState and useEffect hook, then just click here.

Sorry for the delay, let's get into the not much talked about hooks.

Useful tip: Bit helps your team collaborate on shared components. Each component can be independently developed, tested and used across your apps. Bit handles the entire lifecycle of each shared component so you can focus on building great apps.

useReducer hook ❤

This one is my favorite hook. If you are a part of the redux world then you must know what a reducer is. And if you are not, Don’t worry, because….

A reducer is a function that takes two arguments and returns one.

Reducer is a function that takes 2 arguments(state and action) and returns the new state based on the type of the action.

Remember the reduce function? Yeah, the concept is the same as useReducer hook uses.

Above is the ES6 reduce function, the thing to notice is that the reduce method takes two arguments, a function, and the initial value and returns a single value. Same as the useReducer hook. It takes two arguments first being the reducer function(returns new state) and second being the initial state.

We can destructure this hook into two parts

• new state
• dispatch method

newState is the updated state while the dispatch method is used to dispatch actions(send actions to the reducer function). State updations are made when an action is fired. So, when an event occurs, the dispatch method dispatches an action to the reducer function and based on the action the state is updated.

An action is a javascript object that has a ‘type’ property and a ‘payload’ property

So the flow would be something like this:-

Event occurs -> Dispatch action using the dispatch method -> Reducer updates the state based on ‘type’ of action

Below is the code snippet for a simple Counter component.

The initial count value is 0 and the reducer returns the updated state according to the action’s type. If the action type is ‘add’, increment the state by one if the type is ‘subtract’ return state minus one.

So… the above-mentioned flow works as follows -

The event occurs (here the button click) => action is dispatched using the dispatch method => on the type of action, the reducer does its work.

Below is the CodeSandBox demo for the Counter App.

useRef hook

Refs are used to access DOM or React elements rendered in the render function. And the standard way of using refs in previous React versions was something like this -

And to have access to the current node -

const node = this.myRef.current;

Now let’s see how useRef hook works :

We have access to the input tag. Much simpler than before 😎.

useContext 🔥

Context solves one of the React’s biggest problem, prop drilling. Render props was the suggested method required to consume context, which isn’t an elegant way to do so.

The useContext hook provides a much clean and optimized way of using the context.

One problem with the old way was that there was a lot of nesting. If we had more parent contexts then the usage of those contexts could be as messy as hell.

See, complicated nesting for getting just two values. Let’s see the hook’s way

useMemo hook

React has a hook called useMemo, and it basically provides us to memoize the complex and expensive functions so that we could avoid calling them on every render.…

Woah.. woah.. hold on..hold on…memoize??..What is that?😕

Ah, my bad. In layman terms, memoize means “avoid performing the same task(or running the same function) for the same values(same parameters)”. I am going to spit out an example which I have taken from one of my colleague’s talk. (I would highly recommend you to check out his slides, here)

Let’s say, we have to write a function to find the square of a given number. That’s easy peasy 😎 -

See, we calculated the square of 16 twice. It’s okay because it’s not an intensive operation if it would have been something expensive then we would have to memoize it.

So..How to memoize it??

We could create a mini-cache and store the former calculated values in the cache. And next time, we don’t need to calculate the square of 16. Instead, we can pick the value from the mini-cache. Here’s how -

Makes sense, But what is its use case in React??🙄🙄

In React, we don’t want to re-render a component even though the props are the same. So, we should memoize the respective component using the useMemo hook so that the component will re-render only when there is a change in the props.

Cool, useMemo takes two parameters, a callback function and an array of inputs.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo will only recompute the memoized value when one of the inputs has changed. Thus, optimizing the performance.

Conclusion

In this article, we learned about some cool stuff related to React Hooks. Though there are a lot more dope concepts which I’ll cover in my upcoming articles. Hope you liked this article, Please feel free to comment and ask anything. Thanks for reading 🙏 💖

Learn more