[Fixed]: Can’t perform a React state update on an unmounted component – React Hooks

Warning: Can’t perform a React state update on an unmounted component.
Many of you have ever worked with a condition based component render in React app, you will get warning(s) in your console:

Warning: Can’t perform a React state update on an unmounted component.

The most common cause of this warning is when a user sends an asynchronous request, but leaves the page before it completes or set state before component render and state is being used before initialized.
I especially wanted to know how to do this with hooks, because hooks are awesome.

I wanted to know how to avoid this classic React warning – here’s my solution.

const MyComponent = () => {

        const [counter, setCounter] = useState(0)

        const componentIsMounted = useRef(true)
        useEffect(() => {
            return () => {
                componentIsMounted.current = false
            }
        }, []) 

        const incrementCounter = useCallback(()=> {
            async () => {
                try {
                    await dbQuery()
                    if (componentIsMounted.current) {
                        setCounter(counter + 1)
                    }
                } catch (err) {
                    // Handle error
                }
            }
        }, [setCounter])

        render (
            <div>
                <button onClick={incrementCounter}>                       +
                </button>
                </div> 
        )
}