Skip to main content


React hook, which subscribes to store and transforms its value with given function. Component will update only when selector function result will change

Common use case: subscribe to changes in selected part of store only

useStoreMap<State, Result>(
store: Store<State>,
fn: (state: State) => Result
): Result

Short version of useStoreMap introduced in effector-react@21.3.0


  1. store: Source store
  2. fn ((state) => result): Selector function to receive part of source store



useStoreMap({store, keys, fn, updateFilter?})

Overload used when you need to pass dependencies to react (to update items when some of its dependencies are changed)


  1. params (Object): Configuration object
    • store: Source store
    • keys (Array): This argument will be passed to React.useMemo to avoid unnecessary updates
    • fn ((state, keys) => result): Selector function to receive part of source store
    • updateFilter ((newResult, oldResult) => boolean): Optional function used to compare old and new updates to prevent unnecessary rerenders. Uses createStore updateFilter option under the hood




updateFilter option introduced in effector-react@21.3.0


This hook is very useful for working with lists, especially with large ones

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({id}) => id))
const User = ({id}) => {
const user = useStoreMap({
store: $users,
keys: [id],
fn: (users, [userId]) => users.find(({id}) => id === userId),
return (
<strong>[{}]</strong> {}
const UserList = () => {
const ids = useStore($ids)
return => <User key={id} id={id} />)

Try it

Last updated on