React Hooks tutorials for beginners-1

Image for post
Image for post
React Hooks

Welcome to a brand new series. We will learn everything about react hooks in this series.

Prerequisties
To learn react hooks, we need to know about the basics of React. It is better to know all about class based react, because that is still the predominate way people write React code. You can check the react basics course on my site for the same. The link for the same is here.

What are hooks?
Let’s see what are hooks first.

  • Hooks are a new feature addition in React version 16.8, which allow you to use React features without having to write a class
  • Eg — state of a component
  • Hooks don’t work inside classes

Why hooks?
So, when the class based components were so good, why did we required hooks. Some of the reasons are-

  • We need to understand how this keyword works in JavaScript and also bind event handlers in class components.
  • Classes don’t minify well and make hot reloading unreliable.
  • Complicated HOC and render props patterns to reuse stateful component logic.
  • When create components for data fetching, the code is not organized and have to use different lifecycle methods.

useState Hook
We will now learn directly about the most used hook, which is the useState hook. We will create a new react app by giving the below command in any terminal.

After that change to the directory and do npm start to start our react app. We are going to see a simple counter application using, class based component and then change it to use useState hook.

Open the code in VS Code and create a new components folder inside the src. Inside it create a file ClassCounter.js. We are creating a simple class based component, which have a state count. The state is incremented through a click of a button.

Now, add this component to App.js file, after deleting the basic content in it.

Now, our react app at http://localhost:3000/ will have this working button.

Now, it’s time to convert it into hooks. We will create a functional component HookCounter.js inside the components folder.

Here, we have a named import for useState in the import statement. After that at line 4, we are using array destructuring to create count and setCount. We are also initializing the initial value of count to 0, in useState(0).

After that in our button, we are setCount function with the count variable addition to 1. This setCount is exactly similar to this.setState in a class based component.

Now, add this HookCounter component to App.js file.

Now, our react app at http://localhost:3000/ will have similar working button for hooks.

This completes part-1 of the series. You can find part-2 here.

You can find the code for the same in this github repo.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store