Version 0.2.0

The technique for enabling encapsulation with hooks has been completely changed. For any JSX element that is provided with an anonymous function in one of its attributes, a scope will be created with React.createElement() and a global variable that will memorize the result of the wrapped element. To make things simple, here's a snippet of the older version:

export default (({
  data,
  sortComparator,
  filterPredicate,
  history,
}) => {
  const transformedData = React.useMemo(() =>
    data
      .filter(filterPredicate)
      .sort(sortComparator)
  , [data, filterPredicate, sortComparator])

  const _onClick = React.useCallback(() =>
    history.pop()
  , [history])

  return (
    <div>
      <button className="back-btn" onClick={_onClick} />
      <ul className="data-list">
        {transformedData.map(({ id, value }) => {
          const _onClick2 = React.useCallback(() =>
            history.push(`data/${id}`)
          , [history, id])

          return (
            <li className="data-item" key={id} onClick={_onClick2}>{value}</li>
          )
        })}
      </ul>
    </div>
  )
})

New version:

let _anonymousFnComponent, _anonymousFnComponent2

export default ({ data, sortComparator, filterPredicate, history }) => {
  const transformedData = React.useMemo(() =>
    data.filter(filterPredicate).sort(sortComparator)
  , [data, data.filter, filterPredicate, sortComparator])

  return React.createElement(_anonymousFnComponent2 = _anonymousFnComponent2 || (() => {
    const _onClick2 = React.useCallback(() => history.pop(), [history, history.pop])

    return (
      <div>
        <button className="back-btn" onClick={_onClick2} />
        <ul className="data-list">
          {transformedData.map(({ id, value }) =>
            React.createElement(_anonymousFnComponent = _anonymousFnComponent || (() => {
              const _onClick = React.useCallback(() =>
                history.push(`data/${id}`)
              , [history, history.push, id])

              return (
                <li className="data-item" key={id} onClick={_onClick}>
                  {value}
                </li>
              )
            }), { key: id })
          )}
        </ul>
      </div>
    )
  }), null)
}

Version 0.1.0

Initial release