Introduction to React Hooks

I love using React Hooks, because they make our lives a lot more easier. But it is totally fine if you find them difficult to understand at first, as they look pretty confusing when you start learning them.

So, let’s learn about them from scratch.

🔰 WHAT REALLY HOOKS ARE ?

• React Hooks (or simply Hooks), are a new feature introduced in React 16.8 which can make your functional components stateful. By using React Hooks, you can easily build your whole react app without using class components.
• Just with functional components, you can now implement the functionalities of class based components such as state management, life cycle methods, side effects and many more.
• React Hooks are fully opt-in, i.e. you do not need to rewrite your existing code of class components if it is simple and you feel confident.
• Moreover, they are 100% backwards-compatible as they do not replace your previous knowledge of React concepts.

🔰 WHY HOOKS ?

• To work with class components, you have to first understand how this keyword works in JavaScript which is very different from how it works in most other languages.
• You have to remember to bind event handlers in class components.

With Hooks, since you are not working with class components, you will not have to face these problems.

🔰 RULES TO USE HOOKS….

The first and foremost thing you must keep in mind while using Hooks is that:

Some other things that you must follow:

• DO NOT use Hooks inside loops, nested functions or conditionals, instead always use them at the top level of React functions. Following this we ensure that Hooks are called in same order every time a component renders.
• ALWAYS call Hooks from React functions, rather than calling them from other regular JavaScript functions.

Thank you for reading, Have a nice day :)

Originally published at https://www.linkedin.com.