SolidJS•3mo ago

`createContext`, What's the point?

In SolidJS, It looks like I can create a store in a JS module, then import the state and setters to any component in my app. That said, is there an advantage to using a context or is it there for convenience? This works like as far as I can tell:

// store.ts
export const [appState, setAppState] = createStore({globalValue: "I'm alive!"});

// App.tsx
import {appState} from './store.ts'

export default function App(){
    return (
        <h1>{appState.globalValue}</h1>
    )
}

// store.ts
export const [appState, setAppState] = createStore({globalValue: "I'm alive!"});

// App.tsx
import {appState} from './store.ts'

export default function App(){
    return (
        <h1>{appState.globalValue}</h1>
    )
}

3 Replies

Dakotys•3mo ago

Context is for when you need to separate state into subtrees instead of having one global store:

const MyContext = createContext();
const Provider = (props: { color: string; children: any }) => (
  <MyContext.Provider value={props.color}>{props.children}</MyContext.Provider>
);

const Child = () => {
  const value = useContext(MyContext) as string;
  return <p>{value}</p>;
};
export const App = () => (
  <>
    <Provider color="red">
      <Child />
      <Child />
    </Provider>
    <Provider color="blue">
      <Child />
      <Child />
      <Child />
    </Provider>
  </>
);

const MyContext = createContext();
const Provider = (props: { color: string; children: any }) => (
  <MyContext.Provider value={props.color}>{props.children}</MyContext.Provider>
);

const Child = () => {
  const value = useContext(MyContext) as string;
  return <p>{value}</p>;
};
export const App = () => (
  <>
    <Provider color="red">
      <Child />
      <Child />
    </Provider>
    <Provider color="blue">
      <Child />
      <Child />
      <Child />
    </Provider>
  </>
);

https://docs.solidjs.com/concepts/context#when-to-use-context

Maciek50322•3mo ago

You can pass the component state to children, without knowing which ones will need / use this state, I used it like here:

function DraggableNodesArea(props) {
  const [zoom, setZoom] = createSignal(1);
  return (
    <NodesAreaContext.Provider
      value={{
        zoom,
      }}
    >
      {props.children}
    </NodesAreaContext.Provider>
  );
}

function DraggableNode(props) {
  const areaInfo = useContext(NodesAreaContext);
  return (
    ...
  );
}

function App() {
  return (
    <DraggableNodesArea>
      <DraggableNode x={...} y={...}/>
      <DraggableNode x={...} y={...}/>
      <DraggableNode x={...} y={...}/>
    </DraggableNodesArea>
  );
}

function DraggableNodesArea(props) {
  const [zoom, setZoom] = createSignal(1);
  return (
    <NodesAreaContext.Provider
      value={{
        zoom,
      }}
    >
      {props.children}
    </NodesAreaContext.Provider>
  );
}

function DraggableNode(props) {
  const areaInfo = useContext(NodesAreaContext);
  return (
    ...
  );
}

function App() {
  return (
    <DraggableNodesArea>
      <DraggableNode x={...} y={...}/>
      <DraggableNode x={...} y={...}/>
      <DraggableNode x={...} y={...}/>
    </DraggableNodesArea>
  );
}

Global state for this DraggableNodesArea doesn't really make sense here. I use the zoom to properly change nodes' x and y. If I were to retrieve the zoom (which is controlled by DraggableNodesArea) outside to App just to pass them as props to DraggableNode is just more mess, and the DraggableNodesArea is reusable - you can have multiple "tree" states instead of one global

AlexErrant•3mo ago

It looks like I can create a store in a JS module...

Note that this is Global State, which is not recommended for SSR apps

While it is possible to use global state and computations, Context is sometimes a better solution. Additionally, it is important to note that global state should not be used in SSR (server side rendering) solutions, such as Solid Start. On the server, global state is shared across requests, and the lack of data isolation can (and will) lead to bugs, memory leaks and has security implications. It is recommended that application state should always be provided via context instead of relying on global.

https://www.solidjs.com/tutorial/stores_nocontext honestly I think this should be more obvious in the docs...

Gaming

Programming

`createContext`, What's the point?