TechnoFunnel
Published in

TechnoFunnel

Creating Custom React Hooks

Create your own Custom Hooks for enhanced functionality

Creating Custom React Hooks
  • Create Re-usable Logical Block
  • Provide Cleaner and Scalable Code
  • React Custom Hooks can use Other Hooks

Creating Simple React Custom Hook

Let's create a simple Custom React Hook:

https://gist.github.com/Mayankgupta688/c77abd405e2f2ee1dfb40612dfae790f
  1. The Custom Hook above is returning some values
  2. The Custom Hook can then be Re-used
https://gist.github.com/Mayankgupta688/178c884ccf0dd853449ccac51c76c6ef

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

https://gist.github.com/Mayankgupta688/5d0693b8ebe7c35ace60a2fcbd9db732
https://codesandbox.io/s/small-moon-2ppzp

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.

https://gist.github.com/Mayankgupta688/a4256b1c9fb4d7b97fa45a4fe14034eb
  • 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
https://codesandbox.io/s/condescending-https-4dzxf?fontsize=14&hidenavigation=1&theme=dark

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

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.

https://codesandbox.io/s/update-employee-count-lvrkw
  • 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:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mayank Gupta

9 Years of Experience with Front-end Technologies and MEAN Stack. Working on all Major UI Frameworks like React, Angular and Vue https://medium.com/technofunnel