SolidJS - How to trigger createEffect using an external dependency?

Ryan Prentiss 0
Viewed 42

Is there a way to trigger Solid's createEffect using an external dependency, as with React's useEffect dependency array?

I want to call setShowMenu on location.pathname change.

const location = useLocation()

createEffect(() => {
    console.log(location.pathname) // << external dependency
    setShowMenu(false)
})

Until there's a better option, I'm using this as a workaround.

const location = useLocation()

createEffect(() => location.pathname && setShowMenu(false))
solid-js reactjs typescript javascript
3 Answers
FoolsWisdom0

The term "external dependency" is not accurate term to describe what you are trying to do and unfortunately it is quite misleading. If you check the docs, external generally means other reactive libraries or stores like RxJS and Solid provides from function for interoperability:

#from

A helper to make it easier to interop with external producers like RxJS observables or with Svelte Stores.

Now, to answer your question, unlike React components, Solid components can access to their outer scope. So, signals do not need to be local to a component or a scope in order to trigger re-run of their effects.

Components in Solid are there to organize your code, and they disappear after initial run. You can import any signal from any module and subscribe to its changes using createComputed or createEffect etc. So following the JavaScript's scoping rules is enough to cover your case.

snnsnn0

I think you need to create a Signal. Check: https://www.solidjs.com/tutorial/introduction_effects#:~:text=An%20effect%20can%20be%20created,when%20any%20of%20them%20change.&text=Now%20clicking%20the%20button%20writes%20to%20the%20console.

"every expression in JSX is its own effect that re-executes whenever its dependent signals change"

I would try something like:

import { render } from 'solid-js/web';
import { createSignal, createEffect } from 'solid-js';

function ShowMenuHandler() {
  const [showMenu, setShowMenu] = createSignal(false);
  createEffect(() => {
    console.log("The menu is shown", showMenu());
  });

  return <button onClick={() => setShowMenu(showMenu())}>Click Me</button>;
}

render(() => <ShowMenuHandler />, document.getElementById('app'));
rustyBucketBay0
Related