---
search:
  exclude: true
changelog:
  category: Release
  version: 3.0.0
date: '2017-12-21T14:52:55Z'
seo:
  description: >-
    The render prop pattern recently became a popular replacement for the child
    as function pattern. Previously the render prop on
    react-intersection-observer…
title: Render Prop Pattern
type: changelog
---
The [render prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) pattern recently became a popular replacement for the `child as function` pattern.

Previously the `render` prop on `react-intersection-observer`, was handled differently from `children` so it only rendered when the element was inside the viewport. 

## ⚠️ Breaking change
If you were using the `render` prop before, you need to handle when to render the content. 

**Old way**
```js
<Observer render={() => <div>Only rendered when in viewport</div>} />
```

**New way**
```js
<Observer render={inView => inView ? <div>Only rendered when in viewport</div> : null} />
```