effector - npm Package Versions

effector-react 22.4.0

• Support @@unitShape protocol (PR #803) in useUnit

effector-react 22.3.0

• Made hooks useEvent, useStore, useStoreMap and useList isomorphic, now they would use scope from the Provider if it is available and scope-less mode otherwise. For useUnit it was done in 22.2.0.
• Added parameter forceScope to useEvent, useStore, useStoreMap and useList to force usage of scope from Provider, it would throw an error if Provider is not available, /scope module sets forceScope to true by default

effector-vue 22.2.0

• Add useStoreMap hook for Vue 3 composition API to select part from a store ((PR #780)[https://github.com/effector/effector/pull/780]) by @ilajosmanov

effector-vue 22.1.2

• Added "type" entry for package exports (PR #759)

effector 22.1.1

• Fix data races that cause obsolete states to appear in the .on and .reset methods

effector-react 22.1.0

• Added support for react 18 (PR #655)
• Added useUnit method to read multiple stores and bind events or effects to scope in a single batched call (PR #733, #738)

import {value createEvent, value createStore, value fork} from 'effector'
import {value useUnit, value Provider} from 'effector-react/scope'

const inc = createEvent()
const $count = createStore(0)
const $title = createStore('useStore example')

$count.on(inc, x => x + 1)

const App = () => {
  const [count, title, incFn] = useUnit([$count, $title, inc])
  return (
    <>
      <h1>{title}</h1>
      <p>Count: {count}</p>
      <button onClick={() => incFn()}>increment</button>
    </>
  )
}

const scope = fork()

render(
  () => (
    <Provider value={scope}>
      <App />
    </Provider>
  ),
  document.getElementById('root'),
)

• Added placeholder option to useList to render in cases of empty list

const ChatList = () => (
  <div>
    {useList($chats, {
      fn: chat => <div>Chat {chat.name}</div>,
      keys: [],
      placeholder: <div>You have no chats yet. Add first one?</div>,
    })}
  </div>
)

• Added defaultValue option to useStoreMap to return in cases when fn returns undefined

const ChatName = ({id}) => {
  const chat = useStoreMap({
    store: $chats,
    keys: [id],
    fn: chats => chats.find(chat => chat.id === id),
    defaultValue: {id: 'default', name: 'Default chat'},
  })
  return <span>{chat.name}</span>
}

• Fixed Gate.status store being serialized (PR #683)

effector-react 22.0.6

• Fix Can't perform a React state update on an unmounted component warning for useStoreMap in a few cases (issue #574)