Had a go at reformatting the code posted for anybody else wanting to review it:

import React, { useEffect, useReducer } from 'react';

import Header from "./header/header";

import Content from "./content/content";

import RightSidebar from "./rightSideBar/rightSidebar";

import Footer from "./footer/footer";

import LeftNav from "./leftNav/leftNav";

import './App.css';

export const ScreenWidthContext = React.createContext(null)

function WidthReducer (state, action) {

console.log(action, 'From reducer function');

switch (action) {

case 'Phone':

return { mediaType: 'Phone' }

case 'Tablet':

return { mediaType: 'Tablet' }

case 'Desktop':

return { mediaType: 'Desktop' }

default:

return state

}

}

const App = () => {

const [state, dispatch] = useReducer(WidthReducer, {

mediaType: window.innerWidth < 641 ? 'Phone' : window.innerWidth < 1024 ? 'Tablet' : 'Desktop'

});

useEffect(() => {

function setWidth (currentWidth) {

const currentMediaType = currentWidth < 641 ? 'Phone' : currentWidth < 1024 ? 'Tablet' : 'Desktop'

if (state.mediaType !== currentMediaType) {

console.log('Current Media Type: '+currentMediaType, 'State: '+state.mediaType)

dispatch(currentMediaType)

}

}

let timeoutId = null;

const resizeListener = () => {

clearTimeout(timeoutId)

timeoutId = setTimeout(() => {

setWidth(window.innerWidth)

}, 150)

}

window.addEventListener('resize', resizeListener)

return () => {

window.removeEventListener('resize', resizeListener)

}

}, [])

console.log(window.innerWidth, state.mediaType, window.innerWidth < 641 ? 'Phone' : window.innerWidth < 1024 ? 'Tablet' : 'Desktop','After setting state')

return (

<>

<ScreenWidthContext.Provider value={state}>

<Header/>

<LeftNav/>

<div id="content">

<Content/>

</div>

<RightSidebar/>

</ScreenWidthContext.Provider>

</> )

}

export default App