React Hooks: Introduction – Part 1
React features such as state and lifecycle functions are available only for class-based components. Function-based components are referred to as dumb, skinny, or just presentational components because they can’t have access to state and lifecycle functions.
But since the release of
React Hooks, function-based components have been elevated into first-class citizens of React. It has enabled function components to compose, reuse, and share React code in new ways.
What are Hooks?
So, first things first - what's a hook in React?
Hooks are a new feature officially introduced in
React 16.8 that allows developers to use React concepts like state, context, refs, and lifecycle events without classes which were previously only available in class-based components.
- Ex: State of a component
Whereas previously you could use state only within class components. With
it is now possible to use state and other react features without writing a class component.
Note: HOOKS DON'T WORK INSIDE CLASSES, THEY LET YOU USE REACT WITHOUT CLASSES
Have you ever wondered why did the React team felt that there was a necessity for a feature like
This is also a place where your knowledge of React fundamentals and experience in creating react applications, will help you better relate to the different reasons.
Cause one is more related to
To work with classes you have to understand how
And should also remember to bind event handlers in-class components.
Classes don't minify very well and make hot reloading very unreliable.
Cause two kind of touches on advanced topics in React such as Higher-Order Components and the Render Props Pattern. Having worked with react you would've learned that
It is hard to reuse stateful logic between components.
Higher-order-Components and render props patterns do address this problem, but you would have to restructure your components which may be damn annoying, and you end up wrapping your components with several other components to share the functionality so this makes the code Harder to follow.
So there is a need to share stateful logic in a better way.
Hooksassist us in this aspect by allowing us to re-use stateful logic without changing your component hierarchy.
Final Cause is to do with how code is placed in your component and the fact that complex become hard to understand
- Create components for complex scenarios such as data fetching etc. Herewith, the related code is not organized in one place.
Ex: Data fetching - In
Ex: Event Listeners - In
- Because of stateful logic - Cannot break components into smaller ones.
Hooks let you split one component into smaller pieces.
So these reasons are the motivation behind
Rules of Hooks
Only Call Hooks at the top-level: Always use hooks at the top level of your React function. Don’t call hooks inside loops, conditions, or functions. This ensures that all the hooks are called in the same order each time when the functional component renders.
By following these rules, you ensure that all stateful logic in a component is clearly visible from its source code.
List of Hooks
Building Your Own Hooks
Sometimes, we want to reuse some stateful logic between components. Traditionally, there were two popular solutions to this problem: Higher-order components (HOC) and render props. Custom
hooks let you do this without adding more components to your tree.
- Unlike a React component, a custom
Hookdoesn’t need to have a specific signature. We can decide what it takes as arguments and what, if anything, it should return. In other words, it’s just like a normal function. Its name should always start with
useso that you can tell at a glance that the rules of Hooks apply to it as mentioned above.*
Hooks offer a chance to strip a layer of complexity inherent in classes away from React and - once you’ve got your head around a slightly different way of thinking - build components that are cleaner, more modular, and are more explicit in their data flow.
Further in the series of React Hooks, we will talk in detail about each
Thank you for reading.
Until next time! Happy coding :)