In this article we will be learning about hooks in React, rules for using hooks and their implementation.
What are Hooks?
Hooks are used to give functional components an access to use the states and are used to manage side-effects in React. They were introduced React 16.8. They let developers use state and other React features without writing a class For example- State of a component It is important to note that hooks are not used inside the classes.
Note: Hooks cannot be used with class components
Why the need for Hooks?
There are multiple reasons responsible for the introduction of the Hooks which may vary depending upon the experience of developers in developing React product. Some of them are as follows:
- Use of ‘this’ keyword: The first reason has to do more with javascript than with React itself. To work with classes one needs to understand how ‘this’ keyword works in javascript which is very different from how it works in other languages. It is easier to understand the concept of props, state, and uni-directional data flow but using ‘this’ keyword might lead to struggle while implementing class components. One also needs to bind event handlers to the class components. It is also observed by the React developers team also observed that classes don’t concise efficiently which leads to hot reloading being unreliable which can be solved using Hooks.
- Reusable stateful logics: This reason touches advance topics in React such as Higher-order components(HOC) and the render props pattern. There is no particular way to reuse stateful component logic to React. Though this problem can be solved by the use of HOC and render props patterns it results in making the code base inefficient which becomes hard to follow as one ends up wrapping components in several other components to share the functionality. Hooks let us share stateful logic in a much better and cleaner way without changing the component hierarchy.
- Simplifying complex scenarios: While creating components for complex scenarios such as data fetching and subscribing to events it is likely that all related code is not organized in one place are scattered among different life cycle methods.Hooks solve this problem by rather than forcing a split based on life-cycle method Hooks to let you split one component into smaller functions based on what pieces are related.
Rules for using hooks
- Only functional components can use hooks
- Calling of hooks should always be done at top level of components
- Hooks should not be inside conditional statements
Let us see an example where we will use hooks to manipulate state in a component.
Create a react application and write the below code in your index.js file
Example:
Javascript
import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; function App() { const [click, setClick] = useState(0); // using array destructuring here // to assign initial value 0 // to click and a reference to the function // that updates click to setClick return ( <div> <p>You clicked {click} times</p> <button onClick={() => setClick(click + 1)}> Click me </button> </div> ); } export default App; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); |
Output: We have used useState hook which lets functional components have access to states with the help of which we are able to manipulate states
Important things to remember while using hooks:
- Hooks are available for React version 16.8 or higher.
- Hooks are completely opt-in. Use it partially for a few components or base the whole project on it as per your needs without rewriting any existing code.
- Hooks don’t contain any breaking changes and are 100% backward-compatible.
- The react team has no plan to remove classes from React.
- Hooks can’t be used inside class components but the app can definitely mix class-based components and functional components with Hooks.
- Hooks doesn’t violate any existing React concepts. Instead, Hooks provide a direct API to react concepts such as props, state, context, refs and life-cycle.
