Come and join us!

“The Newbies of Little Wo Shan” provides front-end developers with technical information and a series of basic articles. For a better user experience, please go to xhs-rookies.com/ to learn the latest articles.

“Code Tailor “, if you are interested in our article, or would like to make some suggestions, please follow the official account of “Rookie of Xiaohe Mountain” on wechat and contact us. You can also view our article on wechat. Every suggestion or approval is a great encouragement to us!

Customize the hook

When talking about custom hook, the official document gives an example of friend state, but the example is complicated and difficult to understand. Here we use a simpler way to teach you how to customize hook.

What is a custom hook

When we want to share logic between two functions, we extract it into a third function. Components and hooks are functions, so the same applies.

A custom Hook is a function whose name begins with”useOther hooks can be called from within the function

As in the component, make sure that other hooks are called unconditionally only at the top level of your custom hook

A simple custom hook case

Take a look at custom hooks in the simplest code

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>
}
Copy the code

In the above code, we can see that I have a custom hook named useMyHook, and it does not have any function, just used to return a custom value. Results show:

Upgrade the case

In the above case, we just carried out a simple demonstration, and did not have any other operations, you may not understand what is a custom hook, so now, we will update the above case, add an input, to make you more clearly understand the custom hook.

We now need to have an input box and use a custom hook to pass values and modify function values.

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>)}Copy the code

In the above code, we built a case where we could change the data in real time by typing in the input box.

This is implemented through a custom hook useMyHook, where we return a value in the custom hook to display the current value. An onChange function that modifies the current value. When we use it, the p tag displays the current value, the input change function uses the custom onChange, and the value in myHookValue is displayed.

The results show:

summary

This brings us to the end of our simplest custom hook case.

Custom hooks must be named starting with use and call other hooks within them. For example, we use useMyHook, which starts with use and calls useState.

Next day forecast

That is the end of which is in which I will help you conclude with hooks and use practical cases