import { useEffect, useRef, useState } from 'react'

/*
	If you attempt to set some state after asynchronous request it may happen that component you wish to set state on has been unmounted.
	This will trigger "Warning: Can’t call setState (or forceUpdate) on an unmounted component." warning.
	This hooks is `useState` hook which prevents setting state on an unmounted component
	Usage:
		const [myState, mySafeSetState] = useSafeState(initialValue)
*/
const useSafeState = (initialValue) => {
	const _isMounted = useRef()		// useRef to memorize if the component is mounted between renders
	const [state, setState] = useState(initialValue)
	useEffect(() => {
		_isMounted.current = true
		return () => {
			_isMounted.current = false
		}
	})
	const safeSetState = (...args) => {
		if(_isMounted.current) {	// do not call setState if the component already unmounted
			setState(...args)
		}
	}
	return [state, safeSetState]
}

export default useSafeState