Background Image Courtesy — https://www.hdwallpapers.in/fishing_dream_moon-wallpapers.html

Getting started with React Hooks

React Hooks... What is it? Does this mean that I need to learn React all over again? This must be the thoughts in your head when you started hearing about React Hooks, the new addition to React 16.8.

These were the very thoughts of mine as well and I should tell all the readers no, you don’t have to learn anything all over again. React Hooks just eases what you were already doing and you just need to start applying it to see its benefits.

In this post, I will introduce you to two hooks which will be the replacement for your state management and lifecycle methods. I will let you know how to use it and why it is awesome through examples.

State and useState Hook

Recall what you previously do to implement a state component. It would ideally look like this.

Now, what do you think the code would be to write this using Hooks.

Can you see the difference? How the lines of code you need to write to create a stateful component are reduced significantly.

And a few amazing things which come along with this is,

• you can use as many states as you like.
• State should not be an object as previously, rather it can be anything you want.

You just need to pass the initial state touseState hook and it will return you two variables in an array. A variable holding the state and a function that you can call to update it.

If you need to maintain more than one state you can just write it as follows.

const [ count, setCount ] = useState(0);
const [timer, setTimer] = useState(new Date());
const [title, setTitle] = useState("Hooks are awesome");

That is all you want to know about creating stateful components and managing state via Hooks.

Let’s move on to the next hook which lets you do everything you did from componentDidMount , componentDidUpdate , componentWillUnmount lifecycle methods.

Lifecycle methods and useEffect Hook

In your component, you might need to set up a subscription, fetch data from an API and manually update DOM when something changes and that’s when you need to use useEffect Hook as you previously did with lifecycle methods.

Let’s compare the implementation.

This is a simple Timer implementation using lifecycle methods. Now let’s see how we can do the same using hooks.

Wow... Is that it? But what are we doing here? I’ll tell you what is happening.

All you want to do is pass a callback function to useEffect hook which will be called upon every update to the components including the first time the component is loading.

And if you want to clean up something when your component in unmounting then all you need to do is specify it with a return as you can see in the previous example.

Consider an example of performing an API call when the component is loaded.

Here note that we have a second argument passed to useEffect. We can pass state or prop variables here for which we need to update our DOM upon its change. This second argument tells the useEffect hook to only execute the code inside it when only one of the values for variables we specified is changed.

Here as you only need to perform the API call once to get details, i.e only when the component is loaded at first, you should always remember to pass an empty array as the second argument to useEffect.

Note that in this example if you don’t specify an empty array, it will result in an infinite number of calls to the API. We call the API and we update the state, it will cause a re-render, render will trigger useEffect and so on.. :)

Here’s how you can specify props and states that need a DOM update upon its change to useEffect hook.

Here, in this example, you can see how useEffect is used to trigger a re-render of the component each time the question id changes.

Same as useState hook you can use useEffect hooks as much as times you like. you can separate your code using multiple useEffect hooks for different concerns.

Congratulations! Now you have successfully started your journey with React Hooks and know everything you need to implement a basic React application with hooks. There are a few rules for you to follow.

1. Do not use Hooks inside Loops or Functions.
2. Only use Hooks in React functional components.

If you want to expertise yourself more on Hooks have a look at the Hooks API reference.

Your questions and feedback are welcome.