Technologies Coding Problems Bookmarks Learning Paths

Technologies Coding Problems Bookmarks Learning Paths

AI-powered interview preparation platform. Practice with curated questions, mock interviews, and personalized learning paths to crack your dream tech interview.

Quick Links

Technologies
Saved Questions
Pricing

Company

About Us
Contact Us

Legal

Privacy Policy
Terms of Use

© 2026 nextRound. All rights reserved.

Implement useMediaQuery hook. | Custom Hooks | react Interview Questions | NextRound.in

Questions

1 of 14

1Implement useMediaQuery hook.

3Implement useDebounce hook.

4Implement useLocalStorage hook.

5List potential pitfalls or risks of Custom Hooks.

6What should we do in cleanup functions?

7What are the advantages of cleaning up after an effect?

8What should be returned by custom hooks?

9What is the useEffect cleanup function?

10What are the advantages of Custom Hooks?

11What should not be put into custom hooks?

12What points to note and take care of while writing custom hooks?

13When should we use a custom hook?

14Why do we need custom hooks?

react

State and Props

Class Components

Function Components

Lifecycle functions

Performance Optimisation

01 / 14

Implement useMediaQuery hook.

Difficulty: 6/10

custom hooks, window.matchMedia, SSR

javascript

Scenario Questions

0-2 years experience

1How would you write a simple useMediaQuery hook that returns true when the viewport matches a given CSS media query string?
2If you call your hook with '(max-width: 600px)' and then resize the window, what steps does your hook need to take to update the component?

2-5 years experience

1We have a component that shows a mobile navigation drawer only on screens smaller than 768px. It sometimes doesn't hide when the window is resized larger. Walk me through how you'd debug the useMediaQuery implementation.

Follow-up Questions

What would happen if you omitted the cleanup function?
How does your hook behave during the initial render on the server?
Can you think of any performance implications of many components using this hook?

Sharethis question

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.

2Explain why you might want to debounce the media query listener in your hook, and show how you'd add that.

5-8 years experience

1In a large application, many components use useMediaQuery. What strategies would you use to avoid creating a separate matchMedia listener for each hook instance?
2How would you adapt your useMediaQuery hook to work correctly with server-side rendering and avoid hydration mismatches?

8+ years experience

1Our design system team wants to expose a shared media query utility across multiple micro‑frontends. What architectural considerations would you raise when deciding whether to ship useMediaQuery as a library versus a built‑in framework feature?
2If we need to support legacy browsers that lack window.matchMedia, how would you design a fallback strategy that keeps the hook's API stable across the organization?