React में Responsive Design
React में Responsive design ऐसा है जैसे furniture जो automatically rearrange हो जाता है depending on whether यह एक tiny apartment में है या एक big house में।
In this page:
Syntax
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const onResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", onResize);
return () => window.removeEventListener("resize", onResize);
}, []);
return width;
}CSS Media Queries अब भी पहले आते हैं
ज़्यादातर responsive styling के लिए — अलग widths पर अलग paddings, font sizes, या layouts — plain CSS media queries ही right tool रहते हैं, क्योंकि वे browser द्वारा natively handle होते हैं बिना किसी JavaScript overhead या re-renders के।
Note:
React-based responsive hook के लिए सिर्फ तब reach करें जब आपको अलग sizes पर fundamentally DIFFERENT components render करने हों (सिर्फ अलग styles नहीं)।
Warning:
एक CSS media query जो कर सकता था उसे JavaScript में reimplement करना बिना किसी real benefit के unnecessary re-renders और complexity जोड़ता है।
JavaScript में एक Hook से Screen Size Detect करना
जब आपको genuinely screen size के आधार पर अलग components render करने हों (जैसे mobile hamburger menu vs. एक full desktop nav), एक useWindowWidth-style hook current width को React state में track करता है, browser के resize event पर update होते हुए।
Note:
Resize handler को debounce करें (earlier वाला useDebounce pattern देखें) अगर आप हर resize event पर expensive काम कर रहे हैं।
Warning:
Effect के cleanup function में resize event listener को हमेशा remove करें, या यह इस hook उपयोग करने वाले component के हर remount के साथ leak होता है।
उदाहरण: Detecting Screen Size in JavaScript with a Hook
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function useWindowWidth() {
const [width, setWidth] = React.useState(window.innerWidth);
React.useEffect(() => {
const onResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", onResize);
return () => window.removeEventListener("resize", onResize);
}, []);
return width;
}
function App() {
const width = useWindowWidth();
return <p>{width < 768 ? "Mobile layout" : "Desktop layout"}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>एक Specific Breakpoint के लिए matchMedia उपयोग करना
window.matchMedia(query) check करता है कि एक specific media query currently match करती है या नहीं, और आपके code को notify कर सकता है जब वह match status बदले — raw pixel width track करने से एक ज़्यादा targeted approach जब आपको सिर्फ एक specific breakpoint cross करने की boolean question की चिंता हो।
Note:
matchMedia अक्सर एक resize listener से ज़्यादा efficient है जब आपको सिर्फ एक 'did we cross this one breakpoint' question की चिंता हो।
Warning:
matchMedia change listener को भी cleanup में remove करना याद रखें, exactly एक resize listener जैसा।
उदाहरण: Using matchMedia for a Specific Breakpoint
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function useIsMobile() {
const [isMobile, setIsMobile] = React.useState(window.matchMedia("(max-width: 767px)").matches);
React.useEffect(() => {
const mql = window.matchMedia("(max-width: 767px)");
const handler = e => setIsMobile(e.matches);
mql.addEventListener("change", handler);
return () => mql.removeEventListener("change", handler);
}, []);
return isMobile;
}
function App() {
const isMobile = useIsMobile();
return <p>{isMobile ? "Showing mobile nav" : "Showing desktop nav"}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- Screen size सिर्फ mount पर एक बार detect करने की कोशिश करना, बाद के resize events को completely miss करते हुए।
- वह चीज़ें JavaScript-based responsive logic से handle करना जो plain CSS media queries ज़्यादा efficiently handle कर सकती हैं।
- Resize event listener cleanup करना भूल जाना, इसे हर remount पर leak करते हुए।
चैप्टर सारांश
- ज़्यादातर responsive behavior अब भी CSS media queries से आना चाहिए — React को इसे reinvent करने की ज़रूरत नहीं।
- एक useWindowWidth-style hook specifically तब useful है जब हर screen size पर DIFFERENT COMPONENTS RENDER करना हो (सिर्फ अलग styles नहीं)।
- window.matchMedia API JavaScript को react करने देता है जब एक specific media query match करे या न करे।
- useEffect के cleanup function में हमेशा resize/matchMedia listeners cleanup करें।
ब्राउज़र सपोर्ट
matchMedia और resize events सभी modern browsers में supported हैं; कोई specific React version requirement नहीं।
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: