In this tutorial, we will learn what are HOOKS and how we can use them to write better React. Recently in this series, we have seen so much of hooks and hooks. So here is in detail about React Hooks.
What are Hooks?
Hooks are the functions which extend or "hook into" the React state and lifecycle features to function components.
Earlier these features were available only for class-based components. With the introduction to hooks, we do not require to write class-based components.
Motivation behind the introducing Hooks
Hooks were introduced in React 16.8 (Oct 2018). Let's see why Facebook created React Hooks and what are the problems it solves.
- It was hard to use stateful logic between components: Earlier, only React class components were used for local state management and lifecycle methods. Function components could only be used if you didn't need any state or lifecycle methods. This came with the drawback of refactoring components fromReact function components to React class components every time state or lifecycle methods were needed(and vice versa). With hooks, there is no need for this refactoring.
Harder to understand and reuse the complex components: Maintaining and managing components which contain side-effects(such as network requests etc) with lifecycle methods such as componentDidMount, componentDidUdate, componentWillUnmount was difficult. It was also hard to break the component into smaller parts because the stateful logic was scattered all over. To solve this, Hooks let you split one component into smaller functions based on what pieces are related.
Classes confuse both people and machines: Understanding classes in JavaScript was a major obstacle while learning React. It becomes even more difficult for people who are not from OOP background(including me). React hooks ensures a smoother learning curve and this faster development.
Who should learn Hooks and why?
Facebook has no plans to remove classes from React. Moreover, the hooks are completely backwards compatible and do not replace your knowledge of react concepts.
If you are already using class components
If you are completely comfortable with class components, you may not want to change your class-based components into functional components and you don't need to. However, even the React Docs suggest that you should start learning hooks and write you new components using Hooks. It may take a while to start "thinking in Hooks", but once you get comfortable it will be incredibly easy.
If you have started learning React
If you have started with React recently. then it is just awesome. You do not need to worry about all the overhead that comes with JavaScript classes (inheritance, this, bindings, super etc). React hooks are not only the simplest way to write but also the simplest way to learn React.
So, whether you are an experienced developer or a beginner, you have to work your way through Hooks. Even the react documentation says that Hooks are the future of React.
I think you should have a rough idea now about why we are learning Hooks and the problems it is solving. Even if it is not, don't worry, it is not that important. The important part is to learn and grasp the various Hooks. So let's dive a bit deeper.
Rules for writing Hooks
Hooks are regular JavaScript functions, however, we need to consider these rules while using them:
Hooks can be called only at the Top Level: Hooks can't be called inside other loops, conditions or nested functions. They should be called at the top level just inside the function component.
Hooks can be used only in React function components: Hooks can't be called inside regular functions. They can be called only from Function Components and not anywhere else.
The basic Hooks
- The State Hook - useState() : It let's you add stateful logic to Function Components
import React, { useState } from 'react';
function App() {
const [state, setState] = useStaet('');
/*All other code here*/
}
/////
// THIS IS JUST A SIMPLE EXAMPLE OF useState() hook
The Effect Hook - useEffect() : Let's you perform side effects (such as API calls, Network, requests etc) in Function Components
The Context Hook - useContext() : Allows passing data to children elements without using redux.
useReduce() : An alternative to useState. Used for complex state logic.
useCallback() : Optimize the rendering behavior of Function Components
useMemo : Allows memoization of expensive functions so that you can avoid calling them on every render
useRef() : Allows creating mutable variable. Useful for accessing DOM nodes/React elements, and to share mutable variables without triggering a re-render.
😎 Thank You For Reading | Happy Reacting 💻
Happy New Year to all🎉🙌🥂.
Make 2021 a productive year.