Teach you to create custom hooks in react

Teach you to create custom hooks in react

1. What are custom hooks

Logic reuse

Simply put, using custom hooks can extract certain component logic into reusable functions. A custom hook is a Javascript function that calls other hooks starting from use .

2. When not using custom hooks

Example 1: When our entire page needs to obtain the coordinates of the user's mouse movement, without using the hook code, we can write

  const [position, setPosition] = useState({
    x: 0,
    y: 0
  })
  useEffect(() => {
    const move = (e) => {
      setPosition({ x: ex, y: ey })
    }
    document.addEventListener('mousemove', move)
    return () => {
      document.removeEventListener('mousemove', move)
    }
  }, [])
  return (
    <div>
      x:{position.x}
      y:{position.y}
    </div>
  )

Example 2: When we have an image on our page that follows the mouse, we can also write it like this without using the hook code:

const [position, setPosition] = useState({
    x: 0,
    y: 0
  })
  useEffect(() => {
    const move = (e) => {
      setPosition({ x: ex, y: ey })
    }
    document.addEventListener('mousemove', move)
    return () => {
      document.removeEventListener('mousemove', move)
    }
  }, [])
  return (
    <div>
      <img
        src={img}
        style={{
          position: 'absolute',
          top: position.y,
          left: position.x,
        }}
        alt=""
      />
    </div>
  )

Obviously, the above two examples have different presentation effects, but the logic codes used are mostly the same. We can use hooks to reuse the logic codes.

3. Use custom hook

We extract the reusable logic code from the above two examples and create a new file called useMousePosition

import { useState, useEffect } from 'react'
export default function useMousePosition() {
  const [position, setPosition] = useState({
    x: 0,
    y: 0
  })
  useEffect(() => {
    const move = (e) => {
      setPosition({ x: ex, y: ey })
    }
    document.addEventListener('mousemove', move)
    return () => {
      document.removeEventListener('mousemove', move)
    }
  }, [])
  return position
}

We extracted this functionality in the useMousePosition function. Now we can import it wherever we want to use it!

Finally, use it like a normal function

  const position = useMousePosition()
  return (
    <div>
      x:{position.x}
      y:{position.y}
    </div>
  )

Obviously, the amount of code is reduced

This is the end of this article about creating custom hooks in react. For more relevant react custom hooks content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • ReactHooks batch update state and get route parameters example analysis
  • React Hook: How to use Effect Hook
  • Understand react-hooks and example code in three minutes
  • Introduction to 10 Hooks in React
  • React Hooks Detailed Explanation
  • React Hook: How to use State Hook

<<:  Example of using docker compose to build a consul cluster environment

>>:  The use of textarea in html and common problems and case analysis

Recommend

The problem and solution of using docker storage and causing Exit to cause files to fail to upload to the server

1. Problem description The storage installed in t...

How to start source code debugging of tomcat in Idea and enter into tomcat for debugging

When using the idea development tool to debug cod...

Solution to the Docker container being unable to access the host port

I recently encountered a problem at work. The doc...

MySQL 5.7.25 installation and configuration method graphic tutorial

There are two types of MySQL installation files, ...

How to correctly create MySQL indexes

Indexing is similar to building bibliographic ind...

Tutorial on building file sharing service Samba under CentOS6.5

Samba Services: This content is for reference of ...

React-Native environment setup and basic introduction

Environment Preparation 1. Environment Constructi...

A collection of possible problems when migrating sqlite3 to mysql

Brief description Suitable for readers: Mobile de...

JavaScript implements the generation of 4-digit random verification code

This article example shares the specific code for...

The reason why MySQL uses B+ tree as its underlying data structure

We all know that the underlying data structure of...

WeChat Mini Program to Implement Electronic Signature

This article shares the specific code for impleme...

How to install pip package in Linux

1. Download the pip installation package accordin...

When backing up files in Centos7, add the backup date to the backup file

Linux uses files as the basis to manage the devic...

How to modify the time in centos virtual machine

The one above shows the system time, and the one ...

Detailed explanation of how to prevent content from being selected, copied, or right-clicked in HTML pages

Sometimes, we don't want the content presente...