Share hooks across multiple React components with shared-hooks

TODO

API

Table of Contents

• useShared
• SharedHooksProvider
• useLocal
• Shared core React Hooks

useShared

Use the given hook with state shared with other React components.

useShared can only be used in components rendered within a <SharedHooksProvider>.

function useCounter(startingNumber) {
  return useReducer(n => n + 1, startingNumber)
}
function Counter({ shareKey }) {
  const [count, addOne] = useShared(shareKey, useCounter, 1)
  return <div onClick={() => addOne()}>Count: {count}</div>
}

<Counter shareKey="a" />
<Counter shareKey="a" />
<Counter shareKey="b" />
<Counter shareKey="b" />

Hooks can be provided as an inline function, however this may cause a rules of hooks linter to fail. If using such a linter, define your custom hooks as their own functions and pass in arguments as illustrated above.

// Using inline custom hooks
function Counter({ shareKey }) {
  const [count, addOne] = useShared(shareKey, () =>
    useReducer(n => n + 1, 1)
  )
  return <div onClick={() => addOne()}>Count: {count}</div>
}

Parameters

• key any The shared key to use. All components using this same key will share this hook.
• hook function (...args: A): T Any React hook, including both built-in and custom hooks.
• args ...A The arguments to provide to the hook.

Returns T The provided hook's return value.

SharedHooksProvider

TODO

Parameters

• props {children: ReactNode?}

Returns ReactElement

useLocal

TODO

Parameters

• hook function (...args: A): T
• args ...A

Returns T

Shared core React Hooks

The core React hooks can be used as is within useShared, however convenience functions are provided for a more TypeScript friendly API. This documentation also further explains the behavior of each hook when being shared among many components.

useSharedState

TODO

Parameters

• key any
• initialState (S | function (): S)

Returns [S, Dispatch<SetStateAction<S>>]

useSharedReducer

TODO

Parameters

• key any
• reducer R
• initializerArg I
• initializer function (arg: I): ReducerStateWithoutAction<R>

Returns [ReducerStateWithoutAction<R>, DispatchWithoutAction]

useSharedEffect

TODO

Parameters

• key any
• effect EffectCallback
• deps DependencyList?

Returns void

useSharedLayoutEffect

TODO

Parameters

• key any
• effect EffectCallback
• deps DependencyList?

Returns void

useSharedMemo

TODO

Parameters

• key any
• factory function (): T
• deps (DependencyList | undefined)

Returns T

useSharedCallback

TODO

Parameters

• key any
• callback T
• deps DependencyList

Returns T

useSharedRef

TODO

Parameters

• key any
• initialValue T

Returns MutableRefObject<T>