React Hooks: Beyond useState & useEffect

February 18, 2019 0 Comments

React Hooks: Beyond useState & useEffect

 

 

Photo by Efe Kurnaz on Unsplash

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 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:

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.

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.

Tip: Use Bit to share and reuse your components between apps. It helps you discover and play with components, using them to build faster. Give it a try.

React spinners with Bit: Choose, play, use

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.

reduce function

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.

useReducer syntax

We can destructure this hook into two parts

Destructure the hook

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.

Counter App 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.

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 -

Old school method

And to have access to the current node -

const node = this.myRef.current;

Now let’s see how useRef hook works :

useRef method

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

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 old way of consuming Context

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

Hooks way of consuming 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.

Confusing🤔

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

Simple😁

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 😎 -

Normal Function

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.

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 -

Memoized function

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.

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 🙏 💖


Tag cloud