> For the complete documentation index, see [llms.txt](https://kutlugsahin.gitbook.io/re-active/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kutlugsahin.gitbook.io/re-active/reactive-components/reactiveboundary.md).

# 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.

```jsx
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>
        )
    }
});
```