How to create React Hooks? - A simple guide

I love React, and so do you! The Javascript ecosystem has grown so much that now we have amazing frameworks like React, Vue, Svelte (Sorry Vue!), and amazing tools like Vite, Webpack, Rollup, and many more. Nowadays it’s mostly declarative coding than the old imperative style we used to follow a while back.

Hooks

Hooks are nothing but a Javascript function where you can move your repetitive logic in React. If you understand the beauty of Hooks, you would find yourself writing clean React code. Hooks were introduced in React v17, since then it is driving the developers crazy.

Almost all developers use React Hooks in their daily code. A few of the famous and popular hooks are useState, and useEffect. You are not a React developer if you have not used these things. Gone are the days of class-based components. Now everything has become functional.

Creating a React Hook

There is only one rule that you have to follow to create a react hook - The function must start with “use”. This will allow React to understand the function is a hook and it doesn’t treat it as a normal function.

Creating a simple timer in React using Hooks

Okay, let us create a simple hook that can be used as a timer. You can follow this tutorial for creating a timer with hooks.

// hook.js

import {useState, useEffect} from 'react'

export const useTimer = () => {
	const [tick, setTick] = useState(0)
	const date = new Date(0)
	date.setSeconds(tick)
	// This converts seconds to mm:ss format
	const timeString = date.toISOString().substr(14, 5);

	// Runs only on init
	useEffect(() => {
	    const interval = setInterval(() => setTick(t => t+1), 1000)
	    return () => clearInterval(interval)
  });

	// Return the timer string finally
	return timeString
}

Then you can use it in your component like this in a simple way.

export const Timer = () => {
	// As simple as that
	const timeString = useTimer()
	return <div>{timeString}</div>
}

How cool is that? The state logic has been moved into the hook and you don’t have to worry about anything else. Thus Hooks can be used to separate UI logic from business logic. You can learn more about handling form inputs with hooks.

I’ve created the sample code for you to try in the Codesandbox. You can play with it.

Hope you liked this tutorial, follow for more. Share this with your colleague or friend. Thank you!