react-solid-state

React Solid State

This is a local state swap for React using SolidJS. Instead of worry 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 Hooks so it only works with Function Components which is consistent with how Components work in Solid.

There are a few differences in the API from some same named Hooks from React. 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 under data is 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 withSolid 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 and use prefixed ones. Solid isn't subject to the Hook rules so it makes sense to use the same way, 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>);
})