- Only call Hooks at the top level of your React components. Don’t call Hooks inside loops, conditions, or nested functions.
- Only call Hooks from React functions or other Hooks.
- Keep your Hooks simple and small, and make sure they don’t contain any complex logic.
Advantages of custom hooks
Custom React JS hooks offer three major benefits over standard library hooks: Reusability, readability, and testability.- Reusability: It is provided by custom React JS hooks because once a custom hook is built, it can be used repeatedly, making the code clearer and taking less time to write. Additionally, it speeds up code rendering because a custom hook doesn't have to be drawn repeatedly while the entire code is being generated.
- Readability: To make the code more readable, one can utilise custom hooks instead of High-Order Components (HOCs). If layers of providers surround the components, consumers, HOCs, render props, and other abstractions a situation known as wrapper hell complex codes may become difficult to read.
- Testability: In React, test containers and presentational components are typically tested separately. When it comes to unit testing, this is not a problem. However, it gets challenging if a container contains many HOCs because integration tests must be performed on both the containers and the components.
Making Your First Custom Hook
Don't repeat yourself is a simple abstraction that may be played with a counter.I'll create a new file called useCounter.js:
