mangojassi Posts - Answer Overflow

mangojassi

•Created by mangojassi on 1/10/2025 in #support

context

Hi all, I have a question about context scoping.

import { render } from "solid-js/web";
import {  useContext, createContext } from "solid-js";

const FooContext = createContext({ context: "not found" });

const FooHOC = (C: any) => (props: any) => {
    return (
      <FooContext.Provider value={props.name}>
        <C {...props} />
      </FooContext.Provider>
    )
}

const C = () => {
  console.log("C", useContext(FooContext));
  const b1 = <B name={"B1"}/>;
  const b2 = () => <B name={"B2"}/>;
  
  return (
    <A name={"A"}>
      {b1}
      {b2}
    </A>
  )
}

const B = (props: any) => {
  console.log("B", props.name, useContext(FooContext));
  return <div/>
};

const A = FooHOC((props: any) => {
  console.log("A", useContext(FooContext))
  return (
    <div>
    {props.children}
    </div>
  );
})

render(() => <C name={"C"} />, document.getElementById("app")!);`

import { render } from "solid-js/web";
import {  useContext, createContext } from "solid-js";

const FooContext = createContext({ context: "not found" });

const FooHOC = (C: any) => (props: any) => {
    return (
      <FooContext.Provider value={props.name}>
        <C {...props} />
      </FooContext.Provider>
    )
}

const C = () => {
  console.log("C", useContext(FooContext));
  const b1 = <B name={"B1"}/>;
  const b2 = () => <B name={"B2"}/>;
  
  return (
    <A name={"A"}>
      {b1}
      {b2}
    </A>
  )
}

const B = (props: any) => {
  console.log("B", props.name, useContext(FooContext));
  return <div/>
};

const A = FooHOC((props: any) => {
  console.log("A", useContext(FooContext))
  return (
    <div>
    {props.children}
    </div>
  );
})

render(() => <C name={"C"} />, document.getElementById("app")!);`

/// logs emitted

C {context: 'not found'}
B B1 {context: 'not found'}
A A
B B2 A

/// logs emitted

C {context: 'not found'}
B B1 {context: 'not found'}
A A
B B2 A

In the example above, I have three main components and a HOC which wraps a component in a context. C renders A which contains 2 Bs as children. A also has a provider wrapped around it. Within all three components, I try to retrieve a context called FooContext which is provided by the aforementioned HOC. As expected I was not able to retrieve the context in C but I was initially surprised that I am not able to retrieve the context in the first B but I am able to in the second B. I assume that this is because it lazily initialized so it is put in the "expected" place in the owner tree. First I just wanted to check if this is expected behaviour. Secondly is there anyway to catch these kinds of subtle issues in the future e.g. in a lint rule?

4 replies

Gaming

Programming