Creating Custom React Hooks
Create your own Custom Hooks for enhanced functionality
Technofunnel presents another article on Custom Hooks that can be created in React to add further functionality to the program. In this article, we will be creating a simple Custom React hook and will try to understand the dynamics behind the creation and usage of custom Hooks.
The main intent of Custom Hooks are:
- Separate Logic from User Interface
- Create Re-usable Logical Block
- Provide Cleaner and Scalable Code
- React Custom Hooks can use Other Hooks
Hooks are a great addition to the React programming. We have many inbuilt React hooks which are used to perform a specific task. If you are new to React hooks, you can look for the following articles…
Follow us on our YouTube Page:
Creating Simple React Custom Hook
Let's create a simple Custom React Hook:
The above code represents a simple Custom Hooks that return multiple values from it. Following need to be taken note of in the above code:
- “use” appended to function name representing Custom Hooks
- The Custom Hook above is returning some values
- The Custom Hook can then be Re-used
Let's see how the above-created hook can be used in other parts of the application. We can simply call this Hook function and extract the returned data from it. The above hook returns an array containing “userName” and “userDesignation”, let's try using the above custom React Hook Created…
In the above code, we are using the custom hook created and the values returned from the custom Hook is extracted inside the variables “name” and “designation” inside “ApplicationComponent” Component. The above-created custom hook does not add any lot of value to the application, but it represents the simple custom re-usable component storing some data and returning the data from it.
Passing Parameter to React Hooks
Let's add another piece of code where we will be sending parameters to the Custom Hooks to set up the initial values of the data that need to be returned from the Custom Hook
In the above code, we are passing the parameter to the hook “useCustomHook”, these parameters can then be used to define some initial data for the component.
You can play around with the above code on the following Url:
The custom react hooks created so far does not make much sense in real-time scenarios. Now let consider some scenarios that represent some real-time scenarios, where the custom react hooks can be created and used.
Using “useState” Hook in React Custom Hooks
Another great feature which Hooks offer is the ability to use other hooks inside the custom hook created. In the sample below, we will be using the “useState” hook inside the custom hook created.
Lets first look for the code…
In the above code, the following concepts need to be understood:
- We have created a custom React Hook “useCustomTimeHooks”
- The custom hook use “useState” hook internally
- Custom Hook returns the state variable “time” from it
- “time” property is retrieved and rendered in the component
- Custom Hook updates the time every second
- The “time” property is updated every second in the rendered component
You can play around the code in the below online editor:
The key takeaway from the code above is:
We have created a new Custom Hook which is taking care of updating the “state” data. The “state” variable “time” created, can be used in multiple parts of the application. And the updates to this property are taken care of, by Custom Hook, instead of getting taken care of by the “ApplicationComponent”.
The benefits offered are:
- The “state” variable “time” is not controlled by the component
- Responsibility to manage “time” is taken care of, by the Hooks
- The Updated Time Counter functionality can be re-used.
- We are dividing the main application into multiple subparts.
- We are removing Business Logic from the Component
The benefits offered are a reusable component taking care of certain state data in the application and the components using the custom hooks need not take care of the business logic of certain state variables of the Application.
Using “useEffect” Hook in React Custom Hooks
Another aspect to add to the custom hooks is the usage of “useEffect”. “useEffect” can be used in the React application to process some code in React while the component bootstraps or re-renders.
In the component below, we need to display the total number of employees associated, the data for the employee will be extracted asynchronously. We will be creating a custom hook that can take care of extracting the data asynchronously and then update the state variable containing the count of employees in an organization.
You can play around the code in the below online editor:
In the code above, the state variable has been named as “empCount” and the value is maintained by custom Hook named as “useEmployeeCountHooks”. The component displayed on the Application “ApplicationComponent”, use the available “useEmployeeCountHook” to manage and update the value of employee count once data is available asynchronously.
The benefit offered from the above code are:
- “ApplicationComponent” is not responsible for managing “empCount”
- Reduces the complexity of View Component “ApplicationComponent”
- Custom Hook created is re-usable
- Business logic has been extracted away from the View Component
Closure:
Create Custom Hooks to reduce the complexity of the View Components. Hooks are an amazing addition to React and must be learned, understood, and used. For more such articles, please don't forget to follow me:
