Dev server hot reloading not working properly

[SergiiMost]

I have a context provider like this:

import { createContext } from "react"
import useToggleState from '../hooks/useToggleState'

export const UserContext = createContext()

export function UserProvider(props) {
  const [isLoggedIn, toggleLoggedIn] = useToggleState(true)

  return (
    <UserContext.Provider value={{ isLoggedIn, toggleLoggedIn }}>
      {props.children}
    </UserContext.Provider>
  )
}

Based on if isLoggedIn is true or false different content is displayed. When I change useToggleState(true) manually in my code to useToggleState(false) and save the file I expect the content on my page to be reloaded according to current state. However, it doesn't happen. If I hard refresh a page, right content is loaded. According to my understanding, dev server is not hot reloading for some reason. Can this be fixed somehow ?

Thanks!

[jamesmosier]

Certain parts of your code cannot be hot reloaded (via Fast Refresh) and a Context Provider is one of those pieces. Unfortunately you will have to reload in order to see the state change when changing it via a provider.

There is an open issue that describes other limitations and will hopefully make its way into the docs soon.