YashaswiPatil
Introduction to React Hooks

Introduction to React Hooks

You can use state and other React Features without writing a class.

Yashaswi Patil's photo
Yashaswi Patil
·

3 min read

Hooks are a new Feature addition in React version 16.8 which allows you to use React Features without Class components. They let you use state and other React features without writing a class. So, to understand what are react hooks, One must know React Basics, Functional and Class components, state, props , Handling events etc.

In this Introduction, we will go through:

  • Why Hooks?

  • What will not Change when your using hooks?

Why Hooks?

When we are trying to understand the concept of hooks , we must first understand why the concept was created. Here We have three reasons to go for React Hooks:

Reason 1: This keyword

Trying to understand working of this keyword in JavaScript is very different from how it works in other languages.

  • It is very difficult to implement class components and people will struggle with it but it can be understood if different names are given to it such as state, props and unidirectional data flow.

  • In class components, we have to remember about binding event handlers.

  • Here class don't very well remove all unnecessary characters from source code and make hot reloading very unreliable.

Reason 2: Advanced topics

Very advanced topics in react like higher order components and render prompts pattern.

  • There is no particular way to reuse Stateful component logic.

  • Higher-Order-components(HOC) and render props do label this problem but the code ends up looking unhandy when you restructure your components. when you wrap your components with other components to share the functionality as it makes code harder to follow.

  • We have to share stateful logic in a better way and it was a need. Without changing component hierarchy, hooks helps us in the aspect by allowing us to reuse stateful logic.

Reason 3: Understanding complex components

The placement of the component and the reality of the complex components becomes hard to understand

  • Creating components for complex scheme such as subscribing to events and data fetching. you would have realized that the related code is not organized in one place but scattered across different lifecycle methods.

Eg: Event Listeners- In componentMount and componentWillMount
Eg: Data Fetching- In componentMount and componentDidUpdate

as you can see here, the code which is data fetching is split between the two and its the same with event listeners.

What will not Change when your using hooks?

  • 100% backwards-compatible: Hooks don’t contain any breaking changes.

  • Completely opt-in: You can try Hooks in a few components without rewriting any existing code. But you don’t have to learn or use Hooks right now if you don’t want to.

  • There are no plans to remove classes from React.

  • Hooks don’t replace your existing knowledge of React concepts, instead hooks provide a more direct API to react concepts you already know

  • To use hooks, we need React version 16.8 or higher.

This Blog is in reference with the video: React Hooks-Intro

If you got any questions or doubt, feel free to ping me on Twitter twitter.com/phoenix_ykp

I hope it was a great read for you. If you have any feedback please share it in the comment below.

ReactReactHooks