Function makeReactiveHook

Converts a custom hook to be reactive. A reactive hook causes the component to re-render automatically when its data dependencies are modified.

If your custom hook makes use of a reactive value, the function has to be wrapped by makeReactive so that it can trigger a re-render on the component when the reactive value changes.

Example

Simple usage of makeReactive.

export default makeReactive(function useCount() {
  const state = useReactive({ count: 1 });
  return state.count;
});

Example

Once a custom hook is made reactive, it may access reactive values from any sources, not just from props, contexts and hooks.

import { reactiveState } from './anotherFile';

export default makeReactive(function useReactiveState() {
  return reactiveState.count;
});

Returns

A reactive custom hook.