What are Hooks?
Hooks are a new addition in 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.
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:
- 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.
For example, actions like data, fetching are usually done in
componentDidUpdate, similarly, in case of event listeners, it is done in
componentWillUnmount. These develop a scenario where completely different codes like data fetching and event listeners end up in the same code-block. This also makes impossible to brake components to smaller components because of stateful logic. Hooks solve these problems 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.
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 and 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.
- React Props & Hooks Complete Reference
- What is the difference between React Native and React?
- Async Hooks in Node.js
- ReactJS Custom Hooks
- Introduction to React Native
- React.js (Introduction and Working)
- Introduction to React-Redux
- Material UI Introduction and Installation for React
- How React Native works?
- ReactJS | State in React
- Getting started with React Native? Read this first !
- Why You Should Choose React Native?
- Android & iOS App development using React Native with Expo
- Guess the number with React
- How to Use Particles.js in React Project ?
- React.js | Uncontrolled Vs Controlled Inputs
- Difference between React Native and Flutter
- File uploading in React.js
- How to Deploy Your React Websites on GitHub?
- How to Create Button in React-Native App ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.