Function makeReactive

Converts a function component into a reactive component. A reactive component receives reactive props and re-renders automatically when its data dependencies are modified.

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

Example

Simple usage of makeReactive.

export default makeReactive(function App() {
  const state = useReactive({ count: 1 });
  return <p>{state.count}</p>;
});

Example

Once a component 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 App() {
  return <p>{reactiveState.count}</p>;
});

Returns

A reactive function component.