My friends, if I had learned these 4 React hooks earlier, maybe I could have written more beautiful code.

They greatly improved my work efficiency and the scalability and readability of my code. You must want to learn them too?

1. useMount
In the past, I often wrote this style of code, and when the component was first rendered, I needed to send a request or do some other logic, probably like this.
1 useEffect(() => {
2  // fetch request...
3  }, [])

That’s pretty simple, isn’t it? But it has one big disadvantage: The semantics are not clear enough, even if we pass in an empty array.

So we can customize a hook called useMount to execute the callback function only when the component is first rendered.

Source code
1 const useMount = (callback) => {
2 React.useEffect(callback, [])
3  }

Example

const UseMountDemo = () => {
const [count, setCount] = React.useState(0)
useMount(() => {
console.log("useMount")
})
return (
<div>
count: { count }
<button onClick={() => setCount(count++)}>add</button>
</div>
)

When the component re-renders, useMount does not execute again, great!		}