Counter

import React from 'react'
import ReactDOM from 'react-dom'
import {createEvent, createStore, combine} from 'effector'
import {useStore} from 'effector-react'

const plus = createEvent()

const $counter = createStore(1).on(plus, n => n + 1)
const $counterText = $counter.map(n => `current value = ${n}`)
const $counterCombined = combine({counter: $counter, text: $counterText})

const App = () => {
  const counter = useStore($counter)
  const counterText = useStore($counterText)
  const counterCombined = useStore($counterCombined)
  return (
    <div>
      <button onClick={plus}>Plus</button>
      <div>counter: {counter}</div>
      <div>counterText: ${counterText}</div>
      <div>counterCombined: {counterCombined.counter}, {counterCombined.text}</div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
Try it