What is react hooks

React Hooks introduction

This is a brand new season of React Hooks, where we are going to discuss about the built-in hooks in React! In this episode we are going to discuss about React hooks in general.

What are hooks?

Hooks lets you use state and other lifecycle methods inside a functional component.

Before the introduction of hooks, if we want to have a component with state and other lifecycle methods then we need to write a class component.

What’s wrong with the class component?

  1. One should be Familiar with “this” keyword. Say we are coming from Java background. There is slight difference in behaviour of “this” keyword from Java and Javascript
  2. Often repeated logic inside different lifecycle methods

How about functional component?

Functional components are comparatively smaller in size. There is no need to write constructor and other “this” blinding logic inside your functional component.

Advantages of functional components:

  1. Multiple hooks in single component
  2. Smaller components

THe feature missing form functional components compared to class components was the abilty to use state and other lifecycle methods.

Later, React 16.8 version shipped with hooks. It was a game changer from then!

There are certain rules to follow while using hooks.

  1. Call Hooks at the Top Level. Meaning, it should not be called inside a for loop or if condition
  2. Only Call Hooks from React Functions

We have an eslint plugin called eslint-plugin-react-hooks which reports if something goes wrong on using react hooks.

It is just an introduction to react hooks and in upcoming episodes we look deep into every hook.

Built with ❤️ and  Gatsby