score:2
Accepted answer
this solution will work for your use case.
so we have 2 useeffect
hooks.
the first useeffect
attached an event listener to the window
object. because the window
is used in a useeffect
hook, it won't be executed on the server-side.
the second useeffect
hook will listen to the state changes on innerwidth
, which is being updated whenever the resize
event happens.
const [innerwidth, setinnerwidth] = usestate<number | undefined>();
useeffect(() => {
// handler to call on window resize
function handleresize() {
setinnerwidth(window.innerwidth);
}
// add event listener
window.addeventlistener('resize', handleresize);
// call handler right away so state gets updated with initial window size
handleresize();
return () => window.removeeventlistener('resize', handleresize);
}, []);
useeffect(() => {
// handle your changes
console.log(innerwidth);
}, [innerwidth]);
inspired by this usewindowresize implementation
score:0
you can try using process.browser to just execute your command during rendering on the client side only.
if (typeof window !== "undefined") { //client side code }
/*or try this */
/*remove dependency array*/
useeffect(() => {
if (window && window.innerwidth) {
// do something
}
}, [])
Source: stackoverflow.com
Related Query
- How to track value of undefined variable in dependency list in useEffect in React and Next.js
- How to fix missing dependency warning when using useEffect React Hook
- react useEffect trigger although dependency value remain the same?
- React How to set an element's ref value using a variable
- How to change a SASS variable value using React Js?
- How to use useEffect hook with the dependency list as a specific field in an array of objects?
- Using a property of initially undefined variable for useEffect dependency
- How to trigger useEffect in React only once AFTER some certain variable gets loaded
- React How to return div and variable value for another component
- How do we check the boolean value in useEffect in react hooks?
- How could I execute useEffect even if value (second param) is same as previous value - React
- How to assign a value of a variable from a function in another function in React JS
- React useEffect doesn't trigger sometimes when I update my list as its dependency
- react hook useEffect infinite loop despite dependency list
- React useEffect warning to put missing dependency. But dependency value changes in the hook
- How can I make useEffect react hook rerender based on a variable value?
- how to store textarea new line value into array with react and send it to node js variable with post request
- React - How to use the current state value as a variable so i can set as a index inside an array
- Getting current value of variable outside the useEffect in React
- React: How do I prevent the usage of useRef and useState to keep track of a same value in order to prevent useEffect from triggering?
- How to fix the count variable value in a recursive method using react and javascript?
- How can i can change the value of a variable with if/else to return certain div in react
- How to access value from fetch call in a variable in react
- how to go through react state variable array and determine if it has one true value
- React how to store properties list in a variable and pass them to element
- React Hook useEffect has a missing dependency when updating state based on current value
- React Testing Library - how to set initial value of state variable
- How can I pass a value in a variable to a React component
- React hooks loses updated value of state variable inside cleanup function of useEffect
- How to get updated state value in React useEffect hook
More Query from same tag
- react router 4 - how to make a root path with nested routes but fallback to not-found
- I want to use useRef() to access an element in a reat-leaflet and use the Flyto function. However, useRef returns "undefined"
- React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object
- PropTypes in a TypeScript React Application
- React Swiper Navigation not working how to work it?
- react-redux problem with onSubmit and async action on API call
- React component returns list of mapped items, then disappears
- How to override React Component styles with styled components?
- Combine multiple x / y in SVG
- Enabling Server Side Rendering for React Components
- Formik field loses focus when used with error props
- How to cancelled previous api from components when users changed route in reactjs?
- How to use Font-Face to describe the new font in JS or React to provide inline property?
- In React, when will the componentDidMount fire for a component that does not directly render markup?
- How to import scss files and use them globally in a React application?
- React Tooltip doesn't close on mouse leave
- Javascript: Error: Cannot find module '../data/icons/table.png'
- how to filter through an array and check if a nested object includes a value of true using reselect in redux
- Wrap withRouter in an ES7 function
- Blockstack App Fails on npm install ERR! configure error
- Create elements dynamically within React component
- Programatically setting default values in react-jsonschema-forms
- Not able to receive response from express code shows undefined in console
- Error:(19, 35) TS2304: Cannot find name 'T'. Why I can't extend interface in TS?
- How to use right, reselect in react-redux aplication
- "this" is undefined inside an anonymous function returned by another function React
- Why does my counter value increase before it starts to decrease on click - reactjs
- Posting data into Firebase - with post request - React
- Classes and arrow functions and THIS
- Create a separate submit button for every section in antd dynamic field