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?
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?
- 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:
- Multiple hooks in single component
- 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.
- Call Hooks at the Top Level. Meaning, it should not be called inside a for loop or if condition
- 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.