Previously, 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?

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 Hooks 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

Why Hooks?

Have you ever wondered why did the React team felt that there was a necessity for a feature like Hooks?

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.

Reasons

1. Cause one is more related to JavaScript than React per se.

   • To work with classes you have to understand how this keyword works in JavaScript.

   • And should also remember to bind event handlers in-class components.

   • Classes don't minify very well and make hot reloading very unreliable.

2. 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.

   • So Hooks assist us in this aspect by allowing us to re-use stateful logic without changing your component hierarchy.

3. 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 componentDidMount and componentDidUpdate.

   Ex: Event Listeners - In componentDidMount and componentWillUnmount.

   • 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 Hooks.

Rules of Hooks

1. 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.

2. Only Call Hooks from React Functional Component: Don’t call hooks from regular Javascript functions. Instead, call hooks from React functional components or from custom hooks.

By following these rules, you ensure that all stateful logic in a component is clearly visible from its source code.

List of Hooks

Basic Hooks:

• useState
• useEffect
• useContext

Additional Hooks:

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

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 Hook doesn’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 use so that you can tell at a glance that the rules of Hooks apply to it as mentioned above.*

Conclusion

So 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 Hook.

Thank you for reading.

Until next time! Happy coding :)