React Hook "useState" cannot be called inside a callback. Using useMediaQuery responsive JS media query

Question

I'm trying to use responsive javascript media queries using useMediaQuery however I can't get it to work, I get: -

Error message: "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function

Playgroundhttps://stackblitz.com/edit/react-ts-5vseqr?file=media-query.ts

I think it's erroring on line 4 of media-query.ts

import { useState, useEffect } from 'react'

const useMediaQuery = (query: string) => {
    const [match, setMatch] = useState(false)

    useEffect(() => {
        const updateMatch = () => setMatch(window.matchMedia(query).matches)

        updateMatch()
        window.matchMedia(query).addEventListener('change', updateMatch)

        return () => {
            window.matchMedia(query).removeEventListener('change', updateMatch)
        }
    }, [query])

    return match
}

export default useMediaQuery

Answer 1

What you've done here is writing a custom hook(useMediaQuery). You've done that properly so no issues there. Above code snipped is fine.

The problem is in the index.tsx file when you try to use the above custom hook that you've written. As the error suggests your custom hook is called outside the react component there in line 7 of index.tsx.

You have to move the useMediaQuery call inside the App component. Also currently your App component is a class component which you have to convert to a functional component to use hooks inside it.

here's the adjusted code: https://stackblitz.com/edit/react-ts-m6rwpd?file=index.tsx