Component library in less than 140 bytes

Component.js

b=0;$=x=>(p,i="_"+b++,u=($[i]=q=>eval(i).innerHTML=x(p,$[q],u),z=>($[++b]=z,`$.${i}(${b})`)))=>`<c id=${i}>${x(p,[]._,u)}</c>`

ComponentExpanded.js

b = 0; // global ID
$ = // component
  x => // render function
    (
      p, // props
      i = "_" + b++, // id
      u = (
        // updater = nextStateID => document.getElementById(id).innerHTML = render(props, states[nextStateID], update)
        $[i] = q => eval(i).innerHTML = x(p, $[q], u),
        // nextState => { id = nuid(); states[id] = nextState; return () => updater(id) }
        z => (
          $[++b] = z,
          `$.${i}(${ b })`
        )
      )
      // return the contents
    ) => `<c id=${i}>${ x(p, []._, u) }</c>`

Example.js

// Test at https://jsfiddle.net/bloodyowl/hkpbtmbo/

const DecrementButton = $(props => 
  `<div>
    <button onclick="${ props.decrement }">decrement</button>
  </div>`
)


const IncrementButton = $(props => 
  `<div>
    <button onclick="${ props.increment }">increment</button>
  </div>`
)

const App = $((props, state = 0, update) => 
  `<div>
    <b>${ state }</b>
    ${ IncrementButton({ increment: update(state + 1) }) }
    ${ state === 0 ? `` : DecrementButton({ decrement: update(state - 1) }) }
  </div>`
)

document.body.innerHTML = App({})

A small, small improvement would be to replace

$[++b] = z,
  `$.${i}(${ b })`

with

$[b] = z,
  `$.${i}(${ b++ })`

Since now 'components' and 'nextState' ID's can overlap. So after click on 'increment', Object.keys($) return

["2", "3", "5", "6", "8", "_0", "_3", "_6", "_8"]

With changed code and after clicking on 'increment', Object.keys($) would return

["1", "2", "4", "5", "7", "_0", "_3", "_6", "_8"]

WDYT?