Asosiy tarkibga o'tish


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<Source, Result>({
store: Store<Source>;
keys: any[];
fn: (state: Source, keys: any[]) => Result;
updateFilter?: (newResult: Result, oldResult: Result) => boolean;
defaultValue?: Result;
}): Result

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
    • defaultValue: Optional default value, used whenever fn returns undefined




updateFilter option introduced in effector-react@21.3.0


defaultValue option introduced in effector-react@22.1.0


This hook is 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