import React from 'react'

import ReactDOM from 'react-dom'

import {createStore} from 'effector'

import {useStore, useStoreMap} from 'effector-react'

​

const data = [

  {

    id: 1,

    name: 'Yung',

  },

  {

    id: 2,

    name: 'Lean',

  },

  {

    id: 3,

    name: 'Kyoto',

  },

  {

    id: 4,

    name: 'Sesh',

  },

]

​

const $users = createStore(data)

const $ids = createStore(data.map(({id}) => id))

​

const User = ({id}) => {

  const user = useStoreMap({

    store: $users,

    keys: [id],

    fn: (users, [userId]) => users.find(({id}) => id === userId),

  })

​

  return (

    <div>

      <strong>[{user.id}]</strong> {user.name}

    </div>

  )

}

​

const UserList = () => {

  const ids = useStore($ids)

  return ids.map(id => <User key={id} id={id} />)

}

​

ReactDOM.render(<UserList />, document.getElementById('root'))