[useMediaQuery] Doesn't fire after state change
Open
Nobody has claimed this yet.
external dependency
hook: useMediaQuery
type: bug
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
Link to live example: https://codesandbox.io/s/charming-microservice-imyon7?file=/src/App.tsx
Steps:
- Increase and decrease the window width so you can see the media query updates correctly in the console
- Resize the screen to larger than 600px width and press the button, this will fire the if statement and update the state of isActive
- Now try resizing. the window width above and below 600px
Current behavior 😯
The component only rerenders when resizing the window when the media query does not match
Expected behavior 🤔
I expect the component to also rerender when the media query matches
Context 🔦
No response
Your environment 🌎
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox and the useMediaQuery entry point, then reproduce the resize and button interaction described in the issue. Trace why the component rerenders when the query does not match but not when it matches; done means both transitions rerender and the behavior is covered by a relevant test.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100