react-fancy-hooks v0.3.26-development
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
}
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago