react-fancy-hooks

react-fancy-hook

Its a collection of handy react custom hooks

---

useInitialMount

useInitialMount- returns whether or not the component is mounted. Useful for async effect that may return after the component has been unmounted.

const veryFirstRender=useInitialMount();
    //veryFirstRender = > true in the very first render
    //veryFirstRender = > false in the next renders 

---

useUniqueID
useUniqueID- returns a unique ID that remains constant across component renders. Great for auto-generating IDs for DOM elements.

const ID= useUniqueID()

usePrevious usePrevious-returns the previous value of a prop or state.

const previousValue=usePrevious()

useIsMounted useIsMounted- return a function you can call it to be sure if the component is mounted or not. the best use case is in async function and set state.

Example

const Results = () => {
  const [items, setItems] = useState([])
  const isMounted = useIsMounted()

  useEffect(() => {
    fetchItems().then((newItems) => {
      // only set state if the component
      // is still mounted after receiving
      // the async data
      if (isMounted()) {
        setItems(newItems)
      }
    })
  }, [isMounted])

  // render UI
}