??? ?? ??? ???? ? ??? ???? ??? ? ?? ??? ????????.

? ??? ???? ??? ? ?? ??? ?????? ??? ?? ??? ???? React?? useState ? useEffect ??? ?????. ? ??? ?????? ??? ???? ??? ????.

 <code class="javascript">import { useState, useEffect } from 'react'; function useWindowSize() { // Initialize state with undefined width/height so server-side render works const [windowSize, setWindowSize] = useState({ width: undefined, height: undefined, }); useEffect(() => { // Handler to call on window resize function handleResize() { // Set window width/height to state setWindowSize({ width: window.innerWidth, height: window.innerHeight, }); } // Add event listener window.addEventListener("resize", handleResize); // Call handler right away so state gets updated with initial window size handleResize(); // Remove event listener on cleanup return () => window.removeEventListener("resize", handleResize); }, []); // Empty array ensures that effect is only run on mount return windowSize; } export default useWindowSize;</code>

? ??? ?? ?? useWindowSize useState hook? ???? ? ??? ??? ???? Window? Resize ???? useEffect ???? ???? ?????. ??? ?? ? ??? ?? ??? ??? ???? ???? ?? ???? ??? ? ????.

? ?? ??? ????? ?????? ?? ??? ?? ??? ????? ?????????

????? ? ?? ??? ???????? ??? ?? ??? ????? ?? ??? ?????.

1. ??? ?? ?? ?? : ?? ? ???? ???? ? ?????? React?? useState ? useEffect ?? ????.
2. ?? ??? : useState ???? width ? height ?? undefined ??? ??? ???????. ?? ?? window ??? ??? ?? ? ??? ?? ??? ???? ?? ? ? ????.
3. ?? ?? ??? ?? : ?? window.innerWidth ? window.innerHeight ? ??? ?????? ?? handleResize ??????.
4. ??? ??? ?? : Inside useEffect , ??? ???? resize ???? window ??? ??????. ? ???? ? ??? ?? ? ??? handleResize ?????.
5. ?? ?? : useEffect ??? ?? handleResize ???? ?? ? ??? ??????.
6. ?? : ?? ??? ???? ?? ??? ??? ?? ??? ? ??? ???? ???? useEffect ?? ?? ??? ?????.
7. ?? ?? : ?????, ????? ??? ? ??? windowSize

? ???? ??? ? ??? ????? ?????? ???? ???? ??? ? ??????.

Window ??? ???? ?? ??? ????? ?????? ?? ??? ?? ??? ???? ?? ??? ??????

??? ?? ??? ???? ? ??? ???? ?? ??? ???? ? ? ?? ?? ??? ??????.

1. ??? ??? : useMemo ?? useCallback ???? ? ?? ?? ?? ? ??? ???? ?? ??? ???????. ??? ???? ? ??? ?????.
2. ?? ?? ?? ??? : ?? ?? ?? ?? ??? ????? ????? ?? ?? ??? ???? ????? ?? ??????. lodash.debounce ? ?? ??????? ??? ?? ? ? ????.
3. ??? ??? : ? ??? ???? ???? ?? ?????? ?? ??? ??????. ?? UI? ??? ?? ??? ???? ??? ??? ???? ? ????.
4. ?? ? ??? ??? : undefined ??? ??? ????? ????? ?? window ????? ???? ??? ?? ? ???? ?? ????? ?????.
5. ?? : Memory Leaks? ???? ?? useEffect ?? ???? ?? ??? ???? ??????.
6. ??? ? : ?? ?? ??? ?????? ??? ??? ? ? ??? ??????. ?? ?? (? ?? ? ?? ??)? ??????.
7. ??? : ??? ?? ??? ?? ???? ???? ??? ? ??? ?? ?? ???? ??? ? ??? ???? ???? ????? ??????.

? ?? ?? ??? ?? React ?? ??? ???? ??? ?? ?? ? ? ?????

??? useWindowSize ??? ?? React ?? ??? ???? ??? ????.

 <code class="jsx">import React from 'react'; import useWindowSize from './useWindowSize'; // Assuming the hook is in a separate file function MyComponent() { const { width, height } = useWindowSize(); return ( <div> <h1>Current Window Size</h1> <p>Width: {width}px</p> <p>Height: {height}px</p> {width > 768 ? ( <p>This is a wide screen layout</p> ) : ( <p>This is a narrow screen layout</p> )} </div> ); } export default MyComponent;</code>

? ??? MyComponent useWindowSize ??? ???? ?? ? ??? ????. ?? ?? ??? ??? ???? ? ??? ?? ?? ???? ???? ????? ? ?????. ?? ??? ?? ??? ?? ???? ? ??? ?? UI? ???? ?????? ??? ?????.

? ??? ??? ?? ??? ???? ? ??? ???? ??? ? ?? ??? ????????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!