React-extended-state NPM

react-extended-state

Sometimes React.useState and React.useReducer are not enough. Sometimes you need to have a complex object and still be concerned about speed of your react components on updates. Dont want to shell out for redux? Actions are too much or confusing for you? Then this is a perfect solution for you! A simple react provider and hook implementation to allow for state management of complex objects.

Quick overview:

It is light
It has type checking at its core
Easy setup (under 5 lines)
No more useless renders!
Re-render filtering from the generated value
Scope dependencies

Usage:

import React, { FC } from 'react';
import { render } from 'react-dom';
import { createExtendedState } from 'react-extended-state';

/**
 * This will be destructured, so be careful of what the top state is
 **/
type State = Readonly<{ name: string }>;

const { Provider, useExtendedState, useExtendedStateDispatcher } = createExtendedState<State>();

const App: FC = () => {
    const name = useExtendedState((s) => s.name);
    const dispatch = useExtendedStateDispatcher();

    return (
        <div>
            <label>
                Name:
                {name}
            </label>
            <input type="text" value={name} onChange={(e) => dispatch({ name: e.target.value })} />
        </div>
    );
};

render(
    <Provider value={{ name: '' }}>
        <App />
    </Provider>,
    document.querySelector('#root')
);