How can I use a custom hook with createMemo in many places?

I have created a hook like this:

// This is a hook
const useInMultiplePlaces =() => {
  
  const complicated = createMemo(() => {
    // something complicated
  })

  return {complicated}
}

// This is a hook
const useInMultiplePlaces =() => {
  
  const complicated = createMemo(() => {
    // something complicated
  })

  return {complicated}
}

I then use this hook in multiple active rendering components. the createMemo is probably ran multiple times everytime the useInMultiplePlaces hook is ran in those components. Is there anyway to like... have like a key for this memo, and reuse the same memo.. idk what im saying but i hope you understand my issue 😭

15 Replies

Brendonovich•2mo ago

I'd do the createMemo once and provide the accessor it returns via context

CatNoir•2mo ago

ahh a context hm the problem is, i feel like then my project would have tooo many contexts

Jasmin•2mo ago

that's not a problem in solid context are bascially free use them if they make sense :)

CatNoir•2mo ago

i guess so, thankss

const HomeDrawerControllerContext = createContext<ReturnType<typeof useController>>();

const useController = () => {
  const complicated = createMemo(() => {
    // something complicated
  })


  return { complicated };
}


const HomeDrawerControllerProvider = (props: {children: JSXElement}) => {
  const controller = useController();

  return (
    <HomeDrawerControllerContext.Provider value={controller}>
      {props.children}
    </HomeDrawerControllerContext.Provider>
  )
};

const useHomeDrawerController = () => {
  return useContext(HomeDrawerControllerContext);
}

const HomeDrawerControllerContext = createContext<ReturnType<typeof useController>>();

const useController = () => {
  const complicated = createMemo(() => {
    // something complicated
  })


  return { complicated };
}


const HomeDrawerControllerProvider = (props: {children: JSXElement}) => {
  const controller = useController();

  return (
    <HomeDrawerControllerContext.Provider value={controller}>
      {props.children}
    </HomeDrawerControllerContext.Provider>
  )
};

const useHomeDrawerController = () => {
  return useContext(HomeDrawerControllerContext);
}

I usually make my context like this, is this a good way of doing it or is there a better way?

Brendonovich•2mo ago

https://primitives.solidjs.community/package/context#createcontextprovider

Solid Primitives

A library of high-quality primitives that extend SolidJS reactivity

CatNoir•2mo ago

ooooooooooh thats amazing thanks!

CatNoir•2mo ago

aa i always hate how context can be undefined 😔

Jasmin•2mo ago

throw an error in your use function

Brendonovich•2mo ago

add null! as a second argument to createContextProvider

CatNoir•2mo ago

oh, that worked but can it ever actually be undefined? using this primitive

Jasmin•2mo ago

if your above your provider

Brendonovich•2mo ago

yeah null! is just a cheeky lie don't mess up your useContext call and it'll be fine

CatNoir•2mo ago

i see well thanks a lot everyone <33

Dakotys•2mo ago

@Sakana I also prefer cleaner code and state management separated from the rendering logic. So alternative answer to your original question could be solved also like here: https://playground.solidjs.com/anonymous/079d3ecb-2185-4094-b0c4-83de48498075 And also why did you originally wanted to use createMemo hook. Did you originally have state in separate file? Or how did you incorporate signals/stores in your createMemo.

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

CatNoir•2mo ago

Yes, i do have global states in seperate files. I am just experimenting with MVVM pattern kinda, my codebase is really messy right now, so i was trying this out. here is the createMemo code: https://github.com/Nerimity/nerimity-web/blob/main/src/components/home-drawer/useHomeDrawerController.tsx im basically filtering for only online users from a users friend list i guess having a global memo like that could work

Gaming

Programming

How can I use a custom hook with createMemo in many places?