solidjs / react-solid-state

Auto tracking state management for modern React

React Solid State

This is a local state swap for React using SolidJS. Instead of worrying about when your components should update you can use declarative data. This makes use of the new React Hooks API. However it differs in a few really key ways:

• Dependencies are automatically tracked. While there is an option to set explicit dependencies it is isn't necessary.
• Nested hooks are allowed. Effects that produce sub nested effects are fair game.

The goal here is to give as close as possible to Solid's easy state management and fine-grained dependency detection while still being able to use React. All of Solid's API methods have been ported. Note: this uses React Hooks so it only works with Function Components which is consistent with how Components work in Solid.

There are a few differences in the Solid API from some React Hooks of the same name. Solid Stores are objects much like traditional React State. There is a useCleanup method that lets you register release code at both the component unmount level and in each Hook. useEffect doesn't expect a cleanup/dispose method returned for that reason. useMemo (and useSignal) return getters rather than the the pure value. This is because the context where data gets accessed is the key to automatic dependency tracking. For all the information of how Solid works, look at the website.

To get started, simply wrap your components in withSolid as a HOC, and have your Component return a Function with your JSX. From there use your hooks.

This package exports both direct Solid API named functions like createEffect, and use-prefixed ones. Solid isn't subject to the Hook rules, so it makes sense to use create prefixes, but if you want to use use you can.

import { withSolid, createSignal } from 'react-solid-state'
import React from 'react'

const WelcomeComponent = withSolid(props => {
  const [recipient, setRecipient] = createSignal('John');
  return () => (<div onClick={() => setRecipient('Jake')}>
    Hello { recipient() }
  </div>);
})

Alternatively you can use the useObserver Hook instead:

import { useObserver, createSignal, createEffect, onCleanup } from 'react-solid-state'
import React from 'react'

const CounterComponent = props => {
  const [count, setCount] = createSignal(0);
  createEffect(() => {
    const timer = setInterval(() => setCount(c => c + 1), 1000);
    onCleanup(() => clearInterval(timer));
  })
  return useObserver(() => <div>{count()}</div>);
})

react-solid-state's Issues

setting signal or store triggers UI-update of previous value

setting a signal or setting a store does trigger an update of the UI, but its previous value is being rendered instead of the updated value.

example with Signal: https://codesandbox.io/s/determined-satoshi-v2xk8?file=/src/App.js
example with Store: https://codesandbox.io/s/frosty-silence-syubp?file=/src/App.js

feat: React 18 support

It appears that react-solid-state doesn't support the new Renderer in React 18.

Using the old render function with React 18 still works, but switching to the new render function in React 18 doesn't work.

• Working React 17 example
• Broken React 18 example.

How to render an Array?

Since createStore is supported, but it looks like we can't iterate it under the react context, there is no 'For each' in here right?

Expected 2 arguments on createEffect

TypeScript complains that createEffect should have 2 arguments. I believe the following should work without issue:

const [someSignalValue, setSomeSignalValue] = createSignal("foo");

createEffect(() => { 
  console.log(someSignalValue());  // will log "foo"
});

However, the type definition says that there should be a second argument for a value. I'm not sure why this second argument is required or even what it does. Is it a dependency? And if so, shouldn't it be optional since someSignalValue() is automatically tracked?

Maybe I'm misunderstanding. Thanks!