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

CSS3 transition to implement notification message carousel

Teach you to create custom hooks in react

1. What are custom hooks

2. When not using custom hooks

3. Use custom hook

CSS3 transition to implement notification message carousel

MySQL error: Deadlock found when trying to get lock; try restarting transaction solution

How to track users with JS

The whole process record of vue3 recursive component encapsulation

JS version of the picture magnifying glass effect

javascript realizes 10-second countdown for payment

Detailed explanation of the principles and usage of MySQL master-slave replication and read-write separation

Solutions to browser interpretation differences in size and width and height in CSS

Detailed explanation of the use of HTML header tags

Summary of uncommon js operation operators

Recommend

UDP simple server client code example

XHTML Getting Started Tutorial: What is XHTML?

How to set a dotted border in html

Docker container regularly backs up the database and sends it to the specified mailbox (design idea)

How to implement Mysql switching data storage directory

A new CSS image replacement technique (background display and text moving off screen) to say goodbye to 9999px

Detailed explanation of how to install mysql5.7.16 from source code in centos7 environment

JavaScript dynamically generates a table with row deletion function

Small program to implement a simple calculator

Summary of Common Problems with Mysql Indexes

How to deal with the xfs_vm_releasepage warning problem reported by the Linux system

Analysis of the issues and solutions for repeated submission, repeated refresh, and backoff prevention

Solution to css3 transform transition jitter problem

Let's talk about destructuring in JS ES6

Implementation code of the floating layer fixed on the right side of the web page