Skip to main content

events

events()

You can hook into all the mount and unmount events with the events builder:

import { kea, events } from 'kea'

const logic = kea([
events(({ actions, values }) => ({
// run before the logic is mounted
beforeMount: () => {},
// run after the logic is mounted
afterMount: () => {},
// run before the logic is unmounted
beforeUnmount: () => {},
// run after the logic is unmounted
afterUnmount: () => {},
// run when the logic gets a new set of props
propsChanged: (props, oldProps) => {},
})),
])

All events accept either a function or an array of functions:

const usersLogic = kea([
events(({ actions, values }) => ({
afterMount: [actions.fetchUsers, () => actions.fetchDetails(values.user.id)],

// these four lines do the same:
beforeUnmount: actions.cleanup,
beforeUnmount: [actions.cleanup],
beforeUnmount: () => actions.cleanup(),
beforeUnmount: [() => actions.cleanup()],
})),
])

The afterMount and beforeUnmount events are also available as their own builders.

afterMount()

The afterMount event runs code after a logic has been mounted. It's often used to start fetching data.

import { kea, afterMount } from 'kea'
import { loaders } from 'kea-loaders'

const logic = kea([
loaders({
users: {
fetchUsers: async () => await api.getUsers()
}
})
afterMount(({ actions }) => {
actions.fetchUsers()
}),
])

beforeUnmount()

The beforeUnmount event fires right before a logic is unmounted. Here you can cancel listeners and do other cleanup.

If you need to share data between afterMount and beforeUnmount, use logic.cache

import { kea, afterMount, beforeUnmount } from 'kea'
import { loaders } from 'kea-loaders'

const logic = kea([
afterMount(({ actions, cache }) => {
cache.onMouseMove = (e) => {
console.log('mouse moved', e.offsetX, e.offsetY)
}
window.addEventListener('mousemove', cache.onMouseMove)
}),
beforeUnmount(({ actions }) => {
window.removeEventListener('mousemove', cache.onMouseMove)
}),
])

propsChanged(props, oldProps)

The propsChanged event fires when the logic gets a new set of props:

import { kea, props } from 'kea'
import { logicType } from './logicType'

interface LogicProps {
id: number
}

const logic = kea<logicType<LogicProps>>([
props({} as LogicProps),
propsChanged(({ actions, props }, oldProps) => {
console.log({ props, oldProps })
}),
afterMount(({ props }) => {
console.log({ props })
}),
])

logic({ id: 1 }).mount() // log: { props: { id: 1 } }
logic({ id: 2 }) // log: { props: { id: 2 }, oldProps: { id: 1 } }
logic({ id: 3 }) // log: { props: { id: 3 }, oldProps: { id: 2 } }

Questions & Answers

Ask questions about this page here.