Skip to main content

useSelector

This works similar to react-redux's useSelector, allowing you to select anything from the store:

import { kea, useValues } from 'kea'

function MyComponent() {
// use kea's selector
const someValue = useSelector(logic.selectors.someValue)
// pass your own
const value = useSelector((state) => state.something.from.the.store)

return <div>{value}</div>
}

Internally this uses React's useSyncExternalStore if you're using React 18, or a shim if you're running React 17 or earlier.

Re-rendering

A useSelector hook will trigger a re-render if any action causes its subscribed value to change.

Only the affected component and its children will be re-rendered, not your entire application.

Questions & Answers

Ask questions about this page here.