effector/prefer-useUnit

useUnit is a modern hook which allows you to bind stores, events, and effects to React render cycle.

useUnit should be preferred to deprecated hooks useStore/useEvent because it has several advantages:

• it enables store updates batching, which can significantly increase React performance
• it does not have name collision with React useEvent hook
• it has more explicit naming, old useEvent accepts events and effect, so its name is a bit implicit, new useUnit accepts any unit

You can replace useStore/useEvent by useUnit as is or replace all old hooks with only one useUnit

// 👎 old approach
function OldComponent() {
  const value = useStore($value)
  const eventFn = useEvent(event)
  const effectFn = useEvent(effectFx)

  return (
    <>
      <h1>{value}</h1>
      <button onClick={eventFn}>Call event</button>
      <button onClick={effectFn}>Call effect</button>
    </>
  )
}

// 👍 new approach
function NewComponent() {
  const [value, eventFn, effectFn] = useUnit($value, event, effectFx)

  return (
    <>
      <h1>{value}</h1>
      <button onClick={eventFn}>Call event</button>
      <button onClick={effectFn}>Call effect</button>
    </>
  )
}