​

import {createStore, createEvent, sample} from 'effector'

import {createComponent} from 'effector-react'

import React from 'react'

import ReactDOM from 'react-dom'

​

const tickEvent = createEvent()

const tick = createStore(0)

  .on(tickEvent, (n) => n + 1)

​

setInterval(tickEvent, 1000 / 60)

​

const mouseClick = createEvent()

const clicks = createStore(0)

  .on(mouseClick, (n) => n + 1)

​

const sampled = sample(tick, clicks, (tick, clicks) => ({

  tick, clicks,

}))

​

const Monitor = createComponent(sampled, (props, {tick, clicks}) => (

  <p>

    <b>tick: </b>{tick}

    <br/>

    <b>clicks: </b>{clicks}

  </p>

))

​

const App = () => (

  <div>

    <Monitor/>

    <button onClick={mouseClick}>click to update</button>

  </div>

)

​

const root = document.createElement('div')

document.body.appendChild(root)

​

ReactDOM.render(<App/>, root)