Context.Provider breaks reactivity

Need help with a simple Context Provider issue.
Here's a little sample of the code:

const Accordion: ParentComponent<AccordionProps> = (props) => {
 const contextValue = createMemo(() => ({    open: props.open,    icon: icon(),    animate: animate(),    disabled: disabled(),  }));  createEffect(() => console.log("Accordion:", props.open, contextValue()));  // 5. return  return (    <AccordionContext.Provider value={contextValue()}>      <div {...props} class={accordionClasses()}>        {props.children}      </div>    </AccordionContext.Provider>  ); }

const Accordion: ParentComponent<AccordionProps> = (props) => {
 const contextValue = createMemo(() => ({    open: props.open,    icon: icon(),    animate: animate(),    disabled: disabled(),  }));  createEffect(() => console.log("Accordion:", props.open, contextValue()));  // 5. return  return (    <AccordionContext.Provider value={contextValue()}>      <div {...props} class={accordionClasses()}>        {props.children}      </div>    </AccordionContext.Provider>  ); }

const Accordion: ParentComponent<AccordionProps> = (props) => {
 const contextValue = createMemo(() => ({    open: props.open,    icon: icon(),    animate: animate(),    disabled: disabled(),  }));  createEffect(() => console.log("Accordion:", props.open, contextValue()));  // 5. return  return (    <AccordionContext.Provider value={contextValue()}>      <div {...props} class={accordionClasses()}>        {props.children}      </div>    </AccordionContext.Provider>  ); }

const Accordion: ParentComponent<AccordionProps> = (props) => {
 const contextValue = createMemo(() => ({    open: props.open,    icon: icon(),    animate: animate(),    disabled: disabled(),  }));  createEffect(() => console.log("Accordion:", props.open, contextValue()));  // 5. return  return (    <AccordionContext.Provider value={contextValue()}>      <div {...props} class={accordionClasses()}>        {props.children}      </div>    </AccordionContext.Provider>  ); }

ESLint throws "The reactive variable 'contextValue' should be used within JSX, a tracked scope (like createEffect), or inside an event handler function, or else changes will be ignored."
And that's what happens. The ChildComponents which consume the context do not get updated.
What do I need to do to makes this work. Thanks a bunch ahead already.

Context.Provider breaks reactivity

Similar Threads

Similar Threads

Similar Threads