Skip to main content

Listen for prop change from components

Description​

Cervello's useStore hook provides a way to listen for changes in the store.
You can pass a callback function to the onChange option to listen for changes in the store with change's information.

Example​

// address-changer.tsx
import { useStore } from './address-store'

function AddressChanger () {
  const store = useStore({
    select: ['address.city'],
    onChange: (storeChange) => {
      console.log(`Changed from: ${storeChange.previousValue} to: ${storeChange.newValue}`)
    }
  })

  return (
    <>
      <p>City: {store.address.city}</p>

      <button onClick={() => { store.address.city = 'Seville' }}>
        Change city to Seville
      </button>
    </>
  )
}