React update to state/context works sporadically - reactjs

Question

I'm trying to build a React context object that keeps track of the window size so I can use specific components based on window.innerWidth without having to determine the value in multiple places. Ive set the following "DeviceContext" component up:
import React, { createContext, useState, useLayoutEffect } from "react"
import { size } from "../utilities/breakpoints"
export const DeviceContext = createContext()
const getSize = () => {
let width = window.innerWidth > 0 ? window.innerWidth : window.screen.width
if (width > size.huge) {
return "huge"
} else if (width >= size.large) {
return "large"
} else if (width >= size.med) {
return "med"
} else {
return "small"
}
}
export function DeviceProvider({ children }) {
let [size, setSize] = useState(getSize())
useLayoutEffect(() => {
function resize() {
setSize(getSize())
}
window.addEventListener("resize", resize)
return () => {
window.removeEventListener("resize", resize)
}
})
return (
<DeviceContext.Provider value={size}>{children}</DeviceContext.Provider>
)
}
I then wrap my Layout component in <DeviceProvider> and consume it in a menu component like this:
export const Menu = ({ children }) => {
return (
<DeviceContext.Consumer>
{screenSize => {
if (screenSize === "huge" || screenSize === "large") {
return <div>Not done yet...</div>
} else {
return <ResponsiveNav />
}
}}
</DeviceContext.Consumer>
)
}
Menu.propTypes = {
children: PropTypes.oneOfType([
PropTypes.node,
PropTypes.arrayOf(PropTypes.node),
]),
}
export default Menu
What I expect to see is "Not done yet..." when window.innerwidth is larger than a specific value and the <ResponsivNav/> component when it is not. I expect my context to update when the window is resized (i.e. through dev tools) but it only does so sporadically. If I remove the references to "previous" in my resize method, it doesn't update at all.
Thanks in advance for any advice you might have!

Answer 1

By not providing a dependency array in your useLayoutEffect the event listener is being readded on every state update. Setting an empty array there will only apply the listener on mount.
useLayoutEffect(() => {
function resize() {
setSize(getSize())
}
window.addEventListener("resize", resize)
return () => {
window.removeEventListener("resize", resize)
}
}, []) // <--- empty dependency array