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.