Function useReactiveRerender

Converts an object that changes on re-render to a reactive object that maintains the same instance across re-renders. The converted object is only shallowly reactive and is readonly.

This hook converts data in React's reactivity system to reactive data that is compatible with the rest of this library. You should use other hooks to create reactive data from source if possible, but if not, you can use this hook to convert the data. A typical use case is to pass values from useState hooks or React contexts into this function so that reactive effects, such as useEffect, can react to data changes from those hooks. You can also use this hook to create reactive props if the component is not already wrapped with makeReactive.

Example

Converting a value from useState to a reactive object. Note that a better solution is to replace useState with hooks such as useReactive if possible. This example is for illustration purpose only.

// Inside a function component:
const [count, setCount] = useState(0);
const state = useReactiveRerender({ count });

useEffect(() => {
  console.log(state.count); // executes whenever count changes
});

Example

Creating reactive props. Components wrapped with makeReactive already have reactive props, so you don't need this hook in those components.

function App(props) {
  props = useReactiveRerender(props);
  return <div>{props.count}</div>;
}

Returns

A reactive object that maintains the same instance across re-renders.