hooks series seven: custom hooks

join us!

Mountain" , to provide front-end developers with technical information and a series of basic articles. For a better user experience, please move to our official website novices (1610cc8e1a9998 https://xhs-rookies.com/ ) to learn and get the latest articles in time.

"Code tailor" , if you are interested in our article or want to make some suggestions, follow "Novices from Xiaohe Mountain" public account, contact us, you can also watch it on WeChat Our article. Every suggestion or approval is a great encouragement to us!

Custom hook

The official document custom hook , but the example is more complicated and difficult to understand. Here we use a simpler way to teach you how to customize hooks.

What is a custom hook

When we want to share logic between two functions, we extract it into the third function. The components and hook are functions, so this method is also applicable.

custom hook is a function whose name starts with " use ", and other hooks can be called within the function

Consistent with the components, make sure that only custom Hook top-level calls unconditionally to other hook

A simple custom hook case

Use one of the simplest codes to learn about custom hook

import { useState } from 'react'

const useMyHook = (initValue) => {
  const [value, setValue] = useState(initValue || '')
  return value
}

function App() {
  const myHookValue = useMyHook('myHook')
  return <div className="app">{myHookValue}</div>
}

The above code, we can see, I customized the named useMyHook custom hook , but what it also did not function, but is used to return the value of a custom. Result display:

Upgrade the case

In the above case, we just performed a simple demonstration, and did not have any other operations. You may not understand what custom hook . Now, let’s upgrade the above case and add a input . Let you more clearly recognize the custom hook .

We now need to have an input box and pass a custom hook to transfer the value and modify the function value.

import { useState } from 'react'

const useMyHook = (initValue) => {
  const [value, setValue] = useState(initValue || '')
  const onChange = (e) => {
    setValue(e.target.value)
  }
  return { value, onChange }
}

function App() {
  const myHookValue = useMyHook('myHook')
  return (
    <div className="app">
      <p>value:{myHookValue.value}</p>
      <input value={myHookValue.value} onChange={myHookValue.onChange} />
    </div>
  )
}

In the above code, we have built a case where the data can be changed in real time through the input content of the input box.

This is achieved through a custom hook useMyHook . Here, we return a value custom hook to show the current value. A onChange function, used to modify the current value . When we use it, the p tag shows the current value , the change function of input onChange , and the display value is myHookValue in value .

result of

summary

At this point, our simplest custom hook case is over.

Custom hook must be named use , and call other hook . useMyHook we used in the example is the use starting with 0610cc8e1a9daa, in which useState called.

Preview of the next section

At this point, hooks is about to end, we will help you to hooks and use actual cases to help you further understand