Common React Design patterns: Custom Hooks

I started a series called "Common React Design Patterns" in which I want to practice some of the major design patterns used in React with each other. So we can be confident enough to apply it in our day-to-day development.

Knowing these patterns is helpful because it can save our time as developers, and it would present the application as a high-performance and delightful experience for our customers.

Custom Hooks

One of the basic design patterns that we use daily is "Custom Hooks." It is vastly used as a preferable way to modularize and apply the DRY principle in our application. We can share complex behavior between multiple components by using a custom hook.

Sample

useDebounce Hook

Tip : Debounce delays invoking a function until after wait milliseconds have elapsed since the last time the debounced function was invoked.

import { useEffect, useState } from 'react' function useDebounce<T>(value: T, delay?: number): T { const [debouncedValue, setDebouncedValue] = useState<T>(value) useEffect(() => { const timer = setTimeout(() => setDebouncedValue(value), delay || 500) return () => { clearTimeout(timer) } }, [value, delay]) return debouncedValue } export default useDebounce 

By using return function of useEffect after changing value or delay, React clear the timer identifier and function inside setTimeout not going to run. So it debounces. 👌

Usage

import React, { ChangeEvent, useEffect, useState } from 'react' import { useDebounce } from 'usehooks-ts' export default function Component() { const [value, setValue] = useState<string>('') const debouncedValue = useDebounce<string>(value, 500) const handleChange = (event: ChangeEvent<HTMLInputElement>) => { setValue(event.target.value) } // Fetch API (optional) useEffect(() => { // Do fetch here... // Triggers when "debouncedValue" changes }, [debouncedValue]) return ( <div> <p>Value real-time: {value}</p> <p>Debounced value: {debouncedValue}</p> <input type="text" value={value} onChange={handleChange} /> </div> ) } 

Credit: useHooks-ts *

Libraries

You do not have to build common scenarios from scratch. There are fantastic packages out there you can quickly learn and use. Here I listed some reliable players out of sort.

react-use * ⭐️ 29.6k / 🔽 958k
ahooks * ⭐️ 9.1k / 🔽 74k
awesome-react-hooks * ⭐️ 8.1k / 🔽 74k
usehooks-ts * ⭐️ 1.6k / 🔽 44k
react-recipes * ⭐️ 850 / 🔽 1.2k
react-hanger * ⭐️ 1.8k / 🔽 3.3k

Refrences

React offcial doc *