Using state without state hook

You can use Hookstate without a hook. It is particularly useful for integration with old class-based React components. It works with global, local, nested and scoped states the same way.

The following example demonstrates how to use a global state without useState hook:

SSR

And the following components are identical in behavior:

Functional component:

const globalState = createState('');
const MyComponent = () => {
const state = useState(globalState);
return <input value={state.value}
onChange={e => state.set(e.target.value)} />;
}

Functional component without a hook:

const globalState = createState('');
const MyComponent = () => <StateFragment state={globalState}>{
state => <input value={state.value}
onChange={e => state.set(e.target.value)}>
}</StateFragment>

Class-based component:

const globalState = createState('');
class MyComponent extends React.Component {
render() {
return <StateFragment state={globalState}>{
state => <input value={state.value}
onChange={e => state.set(e.target.value)}>
}</StateFragment>
}
}