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

import {useStore} from 'effector-react'

const inputText = createEvent()

const $text = createStore('')
  .on(inputText, (_, text) => text)
  
const $size = createStore(0)
  .on(inputText, (_, text) => text.length)

const $form = combine({
  text: $text,
  size: $size,
})

const Form = () => {
  const {text, size} = useStore($form)

  return (
    <form>
      <input
        type="text"
        onChange={e => inputText(e.currentTarget.value)}
        value={text}
      />
      <p>Length: {size}</p>
    </form>
  )
}