DEV Community

Cover image for 5 Awesome React Hooks ⚛️

5 Awesome React Hooks ⚛️

tuliocalil profile image Tulio Calil ・2 min read

The React community has created incredible hooks since this feature was released, I will show some of the 5 that I use and help me a lot.

generated with Summaryze Forem 🌱

Image lazy load 🌄

React use lazy load image uses the Intersection Observer API to provide a performant solution to lazy loading images, it a super lightweight so won't add any extra bulk to your app, and its very simple to use:

import React from 'react';
import useLazyLoadImage from 'react-use-lazy-load-image';

function App() {

  return (
    <div>Lots of content that means the image is off screen goes here</div>
    <img src="IMAGE DATA" data-img-src="" alt="My image" />

Enter fullscreen mode Exit fullscreen mode

Outside click hook 🖱

I think that useOnClickOutside is one of the bests, with this hook, you can easily capture outside clicks from an element, very useful for a modal for example.
Here is a demo code:

import * as React from 'react'
import useOnClickOutside from 'use-onclickoutside'

export default function Modal({ close }) {
  const ref = React.useRef(null)
  useOnClickOutside(ref, close)

  return <div ref={ref}>{'Modal content'}</div>
Enter fullscreen mode Exit fullscreen mode

Get browser location 🌎

useLocation help you to get browser location.

import {useLocation} from 'react-use';

const Demo = () => {
  const state = useLocation();

  return (
      {JSON.stringify(state, null, 2)}
Enter fullscreen mode Exit fullscreen mode

Read from and Write to clipboard ⌨️

useClippy is a small hook that helps you to easily read from and write to the user's clipboard board:

import useClippy from 'use-clippy';

export default function MyComponent() {

  const [clipboard, setClipboard] = useClippy();

  return (
        onClick={() => {
          alert(`Your clipboard contains: ${clipboard}`);
        Read my clipboard

        onClick={() => {
          setClipboard(`Random number: ${Math.random()}`);
        Copy something new
Enter fullscreen mode Exit fullscreen mode

Set document title 👨🏽‍💻

@rehooks/document-title allows you to set the page title simple calling it from a component and passing the title string:

import useDocumentTitle from '@rehooks/document-title';

function MyComponent() {
  useDocumentTitle('Page Title');
  return <div/>;
Enter fullscreen mode Exit fullscreen mode


These are some of the hooks that I use and save me a lot of time.
Do you know some incredible hooks? Comment here!
All the best!

Discussion (4)

Editor guide
lpyexplore profile image

Hello, I am a front-end enthusiast and I am from China. I just read your article and think it is very good. So I want to translate your article into Chinese and publish it on a Chinese blog site. I have nearly 20,000 fan readers. I want to share your article with more people. I want to ask for your information. Opinion, can I do this? Hope to get your reply

tuliocalil profile image
Tulio Calil Author

Hi! feel free 🥰

sohhamm profile image
Soham Sarkar

nice hooks!

around25team profile image

Great idea for an article! How about using Hooks to delegate React dialogs? 😃