❕ Create a multi-step form with React Hooks

#react #hooks

✅ Article Link

❕ 4 Nice and Simple React Hooks

#react #hooks

useDebounce
With this neat hook, you will be able to debounce a value by a delay — just like you can delay the execution of a function with a normal debounce. The idea is very similar: We define some local state in the hook that we only update whenever the debounced function gets to run.

A good fit for this hook is when you have fast-changing values that you want to react to, but your reaction might be asynchronous or slow, so you only want to react to the latest value that you are able to consume.

useWhenVisible
This is a really useful hook for implementation features like infinite scrolling, where you fetch more data as the user scrolls through it. What this hook allows you to do is to listen for a specific element, and when that element becomes visible in the viewport, a callback function will be called to notify you about it. You can then use this callback as a trigger for fetching more data.

It is also useful for lazy loading images or triggering animations as the user goes down the page.

useTimeout
This hook lets you use the normal setTimeout behaviour in a declarative way whenever you want to wait before doing something. This can be really useful in a lot of scenarios, and by using a hook, you never have to worry about memory leaks or weird bugs because you forgot to clear your timeout.

useInterval
This is very similar to useTimeout. I’ve included setTimeout’s sister (setInterval) as a hook. Their implementation and API look almost the same.

✅ Article Link