If you are a beginner in React and are using classes all-around in your code then you probably would have noticed that sometimes it's not easy to keep track of your states, how to update them, how to render them, etc. For me, particularly, I was overwhelmed by the 'this' keyword.
'this' here, 'this' there…
It wasn't a very pleasant experience. But no worries. Hooks to the rescue!
In this post, I'll explain why Hooks is so much easy to understand and how it can make your code more readable than it was before. I'm also going to introduce you to some of the awesome React Hooks out there❤!
🤔 What are Hooks anyway?
Before diving into some examples, it is important to explain this concept first. A hook is a function that can let you inside a React state and lifecycle features (accordingly to the React Documentation, a hook let you 'hook into' a React state).
If you worked with a function in React before, sometimes you had the need to add some state to it. Before Hooks, you had to convert this function to a class (enabling you to use State and setState()). With Hooks, you can achieve the same result in a functional component.
React Hooks let you use state, and other React features without having to define a JavaScript class. It’s like being able to take advantage of the cleanliness and simplicity of a Pure Component and state and component lifecycle methods. This is because Hooks are just regular JavaScript functions! This lends itself to cleaner and less clunky code.
The code's also a lot more readable, which is a massive advantage of Hooks. For beginners who are just getting started with React, it’s easier for them to read the first block of code and easily see exactly what’s happening. With the second block, we have some extraneous elements, and it’s enough to make you stop and wonder what it’s for.
Another great thing about hooks is that you can create your own! This means that a lot of the stateful logic we used to have to re-write from component to component, we can now abstract out to a custom hook — and reuse it.
❓ Why Hooks
We know that components and top-down data flow help us organize a large UI into small, independent, reusable pieces. However, we often can’t break complex components down any further because the logic is stateful and can’t be extracted to a function or another component. Sometimes that’s what people mean when they say React doesn’t let them “separate concerns.”
These cases are very common and include animations, form handling, connecting to external data sources, and many other things we want to do from our components. When we try to solve these use cases with components alone, we usually end up with:
- Huge components that are hard to refactor and test.
- Duplicated logic between different components and lifecycle methods.
- Complex patterns like render props and higher-order components.
We think Hooks are our best shot at solving all of these problems. Hooks let us organize the logic inside a component into reusable isolated units.
Hooks apply the React philosophy (explicit data flow and composition) inside a component, rather than just between the components. That’s why I feel that Hooks are a natural fit for the React component model.
Unlike patterns like render props or higher-order components, Hooks don’t introduce unnecessary nesting into your component tree. They also don’t suffer from the drawbacks of mixins.
📌 Rules for using Hooks
Before we create our own Hook, let's review a few of the major rules we must always follow.
- Never call Hooks from inside a loop, condition, or nested function
- Hooks should sit at the top-level of your component
- Only call Hooks from React functional components
- Never call a Hook from a regular function
- Hooks can call other Hooks
📎 Referances
Conclusion ❤
Using hooks helps us in improving our design pattern of our code and performance of our app, and I encourage you to use it in your projects too. Class Components are not getting obsolete so one doesn’t need to rewrite Class Based Components using Hooks. Please reach out to me for any queries regarding this.
Top comments (0)