friendly-hooks v1.0.3

Welcome to easy hooks

A simple hooks library for make your life easier.

hooks example

useDebounce

It usefull when you want to call a api or any kind of callback after a certain time. Image to have a search input that returns some data filtered by the research, u don't want to call at every type your api because it won't be really performance. With useDebounce u can make the call with a delay so for example if the user stop typing after 1s(delay) the callback will be call.

example

const [inputValue, setInputValue] = useState("")
useDebounce(getData, 1000, [inputValue])

In this example getData will be call only after 1s from the last char typed. The dependencies are used for reset the delay while the user is typing.

useUpdateEffect & useStrictUpdateEffect

Have you ever want a useEffect that runs only when you update some data? that is the case where it comes to handy useUpdateEffect and useStrictUpdateEffect. Why 2 hooks that do the same thing? because in React 18 the strick mode cause 2 renders, so if you are in React 18 and using strick mode you need to use useStrictUpdateEffect else useUpdateEffect

example

useUpdateEffect(()=>{
  // your code 
},[dependencies])

The same is for useStrictUpdateEffect, it's like componentWillUpdate in class components. The first time it's call it returns null, then it will return the callback like a normal useEffect.

usePrevious

An easy hooks that let you save and use the previous value of something

const [state, setState] = useState(initState)

const prevState = usePrevious(state);

And that's it!!

useToggle

A simple hook for switch boolean value

const [isVisible, setIsVisible] = useToggle(defaultValue)

return (
  <button onClick={ () => setIsVisible }> set visibility </button>
  {
    isVisible && //some jsx
  }
)

When u click the value of isVisible turn from false to true or opposite.