I want to update state with the inner window height as I resize the screen. When I log the state height within the useEffect hook I get 0 each time however, when I log inside the updateWindowDimensions function the height value is updated as expected.
How can I update state with the new value each time?
const [height, setHeight] = useState(0);
const updateWindowDimensions = () => {
const newHeight = window.innerHeight;
setHeight(newHeight);
console.log('updating height');
};
useEffect(() => {
window.addEventListener('resize', updateWindowDimensions);
console.log("give height", height);
}, []);
Your useEffect is only being run one time, when the component mounts (because of the empty array [] you passed as the second argument)
If you simply log outside of it, you'll see your state value is being updated correctly
const [height, setHeight] = useState(0);
useEffect(() => {
const updateWindowDimensions = () => {
const newHeight = window.innerHeight;
setHeight(newHeight);
console.log("updating height");
};
window.addEventListener("resize", updateWindowDimensions);
return () => window.removeEventListener("resize", updateWindowDimensions)
}, []);
console.log("give height", height);
Also you should move the declaration of that function inside the useEffect so it's not redeclared on every render
The above Answer by #Galupuf won't work ideally, until you add updateWindowDimensions call below addEventListener:
window.addEventListener("resize", updateWindowDimensions);
updateWindowDimensions()
Because eventListener won't run this function until you resize.
so height will remain 0 until you resize.
I know this is too late for answer, but we can define a hook for this purpose. In here you can find a custom hook that update width and height of window on every resize.
Related
The goal of my hook is to determine the "open direction" of the menu.
When there is not enough height, the open direction will switch from "bottom" to "top".
I simplified my code to a dummy example to be able to demonstrate it.
You can see it in the animated gif I added.
So, what is my problem?
In my real code, the logic of the "open direction" depends on the last "openDirection" from the state.
With classes which I'm used to, it works well, I've added the code example using classes.
In the handleResize I'm writing to the console the current openDirection, to simulate the use of it in my real code.
BUT in my hooks code example, you can see that each time I am writing to the console from the handleResize, the openDirection is always the first initial value of the state which is bottom.
I guess it works this way because I'm giving the [] dependency, so useLayoutEffect works on the first time only. But what should I do? if I pass openDirection as a dependency, it will work, but then it means that each time addEventListener will be added and removeEventListener will be removed, for every resize event!
I'm really confused about it, what should I do?
import { useLayoutEffect, useState } from 'react';
const useOpenDirection = () => {
const [openDirection, setOpenDirection] = useState("bottom");
useLayoutEffect(() => {
const handleResize = () => {
console.log('openDirection', openDirection);
if (window.innerHeight < 622) {
setOpenDirection("top");
} else {
setOpenDirection("bottom");
}
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return openDirection;
};
export default useOpenDirection;
The complete code for live editing:
classes code example
hooks code example
Your openDirection has become a stale closure, because of empty array as dependencies. You can access current value of openDirection if you use functional update:
useLayoutEffect(() => {
const handleResize = () => {
setOpenDirection(current => {
// If you need you can also use current to compute return value of this function
if (window.innerHeight < 622) {
console.log('openDirection', current);
return "top";
} else {
console.log('openDirection', current);
return "bottom";
}
});
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
So I've got this hook to return the windowWidth for my App components. I'll call this Option #1.
import {useEffect, useState} from 'react';
function useWindowWidth() {
const [windowWidth,setWindowWidth] = useState(window.innerWidth);
useEffect(() => {
function handleResize() {
setWindowWidth(window.innerWidth);
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return windowWidth;
}
export default useWindowWidth;
And right now I'm basically using it on every component that depends on the window width to render, like:
function Component(props) {
const windowWidth = useWindowWidth();
return(
// RETURN SOMETHING BASED ON WINDOW WIDTH
);
}
And since the hook has an event listener for the resize events, the component stays responsive even after window resizes.
But I'm worried that I'm attaching a new listener for every component that uses that hook and it might slow things down at some point. And I've though of other approach:
Option #2
I use the useWindowWidth() hook only one time, inside a top level component like <App/> and I'll provide the windowWidth value down the chain via context.
Like:
function App() {
const windowWidth = useWindowWidth();
return(
<WindowWidthContext.Provider value={windowWidth}>
<Rest_of_the_app/>
</WindowWidthContext.Provider>
);
}
And then, every component that needs it could get it via:
function Component() {
const windowWidth = useContext(WindowWidthContext);
return(
// SOMETHING BASED ON WINDOW WIDTH
);
}
QUESTION
Am I right in being bothered by that fact that I'm setting up multiple resize listeners with Option #1 ? Is Option #2 a good way to optmize that flow?
If your window with is used by so many components as you mentioned, you must prefer using context. As it reads below:
Context is for global scope of application.
So, #2 is perfect choice here per react.
First approach #1 might be good for components in same hierarchy but only up-to 2-3 levels.
I'm not sure if adding and removing event listeners is a more expensive operation than setting and deleting map keys but maybe the following would optimize it:
const changeTracker = (debounceTime => {
const listeners = new Map();
const add = fn => {
listeners.set(fn, fn);
return () => listeners.delete(fn);
};
let debounceTimeout;
window.addEventListener('resize', () => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(
() => {
const width=window.innerWidth;
listeners.forEach(l => l(width))
},
debounceTime
);
});
return add;
})(200);
function useWindowWidth() {
const [windowWidth, setWindowWidth] = useState(
() => window.innerWidth
);
useEffect(
() =>//changeTracker returns a remove function
changeTracker((width) =>
setWindowWidth(width)
),
[]
);
return windowWidth;
}
As HMR said in an above thread, my solution was to use redux to hold the width value. With this strategy you only need one listener and you can restrict how often you update with whatever tool you like. You could check if the width value is within the range of a new breakpoint and only update redux when that is true. This only works if your components dont need a steady stream of the window width, in that case just debounce.
I have 2 different kinds of NavBar components in my project: a NavBarTransparent.jsx that's only used in index.jsx (home page), and a NavBar.jsx that's used on all other pages.
Now, I have a function set to trigger each time the window scrolls in the NavBarTransparent.jsx component:
// components/NavBarTransparent.jsx
useEffect(() => {
window.removeEventListener('scroll', scrollFunction);
});
const scrollFunction = () => {
const nav = document.getElementById('nav');
const overlay = document.getElementById('nav-overlay');
const travel = document.documentElement.scrollTop;
const travelRem = travel / 16;
const navHeight = 7 - (travelRem / 6);
if (navHeight <= 4) {
nav.style.lineHeight = `${4}rem`;
overlay.style.opacity = 1;
} else if (navHeight >= 7) {
nav.style.lineHeight = `${7}rem`;
overlay.style.opacity = 0;
} else {
nav.style.lineHeight = `${navHeight}rem`;
overlay.style.opacity = (7 - navHeight) / 3;
}
};
The other navbar component (NavBar.jsx) does not have this event listener. However, the event listener still gets triggered when I visit, say, /about from / (client-side routing). Why is the listener getting hit when the other page doesn't even use that component?
The repo is up at https://github.com/amitschandillia/proost/tree/master/web
Fixed it with the following:
useLayoutEffect(() => {
if(transparent) { window.addEventListener('scroll', scrollFunction); }
// returned function will be called on component unmount
return () => {
window.removeEventListener('scroll', scrollFunction);
}
}, []);
Looks like window event listeners added before a component mounts must be explicitly removed before the component unmounts. I was adding the listener via the useEffect hook, but not unmounting it, hence the issue of persistent triggers. Now, I have used the return() snippet of useEffect (the Hooks equivalent of componentWillUnmount) to remove the listener and it works fine.
Also, am using useLayoutEffect instead of useEffect because if you want to manipulate DOM and do so before browser paint, as is the case here, useLayoutEffect` is preferable.
So I'm currently working with React Hooks, and I'm trying to use useEffect. It supposed whenever that dependencies changed, the useEffect would re-render right? But it doesn't work for me. Here's my code :
const [slidesPerView, setSlidesPerView] = React.useState(0)
React.useEffect(() => {
setSlidesPerView(() => (window.innerWidth <= 375 ? 1 : 2))
console.log("rerender?", slidesPerView)
}, [window.innerWidth])
Everytime I changed the screen size, useEffect won't re-render. I wonder what did I do wrong?
useEffect will respond to either props changes or state changes.
Every time screen size changes component has no idea, if window.innerWidth is changed or not, because it is not in a state or props.
To get it working you need to store window.innerWidth into state, and attach a event listener to your window, whenever window size changes it will get the window.innerWidth and store it into the state, and as state changes your useEffect will get re-run, and finally your component will get re-render.
const [size, setSize] = React.useState(window.innerWidth)
React.useEffect(() => {
//Attach event on window which will track window size changes and store the width in state
window.addEventListener("resize", updateWidth);
setSlidesPerView(() => (size <= 375 ? 1 : 2));
console.log("rerender?", slidesPerView);
//It is important to remove EventListener attached on window.
return () => window.removeEventListener("resize", updateWidth);
}, [size])
const updateWidth = () => {
setSize(window.innerWidth)
}
Demo
I'm still getting my head around react hooks but struggling to see what I'm doing wrong here. I have a component for resizing panels, onmousedown of an edge I update a value on state then have an event handler for mousemove which uses this value however it doesn't seem to be updating after the value has changed.
Here is my code:
export default memo(() => {
const [activePoint, setActivePoint] = useState(null); // initial is null
const handleResize = () => {
console.log(activePoint); // is null but should be 'top|bottom|left|right'
};
const resizerMouseDown = (e, point) => {
setActivePoint(point); // setting state as 'top|bottom|left|right'
window.addEventListener('mousemove', handleResize);
window.addEventListener('mouseup', cleanup); // removed for clarity
};
return (
<div className="interfaceResizeHandler">
{resizePoints.map(point => (
<div
key={ point }
className={ `interfaceResizeHandler__resizer interfaceResizeHandler__resizer--${ point }` }
onMouseDown={ e => resizerMouseDown(e, point) }
/>
))}
</div>
);
});
The problem is with the handleResize function, this should be using the latest version of activePoint which would be a string top|left|bottom|right but instead is null.
How to Fix a Stale useState
Currently, your issue is that you're reading a value from the past. When you define handleResize it belongs to that render, therefore, when you rerender, nothing happens to the event listener so it still reads the old value from its render.
There are a several ways to solve this. First let's look at the most simple solution.
Create your function in scope
Your event listener for the mouse down event passes the point value to your resizerMouseDown function. That value is the same value that you set your activePoint to, so you can move the definition of your handleResize function into resizerMouseDown and console.log(point). Because this solution is so simple, it cannot account for situations where you need to access your state outside of resizerMouseDown in another context.
See the in-scope function solution live on CodeSandbox.
useRef to read a future value
A more versatile solution would be to create a useRef that you update whenever activePoint changes so that you can read the current value from any stale context.
const [activePoint, _setActivePoint] = React.useState(null);
// Create a ref
const activePointRef = React.useRef(activePoint);
// And create our custom function in place of the original setActivePoint
function setActivePoint(point) {
activePointRef.current = point; // Updates the ref
_setActivePoint(point);
}
function handleResize() {
// Now you'll have access to the up-to-date activePoint when you read from activePointRef.current in a stale context
console.log(activePointRef.current);
}
function resizerMouseDown(event, point) {
/* Truncated */
}
See the useRef solution live on CodeSandbox.
Addendum
It should be noted that these are not the only ways to solve this problem, but these are my preferred methods because the logic is more clear to me despite some of the solutions being longer than other solutions offered. Please use whichever solution you and your team best understand and find to best meet your specific needs; don't forget to document what your code does though.
You have access to current state from setter function, so you could make it:
const handleResize = () => {
setActivePoint(activePoint => {
console.log(activePoint);
return activePoint;
})
};
useRef for the callback
A similar approach to Andria's can be taken by using useRef to update the event listener's callback itself instead of the useState value. This allows you to use many up-to-date useState values inside one callback with only one useRef.
If you create a ref with useRef and update its value to the handleResize callback on every render, the callback stored in the ref will always have access to up-to-date useState values, and the handleResize callback will be accessible to any stale callbacks like event handlers.
function handleResize() {
console.log(activePoint);
}
// Create the ref,
const handleResizeRef = useRef(handleResize);
// and then update it on each re-render.
handleResizeRef.current = handleResize;
// After that, you can access it via handleResizeRef.current like so
window.addEventListener("mousemove", event => handleResizeRef.current());
With this in mind, we can also abstract away the creation and updating of the ref into a custom hook.
Example
See it live on CodeSandbox.
/**
* A custom hook that creates a ref for a function, and updates it on every render.
* The new value is always the same function, but the function's context changes on every render.
*/
function useRefEventListener(fn) {
const fnRef = useRef(fn);
fnRef.current = fn;
return fnRef;
}
export default memo(() => {
const [activePoint, setActivePoint] = useState(null);
// We can use the custom hook declared above
const handleResizeRef = useRefEventListener((event) => {
// The context of this function will be up-to-date on every re-render.
console.log(activePoint);
});
function resizerMouseDown(event, point) {
setActivePoint(point);
// Here we can use the handleResizeRef in our event listener.
function handleResize(event) {
handleResizeRef.current(event);
}
window.addEventListener("mousemove", handleResize);
// cleanup removed for clarity
window.addEventListener("mouseup", cleanup);
}
return (
<div className="interfaceResizeHandler">
{resizePoints.map((point) => (
<div
key={point}
className={`interfaceResizeHandler__resizer interfaceResizeHandler__resizer--${point}`}
onMouseDown={(event) => resizerMouseDown(event, point)}
/>
))}
</div>
);
});
const [activePoint, setActivePoint] = useState(null); // initial is null
const handleResize = () => {
setActivePoint(currentActivePoint => { // call set method to get the value
console.log(currentActivePoint);
return currentActivePoint; // set the same value, so nothing will change
// or a different value, depends on your use case
});
};
Just small addition to the awe ChrisBrownie55's advice.
A custom hook can be implemented to avoid duplicating this code and use this solution almost the same way as the standard useState:
// useReferredState.js
import React from "react";
export default function useReferredState(initialValue) {
const [state, setState] = React.useState(initialValue);
const reference = React.useRef(state);
const setReferredState = value => {
reference.current = value;
setState(value);
};
return [reference, setReferredState];
}
// SomeComponent.js
import React from "react";
const SomeComponent = () => {
const [someValueRef, setSomeValue] = useReferredState();
// console.log(someValueRef.current);
};
For those using typescript, you can use this function:
export const useReferredState = <T>(
initialValue: T = undefined
): [T, React.MutableRefObject<T>, React.Dispatch<T>] => {
const [state, setState] = useState<T>(initialValue);
const reference = useRef<T>(state);
const setReferredState = (value) => {
reference.current = value;
setState(value);
};
return [state, reference, setReferredState];
};
And call it like that:
const [
recordingState,
recordingStateRef,
setRecordingState,
] = useReferredState<{ test: true }>();
and when you call setRecordingState it will automatically update the ref and the state.
You can make use of the useEffect hook and initialise the event listeners every time activePoint changes. This way you can minimise the use of unnecessary refs in your code.
When you need to add event listener on component mount
Use, useEffect() hook
We need to use the useEffect to set event listener and cleanup the same.
The use effect dependency list need to have the state variables which are being used in event handler. This will make sure handler don't access any stale event.
See the following example. We have a simple count state which gets incremented when we click on given button. Keydown event listener prints the same state value. If we remove the count variable from the dependency list, our event listener will print the old value of state.
import { useEffect, useState } from 'react';
function App() {
const [count, setCount] = useState(0);
const clickHandler = () => {
console.log({ count });
setCount(c => c + 1);
}
useEffect(() => {
document.addEventListener('keydown', normalFunction);
//Cleanup function of this hook
return () => {
document.removeEventListener('keydown', normalFunction);
}
}, [count])
return (
<div className="App">
Learn
<button onClick={clickHandler}>Click me</button>
<div>{count}</div>
</div>
);
}
export default App;