Skip to main content

useStoreMap

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
note

Short version of useStoreMap introduced in effector-react@21.3.0

Arguments

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

Returns

(Result)

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)

Arguments

  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

Returns

(Result)

note

updateFilter option introduced in effector-react@21.3.0

note

defaultValue option introduced in effector-react@22.1.0

Example

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(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} />)
}

Try it