I'm using Next JSs, I'm having trouble finding a solution how to refresh the page when it's rotated
const app () => {
useEffect(()=>{
window.addEventListener("orientationchange", function() {
window.location.reload()
});})
return(<>some code</>);
}
I would strongly recommend you don't do that.
But there are a couple of problems with your implementation of it:
To hook up an event listener on component mount, you need an empty dependency array on your useEffect. Otherwise, your effect callback is called on every render which, in your case, will add multiple handlers.
You aren't removing the handler when the component is unmounted. You should return a cleanup callback from the useEffect callback.
The orientationchange event is deprecated and has poor browser support. Instead, listen to change on Screen.orientation which has better browser support. Alternatively, just listen for resize, since a change in screen orientation that you care about will trigger a resize event, and mobile devices are getting more and more sophisticated with how the screen real estate is used (split screen, etc.). It's possible not all of those would cause a change in orientation, but you seem to care about a change in size.
Separately, app isn't a valid component name. Component functions must start with a capital letter.
Fixing all of those:
const App () => {
useEffect(()=>{
const handler = () => {
// Handle the change in orientation here (I recommend **not** reloading)
};
Screen.orientation.addEventListener("change", handler); // Or window resize
return () => {
// On unmount, remove the handler
Screen.orientation.removeEventListener("change", handler); // Or window resize
};
}, []);
// ^^−−−− tells `useEffect` to only call your callback once, when the component
// is first mounted.
return (<>some code</>);
}