Does a react Context component with a provider only get mounted when the provider is mounted?

ie does the code inside of say FooProvider

// ./FooContext.tsx
const FooContext = useContext()
export const FooProvider = () => {
  ...
  return (
    <FooContext.Provider value={...}>
      {children}
    </FooContext.Provider>
  )
}

// ./FooContext.tsx
const FooContext = useContext()
export const FooProvider = () => {
  ...
  return (
    <FooContext.Provider value={...}>
      {children}
    </FooContext.Provider>
  )
}

only get ran whenever i use the provider somehwere in my App

// ./SomeRandomComponent.tsx
import {FooProvider} from "./FooContext.tsx"
const SomeRandomComponent = () => {
  ...
  return (
  <FooProvider>
    ...
  </FooProvider>
  )
}

// ./SomeRandomComponent.tsx
import {FooProvider} from "./FooContext.tsx"
const SomeRandomComponent = () => {
  ...
  return (
  <FooProvider>
    ...
  </FooProvider>
  )
}

2 Replies

bigsexy•3y ago

basically does it behave like any other React component bump

Unknown User•3y ago

Message Not Public

Gaming

Programming

Does a react Context component with a provider only get mounted when the provider is mounted?