Using state without useHookstate 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 useHookstate hook:

Loading...

And the following components are identical in behavior:

Functional component:

const globalState = hookstate('');

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

Functional component without a hook:

const globalState = hookstate('');

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

Class-based component:

const globalState = hookstate('');

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