react-shared-state-hook 
Simple React shared state hook based on useState
- Installation
- Basic usage
- Example application setup
- Transforming data structures
- Mixing local state with shared state
Installation
npm i react-shared-state-hook
Basic usage
import React from 'react';
import { createSharedStateHook } from 'react-shared-state-hook';
const [useSharedState, setSharedState] = createSharedStateHook({ a: 1, b: 2 });
// setSharedState({ a: 1, b: 3 }); // update state and trigger re-render
const ComponentA = () => {
const state = useSharedState(); // re-render on any change
return (
<div>
{state.a} + {state.b}
</div>
);
};
const ComponentB = () => {
const b = useSharedState(o => o.b); // only re-render when b changes
return <div>{b}</div>;
};Example application setup
// index.ts
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
ReactDOM.render(React.createElement(App), document.getElementById('root'));// App.tsx
import React from 'react';
import { useActions, useAppState } from './state';
export const App = () => (
<>
<UsernameControl />
<CountControl />
</>
);
const UsernameControl = () => {
const username = useAppState(o => o.username);
const actions = useActions();
return (
<div>
<p>Hello {username || '...'}</p>
<input value={username ?? ''} onChange={e => actions.setUsername(e.target.value)} />
</div>
);
};
const CountControl = () => {
const count = useAppState(o => o.count);
const actions = useActions();
return (
<div>
<p>Count: {count}</p>
<button onClick={() => actions.increaseCount()}>+1</button>
</div>
);
};// state.ts
import { createSharedStateHook } from 'react-shared-state-hook';
import * as actions from './actions';
export interface AppState {
username: string | null;
count: number;
}
let appState: AppState = {
username: null,
count: 1,
};
const [useAppStateHook, setAppState] = createSharedStateHook(appState);
const [useActionsHook] = createSharedStateHook(actions);
export const useAppState = useAppStateHook;
export const useActions = useActionsHook;
export const getState = () => appState;
export const setState = (update: Partial<AppState>) => {
const newState: AppState = { ...appState, ...update };
appState = newState;
setAppState(appState);
};// actions.ts
import { setState, getState } from './state';
export function setUsername(username: string) {
setState({ username });
}
export function increaseCount() {
setState({ count: getState().count + 1 });
}Transforming data structures
When the selector function returns a new object, the component will re-render on every state update. To prevent this, either split up into multiple hook calls, pass an isEqual function or memoize state selections.
Renders on each state update:
const Component = () => {
const myState = useAppState(o => ({ a: o.count, b: o.username, t: '...' }));
return <div>..</div>
};Using multiple hook calls (and create objects outside of selectors):
const Component = () => {
const a = useAppState(o => o.count);
const b = useAppState(o => o.username);
const myState = { a, b, t: '...' };
return <div>..</div>
};Passing an isEqual function:
import { shallowEqual } from 'other-npm-module';
const Component = () => {
const myState = useAppState(o => ({ a: o.count, b: o.username, t: '...' }), shallowEqual);
return <div>..</div>
};Or memoize selections using something like reselect:
const myStateSelector = createSelector<AppState>(
o => o.count,
o => o.username,
(a, b) => ({ a, b, t: '...' })
);
const Component = () => {
const myState = useAppState(myStateSelector);
return <div>..</div>
};Mixing local state with shared state
const CountControl = () => {
const [ownCount, setOwnCount] = useState(0);
const countText = useAppState(o => `Count: ${o.count} (current ownCount: ${ownCount})`);
const ownCountText = `Own count: ${ownCount}`;
const actions = useActions();
return (
<div>
<p>{countText}</p>
<p>{ownCountText}</p>
<button onClick={() => actions.increaseCount()}>+1 shared</button>
<button onClick={() => setOwnCount(ownCount + 1)}>+1 own</button>
</div>
);
};
