ReactiveBoundary

This section describes how to create Observer Components using observer higher order component API.

ReactiveBoundary

This is a built-in component accepting a render function as children. This is useful when you want some part of your rendered JSX to be a separate observer but you don't want to extract that part as a separate component.

import { ref, ReactiveBoundary } from '@re-active/react';

export const Counter = createComponent(()=> {
    const count = ref(0);
    
    function increment() {
        count.value++;
    }

    return () => {
        // When increment button pressed. this component won't render
        // Because the reactive value is used by the inner ReactiveBoundary component
        // Only the contents of ReactiveBoundary will render again
        console.log('Counter Rendered');
        return (
            <div>
                <ReactiveBoundary>
                    // only this render function will be called when counter is changed
                    {() => <span>{count.value}</span>}
                </ReactiveBoundary>
                <button onClick={increment}>increment</button/>
            </div>
        )
    }
});