Class components Vs React Hooks
One way data flow in React help us to build scale-able and compose-able UI component, but managing to state and UI separation logic not handle properly using Class Component.
Class Component?
class syntax is one of the most common ways to define a react component,
class component has some additional features like handle life-cycle methods, state manipulation.
Previously we must need to use class component instead of function component if we require to use life-cycle methods or state manipulation.
Problem with the Class component?
There are so many lines of code when we write a class component and also include some complex logic, so it’s hard to refactor and test.
Also class component contains duplicate logic between a different component and life-cycle methods.
There are also performance issues with the class components when compare to functional component with “React Memo”.
In the above link, Is one of the drafts for a stateful functional component in react,
According to the draft we get a state as second parameters to the function and we use “this” in functional component to wrap state setters.
But we are using “this” which is anti-pattern for functional component.
React Hooks?
Many iterations later we are settled on “React Hooks API” for preventing class component drawback.
Hooks help to use to solve class component problems. Using hooks we are solving “Separate Concerns” problems for UI and state/life-cycle handling.
We are divided into complex components and use state manipulation and life cycle logic for functional components.
How/Why Hooks Amazing Feature?
Basic Example (From Hook Reference)
In the following code, we are change state in a functional component using Hooks.
0 is initial state and count is the state and set count is state setter
Using Hooks also created our own custom hook, Refer following example
We have created a custom hook for creating timer count down.
Comparison between class component and hooks
Rule of hooks
There are some rules to follow while using react hooks!
- Only Call Hooks at the Top Level.
- Only call Hooks from React Functions.
- Hooks don’t work inside classes.
Other links.
